복잡 한 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({…})