会python真的可以为所欲为0(回)
370天前
这里还有人吗1(回)
555天前这里还有人吗0(回)
555天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
780天前到处都是羊，不想上班0(回)
860天前
鸽子
0(回)
864天前//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") |
}); |
}) |
