JavaScript常见封装方法

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:

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