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:

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