较复杂js的书写格式

浏览数：43 / 时间：2015年06月09日

我们看较复杂的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(){},
        .........
    }