the js code

[javascript]代码库

//this module's functionality is to create instances of slide,
//different instances will be easy to control, because everyone has different scope
//it's a good practise to write maintainable js code
//please refer: https://www.youtube.com/watch?v=OzjogCFO4Zo
var SlideModule = (function () {
    var Slide = function (settings) {
        this.btns = settings.btns;
        this.pics = settings.pics;
        this.picWidth = settings.picWidth;
        this.container = settings.container;
        //to set the default value
        this.span = settings.span || 1000;
        this.currentIndex = 0;

        //I call the init function here to make sure the instances work immediately after initialization
        //but I can also let clients to call this method, if they want to control the behavior, it all depends.
        this.Init();
    }

    Slide.prototype.Init = function () {
        $(this.btns[0]).css({ "background": "pink" })
        //to change the context because of the closure
        var that = this;
        //to bind the callback functions according to the events
        $.each(this.btns, function (i, btn) {
            //to bind every button with the corresponding picture
            $(btn).on("mouseover", function () {
                that.interval && clearInterval(that.interval);
                that.currentIndex = i;
                that.Run(that.currentIndex);
            });
            $(btn).on("mouseout", function () {
                that.GetNextIndex()
            })
        });
        this.GetNextIndex();
    }

    //this function is only responsible to find out the next index of pictures to show
    Slide.prototype.GetNextIndex = function () {
        //clear the interval if it exists
        this.interval && clearInterval(this.interval);
        //to change the context because of the closure
        var that = this;
        this.interval = setInterval(function () {
            //to ensure the index should be smaller than the length of the buttons(the amount of the buttons and pictures are same)
            that.currentIndex = ++that.currentIndex >= that.btns.length ? 0 : that.currentIndex;
            //call the Run function of the current instance
            that.Run(that.currentIndex);
        }, this.span)
    }

    //this function is the true one to set the layout of the slide.
    Slide.prototype.Run = function (index) {
        //to compute the right position every time
        this.container.css({ "left": -1 * this.picWidth * index + "px" });
        //to change the buttons' style
        this.btns.css({"background":"white"})
        $(this.btns[index]).css({"background":"pink"})
    }

    return Slide;
}())

//this class is to demostrate inheritance and polymorphism 
var DerivedSlideModule = (function(){
	if(SlideModule.constructor === Function){
		var DerivedSlide = function(){
			SlideModule.apply(this, arguments)
		}
		
		DerivedSlide.prototype = Object.create(SlideModule.prototype)
		//to override the same function of the base class
		DerivedSlide.prototype.GetNextIndex = function(){
			this.interval && clearInterval(this.interval);
			//to change the context because of the closure
			var that = this;
			this.interval = setInterval(function () {
				//to set the every second picture's index
				that.currentIndex+=2;
				//to ensure the index should be smaller than the length of the buttons(the amount of the buttons and pictures are same)
				that.currentIndex = that.currentIndex >= that.btns.length ? 0 : that.currentIndex;
			    //call the Run function of the current instance
				that.Run(that.currentIndex);
			}, this.span)
		};
		return DerivedSlide;
	}
	return;
}())

//in order to write testable and maintainable js code,
//I tried to apply OOP principles to JS
//abstract the relative class by using function
//encapsulate properties in constructor function and inheritable functions to prototype chain
//for polymorphism, I overrided the specific function on the prototype chain.
$(function () {
    //to call this function, please make sure the amount of the buttons and pictures are same
	var slideModule = new SlideModule({
		btns: $("#btns > input[type=button]"),
		pics: $("#container > img"),
		picWidth: 250,
		container: $("#container")
	});
	
    //create an instance of the derived class
	var slideModule1 = new DerivedSlideModule({
		btns: $("#btns1 > input[type=button]"),
		pics: $("#container1 > img"),
		picWidth: 250,
		container: $("#container1")
	});
})