较复杂js的书写格式

我们看较复杂的js程序最怕结构混乱,一个好的js书写结构,在很大程度上可以减缓阅读的障碍性。

我感觉一个良好的结构要有两点:一是要有一个统一的入口,这样就保证了程序的可阅读性;二是要能够灵活的设置参数,这样就保证了程序的可扩展性。

下面是我在平时写代码时常用到的两种结构,先看第一种结构,示例代码如下:

            var scrollElement = {
                timer : null,
                init : function( options ){
                        var nowOptions = this.setOptions( options )
                        this.runSetInterval( nowOptions )
                        this.hoverElement( nowOptions )
                },
                setOptions: function(options) {
                    var defaultOptions = {
                        "speed" : 1000,//动画效果的步速
                        "time" : 3000, //定时器时间间隔
                        "num" : 1,//每次滚动几个元素
                        "scrollContainer" : null,//要滚动元素的父级元素
                        "height" : ""//单个滚动元素的高度
                    }
                    return $.extend( defaultOptions, options || {} )
                 },
                runSetInterval : function( options ){
                    this.timer = setInterval(function(){
                        var scrollContainer = options.scrollContainer
                        scrollContainer.animate({ "marginTop" : -options.height*options.num }, options.speed, function(){
                            for( var i =0; i < options.num; i++ ){
                                scrollContainer.find("li").first().appendTo( scrollContainer )
                            }
                            scrollContainer.css( { "marginTop" : 0 } )
                        })
                    }, options.time)
                },
                hoverElement : function( options ){
                    var me = this
                    options.scrollContainer.on("mouseenter", "li", function(){
                        clearInterval( me.timer )
                        $(this).addClass("cur")
                    }).on("mouseleave", "li", function(){
                        me.runSetInterval.call( me, options )
                        $(this).removeClass("cur")
                    })
                }
            }

这是一段实现元素滚动效果的js。init作为统一的程序入口,init函数里面首先进行的是参数的初始化,初始化完成后进行各个功能函数的调用,一目了然。我们在看下初始化参数的函数setOptions,函数里面有一个默认的参数配置,这个函数其实要做的就是把用户设置的参数对象和默认的参数对象整合,生成一个满足用户需求的参数对象,这样就满足了程序的灵活性和可扩展性。

调用时的结构如下:

scrollElement.init({"scrollContainer" : ulNode, "height" : liNodeH, "speed" : 2000 })

另一种代码结构与上种结构本质上差不多,要有统一的入口和保证参数的灵活性,只是实现时用到了prototype。示例代码如下:

    var Class = {
        create: function() {
            return function() { this.initialize.apply(this, arguments) }
        }
    }
    var ClassSelectPage = Class.create()
    ClassSelectPage.prototype = {
        initialize : function(options){
            var me = this
            me.setOptions(options)
            me.CS = me.initClassSelect() //初始化类目选择组件
            me.handleClickTabs() //处理点击tab标签的逻辑
            me.handleClickSearchBtn() //处理点击搜索按钮的逻辑
            me.handleSearchText() //处理搜索输入框的交互
            me.gobackCsBox( $(".J_gobackCsBox") ) //为"您最常使用的分类"中的"请重新选择分类"绑定事件
            me.whenCatePathClick( $(".J_commonContent") )//"您最常使用的分类" 其它未选中的分类路径在点击时,也需要进行是否签署协议的处理
            me.handleGobtnSubmit() //处理点击下一步,填写产品信息按钮
        },
        setOptions : function( options ){
            this.options = {//初始化设置
                tabItems : $(".ind-tab").find(".ind-tab-item"), //tab元素
                csItems : $(".cs-contents").find(".cs-item"), //item元素
                JsearchContent : $(".J_searchContent"), //盛放搜索出来的类目的容器
                defaultSearchValue : "输入产品名称,系统自动为您推荐分类"//$(".J-searchText").val() //查找类目搜索框的默认值
            }

            $.extend( this.options, options || {} )
        },
        initClassSelect : function(){...},
        handleClickTabs : function(){...},
        handleClickSearchBtn : function(){},
        .........
    }

调用的时候如下:

new ClassSelectPage({…})
时间: 2024-10-27 08:17:16

较复杂js的书写格式的相关文章

推荐的HTML5书写格式

1. 元素和属性全部小写 2. 属性值尽量使用引号包围 3. 成对标签都要闭合 4. 空元素无需结束 5. <html>标签有lang属性.en代表英语,zh代表中文,不区分大小写 6. 无需完整地书写所有属性名等于属性值的属性 7. 推荐在每个html文件中引入重置样式表normalize.css 8. 为HTML5语义元素添加跨浏览器支持http://html5shiv.googlecode.com/svn/trunk/html5.js 9. 给旧版IE添加CSS3修饰特性的支持http:

js判断时间格式是否正确代码

js判断时间格式是否正确代码: 如果要求比较严格的话,时间格式也是需要进行判断的,下面就是一段这样的代码实例,希望能够给需要的朋友带来一定的帮助. 代码实例如下: function isDateString(strDate) { var strSeparator = "-"; var strDateArray; var intYear; var intMonth; var intDay; var boolLeapYear; var ErrorMsg = ""; st

Js中Date格式化为字符串

惭愧,混迹博客园2年了,还没写过什么.最近不太忙,就写一下Js中Date对象的字符串转换吧. 直接贴代码,欢迎各位拍砖,吐槽! /*格式化时间 *formatStr 格式,如:YY-MM-DD hh:mm:ss.Y-M-D h:m:s *只有一个M时,月份小于十时前面不追加零,D.h.m.s雷同 */Date.prototype.toStringFormat = function (formatStr) { if (formatStr == null || formatStr == '') re

【《代码整洁之道》精读与演绎】之四 优秀代码的书写格式准则

本系列文章由@浅墨_毛星云 出品,转载请注明出处.   文章链接:http://blog.csdn.net/poem_qianmo/article/details/52268975 作者:毛星云(浅墨)    微博:http://weibo.com/u/1723155442 这篇文章将与大家一起聊一聊,书写代码过程中一些良好的格式规范. 一.引言 以下引言的内容,有必要伴随这个系列的每一次更新,这次也不例外. <代码整洁之道>这本书提出了一个观点:代码质量与其整洁度成正比,干净的代码,既在质量

Java的书写格式,标识符及命名规则,注释

1.Java语言的书写格式(约定成俗) 1) 大括号要对齐(左大括号与句尾对其,后面大括号与句头对齐),并且成对写 2) 左大括号前面有空格 3) 遇到左大括号要缩进(下一行要缩进一下),Tab.没有遇到不用缩进,对齐就行 4) 方法和程序块之间加空行让程序看起来清晰 5) 并排语句之间加空格,例如for语句 6) 运算符两侧加空格3 + 4 = 7 2.标识符 1) 标识符:就是给类,接口,方法,变量等起名字时使用的字符序列 2) 标识符的组成: a.英文大小写字母 b.数字字符 c.$和_

引用css样式的书写格式

css的书写格式一共有三种 行内样式:意思是在行内中写样式 例如说<p style="color:red">用行内样式编写我的颜色</p> 只适用于<body>(字体颜色和背景颜色)和<body>里面的标签,但不适用于<body>之外的例如:head,title,之类的标签 内嵌样式:使用style,把所有样式都卸载style里面. 例如说: <head> <style> p{ color:red; b

CSS书写格式

转自: https://segmentfault.com/a/1190000005046830 CSS书写格式 1.格式化代码 1.1文件 [建议]:CSS文件使用无BOM的UTF-8编码 1.2缩进 [强制]:使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符. .selector { margin: 0; padding: 0; } 1.3空格 [强制]:选择器 与 { 之间必须包含空格. .selector { } [强制]:选择器 与 { 之间必须包含空格. ma

【前端JS】js 转换 Long 格式时间为 Date 格式时间

开发的时候碰到这么个需求,传到页面的时间值是 Long 格式,但是页面需要显示出来的格式需要是 yyyy-MM-dd 的 Date 时间,本来觉得像服务器端一样直接用 SimpleDateFormat 就可以了,但是页面提示没有 js 这个类,用 import="java.text.SimpleDateFormat" 也不行,好吧上网去找了下 js 转换 Long 格式时间的方法,有是有不过看起来有点麻烦,自己琢磨了下 API 取巧地写了个脚本,发出来大家探讨下( 好像扯太多了( ̄▽ ̄

js播放wav格式的录音文件

<input type="button" onclick="playSound('wavFileId');" value="play"/> <embed id="wavFileId"        src="c://fileRecord/20140729/006/20140729095707000---Out-006.wav"       width="0"