javascript在1页上加载2个模块模式脚本

时间:2013-12-30 14:11:52

标签: javascript module module-pattern

我已创建了2个模块模式脚本,但如果我将它们组合在同一页面上,则只会加载第一个模块。

sliderJS.start("gallerySlider")
whitelabel.start()

这是完整的脚本:

var whitelabel = (function(){
    var phoneMenu = {}
    function startProcedure(){
        phoneProcedure.setupPhoneMenu()
        slider.start()
    }

    var phoneProcedure = (function(){
        var layoutMenu = document.getElementById("layoutMenu")
        var phoneButton = document.getElementById("phoneButton")
        return {
            setupPhoneMenu: function(){
                phoneButton.addEventListener("click", this.togglePhone)
            },

            togglePhone: function(e){
                e.preventDefault()
                layoutMenu.classList.toggle("active")
            }
        }
    })()

    return {
        start: startProcedure
    }
})()


var sliderJS = function($){
    var sliderJS, 
        sliderJSslide, 
        sliderJSslideLength, 
        sliderJSprev, 
        sliderJSnext,
        slideEvents,
        sliderID

    slideEvents = {
        doSlide: function(type, e){
            if(e){e.preventDefault()}
            for(var i = 0; i < sliderJSslideLength; i++){
                var slideIsActive = hasClass("active", sliderJSslide[i])
               if(slideIsActive){
                    sliderJSslide[i].className = "sliderJS-slide"
                   switch (type) {
                        case "next":
                            slideEvents.moveSlideNext(i)
                        break;
                        case "prev":
                            slideEvents.moveSlidePrev(i)
                        break;
                    }
                    break;
                }
            }
        },
        moveSlideNext: function(i){
            if(i+1 < sliderJSslide.length){
                sliderJSslide[i+1].className = "sliderJS-slide active"
            } else {
                sliderJSslide[0].className = "sliderJS-slide active"
            }
        },

        moveSlidePrev: function(i){
            if(i-1 != -1){
                sliderJSslide[i-1].className = "sliderJS-slide active"
            } else {
                sliderJSslide[sliderJSslide.length -1].className = "sliderJS-slide active"
            }
        }
    }

    function start(id){
        setVariables(id)
        setEventListeners()
    }

    function setVariables(id){
        sliderID = id
        sliderJS = $("#" + sliderID)[0]
        sliderJSslide = $(".sliderJS-slide", sliderJS)
        sliderJSslideLength = sliderJSslide.length
        sliderJSprev = $("#" + sliderID + "-prev")[0]
        sliderJSnext = $("#" + sliderID + "-next")[0]
    }

    function setEventListeners(){
        sliderJSnext.addEventListener("click", function(){return function(e){ slideEvents.doSlide("next", e)}}())
        sliderJSprev.addEventListener("click", function(){return function(e){ slideEvents.doSlide("prev", e)}}())
    }
    function hasClass(parClass, parElement){
        if(parElement.className.indexOf(parClass) == -1){return false} else {return true}
    }
    return {
        start:start
    }
}(Sizzle)

sliderJS.start("gallerySlider")
whitelabel.start()

我做错了什么?谢谢你的帮助...

0 个答案:

没有答案