前言
熟悉Node.js的肯定对下面的代码熟悉
var http = require('http');
这段代码很好理解,就是加载一个http模块。但是你有没有想过为什么要这么写?这其中的缘由是什么呢?下面将一一道来。
JavaScript模块化
起因
开发中,一般把全局变量放到一个对象里,以防过多的全局变量。比如:
var global={ $:function(id) { return document.getElementById(id); };
但是有可能你会引用其他的js类库,他们也会占用这个全局变量,这样一来就会引起全局变量的冲突;
我经常会用到一个js类库需要引用另一个js类库这种情况。最典型的是由jQuery衍生的一些插件。如果没有引用jQuery类库或者引用顺序错误都会导致应用出错。而且每个页面都需要添加引用项,当你有一天不需要这些引用项时,还得一个一个移除,而且非常容易出错,有可能有些页面还需要这些引用项,你忘记了就会导致这个页面出错,这就是类库依赖问题;
上面的问题该怎么解决呢?这时模块化编程出现了。它很好的解决了上面所述的 问题。下面先说一说JavaScript怎么进行模块化编程。
模块化
JavaScript不是一种模块化编程语言,它不支持“类”(class)更别说模块(module)了(现在ECMAScript 6标准已经正式发布,支持“类”和“模块”。但我更想说的是ES6之前JavaScript是怎么做的,况且完全应用ES6还需要一段时间,现在业内做法是用ES6编写然后再转换成ES5)。JavaScript社区做了很多努力,在现有环境中,实现“模块”的效果。下面将一步步探究“模块化”怎么写。
- 原始写法
模块就是实现特定功能的一组方法。只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。
function m1(){ //todo something } function m2(){ //todo something }
上面的函数m1和m2组成一个模块。使用的时候,直接调用就行了。这种做法的缺点很明显:“污染”了全局变量,无法博癌症不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。
- 对象写法
为了解决上面的缺点,可以吧模块写成一个对象,所有模块成员都放到这个对象里面。
var odule=new Object({ _count:0, m1:function(){ //…… }, m2:function(){ //…… }, });
上面的函数m1和m2,都封装在module对象里。使用的时候,就调用这个对象的属性就可以了
module.m1();
但是,这样的写法会暴露所有的模块成员,内部状态可以被外部改写。比如,外部代码可以直接改变内部的计数器的值
module._count=10;
- 立即执行函数写法
使用立即执行函数(Immediately-Invoked Function Expression, IIFE),可以达到不暴露私有成员的目的。
var module=(function(){ var _count=0; var m1=function(){ //…… }; var m2=function(){ //…… }; return {m1:m1, m2:m2}; })();
使用上面的写法,外部代码无法读取内部的_count变量。
console.info(module._count) //undefined
IIFE就是JavaScript模块的基本写法。下面将再对这种写法进行加工。
- 放大模式
如果一个模块很大,必须分成几个部分,或者模块需要继承另一个模块,这时就有必要采用“放大模式(augmentation)”。
var module1=(function(mod){ mod.m3=function(){ //…… }; return mod; })(module);
上面的代码为module模块添加了一个新方法m3,然后返回新的module模块
- 宽放大模式(Loose augmentation)
在浏览器环境中,模块的各个部分通常是从网上获取的,有时无法知道哪个部分会先加载。如果采用上面4的写法,第一个执行的部分有可能加载一个不存在的空对象,这时就要采用“宽放大模式”。
var module1=(function(mod){ //…… return mod; })(window.module||{});
与“放大模式”相比,“宽放大模式”就是“立即执行函数”的参数可以是空对象。
- 输入全局变量
独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互。为了在模块内部调用全局变量,必须显示地将其他变量输入模块。
var module=(function($,YAHOO){ //…… })(jQuery,YAHOO);
上面的module模块需要使用jQuery和YUI库,就把这两个库(其实是两个模块)当做参数输入module。这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显。
模块规范
因为有了模块,我们就可以很方便的使用别人的代码,想要什么功能,就加在什么模块。
但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱套了,于是乎模块化规范就出现了。
目前,同行的JavaScript模块化规范有CommonJS、AMD和CMD。下面先说一下CommonJS
CommonJS
CommonJS是服务器端模块化的规范,Node.js就是参照CommonJS规范来实现的。这也就是文章开头为什么要用require的原因
在CommonJS中,有一个全局性方法require(),用于加在模块。比如: var url = require('url'); console.log(url);
CommonJS加载模块是同步(synchronous)的,所以只有加载完成才能执行后面的操作。像Node.js主要用于服务器的变成,加载的模块文件一般都已经存在本地磁盘了,所以加载起来比较快,不用考虑异步加载的方式,所以CommonJS规范比较适用。但如果是浏览器环境,从服务器上加载模块,很可能由于网络原因导致加载时间很长,整个应用就会停在那里等待。这时就得采取异步(asynchronous)加载模式。于是乎就有了AMD和CMD的异步加载方案。
AMD
AMD是“Asynchronous Module Definition”的缩写,意思就是“异步模块定义”。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
AMD也采用require语句加载模块,但是不同于CommonJS,它要求两个参数:
define(["module"],callback);
第一个参数[module]是一个数组,里面的成员就是要加载的模块;第二个参数callback就是加载成功后的回调函数。如果把上面的代码改写成AMD形式,就是下面这样的:
define(["url"], function(require) { var url = require("url"); console.log(url); })
实现AMD代表性的库有Require.js和curl.js
CMD
CMD是“Common Module Definition”的缩写,意思是“通用模块定义”。CMD和AMD一样,都是异步加载模块的方式。但是它们又有些区别:
- 对于依赖的模块,AMD是提前执行,CMD是延迟执行。不过Rquire.js从2.0开始也支持延迟执行。CMD推崇 as lazy as possible
- CMD推崇依赖就近,AMD推崇依赖前置
//CMD define(function(require,exports,module){ var a=require('./a'); a.doSomething(); var b=require('./b');//依赖就近书写 b.doSomething(); }); //AMD define(['./a','./b'],function(a,b){ // 依赖必须一开始就写好 a.doSomething(); b.doSomething(); });
从上面代码可以看出,CMD更接近于CommonJS规范。
参考:
http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
ps:第一次用markdown写博客,感觉挺爽的,就是博客园显示效果不太好