Question

我在模块模式中有一个构造函数函数。我使用以下代码创建了此模块的2个实例：

var jo = new sliderJS("mySliderJS")
jo.start()


var jow = new sliderJS("mySliderJS2")
jow.start()

这是模块sliderJS：

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 = $("#" + sliderID + " > .sliderJS-slide")
        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 function constr(id){

        sliderID = id
        this.start = start


    }

}(Sizzle)

如果我只使用1个实例而不是代码。一旦我创建了第二个实例，第一个实例的滑块就会停止工作，因为所有变量值都已更改为反映第二个滑块。

我做错了什么？

这是再次使用jsFiddle（删除最后一个实例-var jow-以查看脚本实际工作）：http://jsfiddle.net/hb2pE/

Answer 1

该模块有点搞砸了。它应该遵循这种模式：

var sliderJS = function(sliderID) {

    //define private functions here eg. setEventListeners

    //Return an object containing functions that are public eg. doSlide
    return {
        doSlide: function(type, e){

        }
    };
};

因此您不需要新关键字，只需致电：

var slider1 = sliderJS("mySliderJS2");

但是，如果您创建了大量实例并希望获得更好的性能，那么最好创建一个函数并填充其原型 - 然后您可以使用new关键字调用该函数。

使用构造函数的模块模式的2个实例作为模块的返回值

1 个答案: