传统的Javascript模板实现方式

模块：

随着网站逐渐变成“互联网应用程序”，嵌入网页的 JavaScript 代码越来越庞大，越来越复杂。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等……开发者必须使用软件工程的方法，管理网页的业务逻辑。

JavaScript 模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块（别人造好的轮子你拿来用，比如现在的各种框架、ui框架，还是vue、react这些，其实就是声明式编程了）。

但是，JavaScript 不是一种模块化编程语言，ES6 才开始支持“类”和“模块”。下面介绍传统的做法，如何利用对象实现模块的效果。

终结：

目前我理解的是：模板是工程化，使模块之间的依赖关系变得明显。然后使外部不能调用以及直接改变模板内部的私有属性。保证模板的独立性。

目前实现模板最好的方式是：封装私有变量：立即执行函数的写法。其实也就是大家常说的闭包。

将相关的属性和方法封装在一个函数作用域里面，可以达到不暴露私有成员的目的。

var module1 = (function () {
　var _count = 0;
　var m1 = function () {
　  //...
　};
　var m2 = function () {
　　//...
　};
　return {
　　m1 : m1,
　　m2 : m2
　};
})();

console.info(module1._count); //undefined

使用上面的写法，外部代码无法读取内部的_count变量。

上面的module1就是 JavaScript 模块的基本写法

然后还可以给立即执行函数加上参数，独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互

(function($, window, document) {

  function go(num) {
  }

  function handleEvents() {
  }

  function initialize() {
  }

  function dieCarouselDie() {
  }

  //attach to the global scope
  window.finalCarousel = {
    init : initialize,
    destroy : dieCarouselDie
  }

})( jQuery, window, document );

上面代码中，finalCarousel对象输出到全局，对外暴露init和destroy接口，内部方法go、handleEvents、initialize、dieCarouselDie都是外部无法调用的

参考链接：https://wangdoc.com/