前端模块化(CommonJS) 前端模块化和组件化的理解

一，定义模块:

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

二，模块输出：

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

三，加载模块：

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

a.js
exports.add = function() {
 var sum = 0, i = 0, args = arguments, l = args.length;
 while (i < l) {
 sum += args[i++];
 }
 return sum;
};

b.js
var add = require('a').add;
exports.increment = function(val) {
 return add(val, 1);
};

index.js
var increment = require('b').increment;
var a = increment(1); //2

根据CommonJS规范:

• 一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性。

• 输出模块变量的最好方法是使用module.exports对象。

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

仔细看上面的代码，您会注意到 require是同步的。模块系统需要同步读取模块文件内容，并编译执行以得到模块接口。
然而， 这在浏览器端却很有问题。
浏览器端，加载 JavaScript 最佳、最容易的方式是在 document中插入<script>但脚本标签天生异步，传统 CommonJS模块在浏览器环境中无法正常加载。（1）解决思路之一是，开发一个服务器端组件，对模块代码作静态分析，将模块与它的依赖列表一起返回给浏览器端。 这很好使，但需要服务器安装额外的组件，并因此要调整一系列底层架构。（3）另一种解决思路是，用一套标准模板来封装模块定义：
a.js
define(function(require, exports, module) {
 exports.add = function() {
 var sum = 0, i = 0, args = arguments, l = args.length;
 while (i < l) {
 sum += args[i++];
 }
 return sum;
 };
});

b.js
define(function(require, exports, module) {
 var add = require('a').add;
 exports.increment = function(val) {
 return add(val, 1);
 };
});

index.js
define(function(require, exports, module) {
 var inc = require('b').increment;
 inc(1); // 2
});

下一章 AMD