javascript中的模块化

javascript中的模块化

js是为了更好的实现浏览器中的页面的交互而诞生，起初js只是用来实现一些简单的交互，后来js开始得到重视，用来实现越来越复杂的功能，编写的代码量越来越多，而为了提高代码的重用性，为了维护的方便，人么开始想到了模块化，如果js也可以像java一样，把不同功能的代码封装在不同的模块中，需要引用某个函数或功能的时候，导入相关的包，然后使用包中的方法。这样可以很好的解决原先多人开发时命名极有可能冲突，以及代码混乱复用性低等各种问题。模块化开发是一种生产方式，一种解决问题的方案，有了模块，我们就可以更方便地使用别人的代码，按需引用相关模块的功能。那么js是怎么实现模块化的呢？模块开发需要遵循一定的规范，否则就都乱套了，因此，才有了后来大家熟悉的AMD规范，CMD规范

1.es6的模块化系统出来之前

1.1浏览器端的模块化

在es6没有出来之前，社区制定了浏览器端的两个模块加载方案，AMD规范和CMD规范。CMD规范是基于的SeaJS项目停止维护，可以说已经被淘汰。AMD规范则基于RequireJs是es6的模块化机制出来之前采用的模块发机制。

1.1.1AMD模块化定义

AMD规范只定义了一个函数define，它是全局变量，我们可以用它来定义一个模块如：define(id?, dependencies?, factory)，id是定义中模块的名字，这个参数是可选的，如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字，如果提供了该参数，模块名必须是“顶级”的和绝对的。dependencies是定义的模块中所依赖模块的数组，应该按照依赖数组中的位置顺序以参数的形式传入（定义中模块的）工厂方法中。factory是模块初始化要执行的函数或对象，如果为函数，它应该只被执行一次，如果是对象，此对象应该为模块的输出值

1.1.2AMD规范加载模块

require.js中采用require()语句加载模块，在定义好了模块后，我们可以使用require进行模块的加载：
require([module], callback);
require要传入两个参数，第一个参数[module]，是一个数组，里面的成员就是要加载的模块，第二个参数callback，则是加载成功之后的回调函数

1.1.3AMD规范模块化事例

define(“person”, [“require”, “exports”, “worker”], function (require, exports, woker) {
exports.work = function() {
return require(“worker”).work();
}
});
上面的代码定义了一个person的模块，这个模块依赖require，exports，worker，因此需要先加载它们，再执行后面的factory
require([‘worker’], function (increment) {
　 worker.work();
});
上面的代码中，比如我们现在已经定义了一个模块，名字为increment，里面有一个work方法，我们现在需要用到里面的方法，只要像上面一样将模块加载进来，然后调用方法就可以了。

2.1服务端node中的模块化

node应用由模块组成，采用的commonjs模块规范。每一个文件就是一个模块，拥有自己独立的作用域，变量，以及方法等，对其他的模块都不可见。CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。require方法用于加载模块。

2.1.1Module对象

module.exports属性表示当前模块对外输出的接口，其他文件加载该模块，实际上就是读取module.exports变量node为每一个模块提供了一个exports变量(可以说是一个对象)，指向 module.exports。这相当于每个模块中都有一句这样的命令 var exports = module.exports;这样，在对外输出时，可以在这个变量上添加方法。例如 exports.add = function ®{return Math.PI * r *r};注意：不能把exports直接指向一个值，这样就相当于切断了 exports 和module.exports 的关系。例如 exports=function(x){console.log(x)};
注：一个模块的对外接口，就是一个单一的值，不能使用exports输出，必须使用 module.exports输出。module.exports=function(x){console.log(x);};

2.1.2 require命令

require命令用于加载模块文件，相当于读入并执行一个js文件，然后返回该模块的 exports对象，没有发现指定模块，则就会报错。 例如 person.js exports.name = “小汪”;exports.age = 22;

在 同目录下的 worker.js 文件中 var person = require(’./person.js’);

console.log(person.name); // 小汪

console.log(person.age); // 22
注： commonsJS的加载机制，加载得到的是被输出值的拷贝。也就是说，一旦输出一个值，在输出模块与导入模块中任意一个模块的值的变化不会对另一个模块的值产生影响。

es6的模块化系统

1.es6模块化简介

es6的模块化系统出来之后成了语言层面的标准，实现的相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。es6模块的一大特点是尽量的静态化，es模块化导出的不是一个对象而是一些变量或者方法，es6的模块加载机制是编译时加载或静态加载，在编译阶段就可以完成模块的加载工作。

2.es6模块化功能的实现

es6中模块功能的实现主要由两个命令构成：export和import，export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能一般来说，一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取，如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量，如果某个模块需要使用另一个模块的功能就必须通过import命令去导入另一个模块暴露的接口（方法或者属性）然后使用他们。

2.es6模块化化实例

我们定义一个person.js文件使用export命令暴露需要输出的接口
// person.js
export var name = ‘小汪’;
export var age = 22;
function sayName() { … }
function sayAge() { … }

export {
name,
age,
sayName,
sayAge
};
我们定义一个worker.js文件代表需要使用person.js的模块，如果想要使用person.js文件中的方法或者属性可以使用import命令导入然后使用

// worker.js
import {name, sayName} from ‘./profile.js’;

function sayName(element) {
sayName()
}
关于es6中模块的详细介绍与使用可以参考：(http://caibaojian.com/es6/)