浅谈javascript - 模块化规范

发布时间：2016-10-24 11:37:18.857 作者：文章转自网络，版权归原作者所有，反馈可立刻删除 (该文来自笔记，点击查看原文)

一，JS模块化演变过程

1.普通函数封装

1 function fn1(){ 2 3 } 4 5 function fn2(){ 6 7 }

最初的这种普通函数封装的缺点很明显：污染了全局变量，无法避免的会与其他模块发生变量名冲突，而且自身模块成员之间没有任何联系，，说白了就是没有做到“高内聚，低耦合”原则

2.对象

 1 var myModule = {  2 var1: 1,  3 var2: 2,  4 fn1: function(){  5  6  },  7 fn2: function(){  8  9  } 10 }

技术一直在进步，这种做法的避免了变量污染，只要保证模块名唯一即可，自身模块内的成员也有了联系；

但是新的问题出现了，看似不错的解决方案，也有缺陷，外部可以随意修改内部成员；

如：myModel.val = 100; 说白了就是产生了安全问题

3.立即执行函数

 1 var myModule = (function(){  2 var var1 = 1;  3 var var2 = 2;  4 function fn1(){  5  6  }  7 function fn2(){  8  9  } 10 return { 11  fn1: fn1, fn2: fn2 12  }; 13 })();

这种做法就是我们JS模块化的基础，技术永无止境，随着JS模块化技术提高，产生了不同流派，分支；其中主要有两种：CommonJS和AMD

二，CommonJS

1.定义模块：

根据CommonJS规范，一个单独的文件为一个模块，每个模块是一个单独的作用域，即在自身模块内部定义的变量，其他模块无法读取，除非是定义为global对象的属性

2.模块输出：

每个模块只有一个出口，即module.exports对象，我们需要把模块希望输出的内容放入该对象

3.加载模块:

加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象

 1 //模块定义  2 myModel.js  3 var name = 'Byron';  4 function printName(){  5  console.log(name);  6 }  7 function printFullName(firstName){  8 console.log(firstName + name);  9 } 10 module.exports = { 11  printName: printName, 12  printFullName: printFullName 13 } 14 //加载模块 15 var nameModule = require('./myModel.js'); 16 nameModule.printName();

不同的实现对require时的路径有不同要求，一般情况可以省略js拓展名，可以使用相对路径，也可以使用绝对路径，甚至可以省略路径直接使用模块名（前提是该模块是系统内置模块）

问题：

仔细看上面的代码，会发现require是同步的。模块系统需要同步读取模块文件内容，并编译执行以得到模块接口。

这在服务器端实现很简单，也很自然，然而，想在浏览器端实现问题却很多。

浏览器端，加载JavaScript最佳、最容易的方式是在document中插入script 标签。但脚本标签天生异步，传统CommonJS模块在浏览器环境中无法正常加载。

解决思路之一是，开发一个服务器端组件，对模块代码作静态分析，将模块与它的依赖列表一起返回给浏览器端。这很好使，但需要服务器安装额外的组件，并因此要调整一系列底层架构。

另一种解决思路是，用一套标准模板来封装模块定义，但是对于模块应该怎么定义和怎么加载，又产生的分

三，AMD

AMD 即Asynchronous Module Definition，中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范。

由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数，也就是大名鼎鼎RequireJS，实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。

requireJS主要解决两个问题

1.多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器

2.js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长

语法

requireJS定义了一个函数 define，它是全局变量，用来定义模块。

define(id?, dependencies?, factory);

id：可选参数，用来定义模块的标识，如果没有提供该参数，脚本文件名（去掉拓展名）；

dependencies：是一个当前模块依赖的模块名称数组

factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值；

 1 // 定义模块   2 myModule.js  3 define(['dependency'], function(){  4 var name = 'xlw';  5 function printName(){  6  console.log(name);  7  }  8 return {  9  printName: printName 10  }; 11 }); 12 // 加载模块 13 require(['myModule'], function (my){ 14  my.printName(); 15 });

在页面上使用require函数加载模块

1 require([dependencies], function(){ 2 3 });

require()函数接受两个参数

第一个参数是一个数组，表示所依赖的模块

第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块

require()函数在加载依赖的函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。

敬请留言指正补充

分类导航

浅谈javascript - 模块化规范

延伸阅读

我想了解如何学习