較復雜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({…})