JavaScript常见封装方法

时间:2023-08-21 17:30:56

1.最简单的,使用变量,然后用匿名函数包裹,不封装

2.对象字面量简单封装(不完整的模块模式,因为无法达到变量、方法私有效果。不过确实有分离和组织代码的能力,也就算一种简略的模块模式的实现方式)

var Carousel = {
init: function(){...},
bind: function(){...},
showPre: function(){...},
showNext: function(){...}
};

3.原型构造器模式封装

function Carousel(){
this.init();
} Carousel.prototype = {
init: function(){...},
bind: function(){...},
showPre: function(){...},
showNext: function(){...}
};

4.模块模式与原型构造器模式绑定多个:使用一个数组保存实例

var CarouselCenter = (function(){

	var carouselList = [];

	function init($carousel){
$carousel.each(function(){
var $cal = $(this);
if($cal.hasClass('init')){
return;
}
carouselList.push( new Carousel($cal) );
$cal.addClass('init')
}); } function getList(){
return carouselList;
} function Carousel($carousel){
} Carousel.prototype = { bind: function(){
var _this = this;
this.$pre.on('click', function(){
_this.showPre();
});
this.$next.on('click', function(){
_this.showNext();
});
}, showPre: function(){
this.$ct.prepend(this.$ct.children().last());
this.$ct.css('left', 0-this.imgWidth);
this.$ct.animate({'left': 0});
}, showNext: function(){
var $ct = this.$ct;
$ct.animate({'left': 0-this.imgWidth},function(){
$ct.append($ct.children().first());
$ct.css('left', 0);
});
}
}; return {
init: init,
getList: getList
} })(); // 调用
// CarouselCenter.init($('#c1'))
// CarouselCenter.init($('#c2'))
// CarouselCenter.init($('#c2')) //不会重复绑定 // CarouselCenter.init($('.carousel'))

5.通用写法

(function(window,$){
function Carousel(){ }; Carousel.prototype = { }; window.Carousel = Carousel;
})(window,jQuery)

ps:

模式目的:编写易于维护的代码,其中一个最重要方面是能够找到代码中重复出现的主题并优化它们。