首页 > 代码库 > JavaScript模块
JavaScript模块
在JavaScript编程中我们用的很多的一个场景就是写模块。可以看成一个简单的封装或者是一个类库的开始，有哪些形式呢，先来一个简单的模块。
简单模块
var foo = (function() {
var name = "foo";
function hello() {
console.log("hello "+name);
}
function doWork() {
console.log("do work");
}
return {
hello: hello,
doWork: doWork
};
})();
foo.hello(); // hello foo
foo.doWork(); // do work
用IIFE创建一个闭包，隔离作用域，避免变量相互干扰。得到foo对象可以直接用了。这种适合小的模块，比如在ag中的写Service。
(function () {
angular
.module(‘readApp‘)
.service(‘authentication‘, authentication);
authentication.$inject = [‘$window‘,‘$http‘];
function authentication($window, $http) {
var saveToken = function (token) {
$window.localStorage[‘read-token‘] = token;
};
var getToken = function () {
return $window.localStorage[‘read-token‘];
};
var register = function(user) {
return $http.post(‘/api/register‘, user).success(function(data) {
saveToken(data.token);
});
};
var login = function(user) {
return $http.post(‘/api/login‘, user).success(function(data) {
saveToken(data.token);
});
};
var logout = function() {
$window.localStorage.removeItem(‘read-token‘);
};
var isLoggedIn = function() {
var token = getToken();
if (token) {
var payload = JSON.parse($window.atob(token.split(‘.‘)[1]));
return payload.exp > Date.now() / 1000;
} else {
return false;
}
};
var currentUser = function() {
if (isLoggedIn()) {
var token = getToken();
var payload = JSON.parse($window.atob(token.split(‘.‘)[1]));
return {
email: payload.email,
name: payload.name,
};
}
};
return {
saveToken: saveToken,
getToken: getToken,
register: register,
login: login,
logout: logout,
isLoggedIn: isLoggedIn,
currentUser: currentUser,
};
}
})();
也可以直接一个大括号的：
var foo = {
other: function () {
console.log("do other");
},
hello:function() {
console.log("working");
},
doWork:function() {
console.log("working");
foo.other();
}
}
这个形式我们在jquery内部或者一些工具类js中见过。简单直接。如果有内部相互调用，建议直接用对象名。这样不必在每一个方法里面写一个 var self=this 。缺点就是太长了不好维护，多增加一个变量都要加个key:value的形式。只适合简单场景。但如果模块内部方法比较多，还是建议在内部创建对象。
扩展模块
var foo = (function () {
var self = {},name = "foo";
function _wroking() {
console.log("working");
}
self.hello = function () {
console.log("hello " + name);
}
self.doWork = function () {
_wroking();
}
return self;
})();
这样内部方法和外部方法就有明确的区分，可以看下Zepto的大体结构：
var Zepto = (function() {
var undefined, key, $, classList, emptyArray = [], slice = emptyArray.slice, filter = emptyArray.filter,
zepto = {}, camelize, uniq;
//...........
function isObject(obj) { return type(obj) == "object" }
//..........
zepto.matches = function (element, selector) {
//...
}
zepto.init = function(selector, context) {
//......
}
$ = function (selector, context) {
return zepto.init(selector, context)
}
function extend(target, source, deep) {
//...
}
$.extend = function (target) {
}
})()
window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)
内部定义了zepot对象，并注意到有一个extend方法，便于后面扩展zepot的这个模块，当然也可以扩展其他的模块。target是指定的。
function extend(target, source, deep) {
for (key in source)
if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
if (isPlainObject(source[key]) && !isPlainObject(target[key]))
target[key] = {}
if (isArray(source[key]) && !isArray(target[key]))
target[key] = []
extend(target[key], source[key], deep)
}
else if (source[key] !== undefined) target[key] = source[key]
}
// Copy all but undefined properties from one or more
// objects to the `target` object.
$.extend = function(target){
var deep, args = slice.call(arguments, 1)
if (typeof target == ‘boolean‘) {
deep = target
target = args.shift()
}
args.forEach(function(arg){ extend(target, arg, deep) })
return target
}
再扩展子模块的时候就方便了：
;(function ($) {
//...
$.event = { add: add, remove: remove }
$.proxy = function(fn, context) {
//...
}
})(Zepto);
现代的模块机制
AMD和CMD都是将模块的定义封装进了一个友好的API。就是require.js和sea.js中的define方法。先看一个简单的现代模块实现：
var MyModules = (function () {
var modules = {};
function define(name, deps, impl) {
for (var i = 0; i < deps.length; i++) {
deps[i] = modules[deps[i]];
}
modules[name] = impl.apply(impl, deps);
}
function get(name) {
return modules[name];
}
return {
define: define,
get: get
}
})();
MyModules.define("bar", [], function () {
function hello(who) {
return "Let me introduce: " + who;
}
return {
hello: hello
};
});
MyModules.define("foo", ["bar"], function (bar) {
var hungry = "jazz";
function awsome() {
console.log(bar.hello(hungry));
}
return {
awsome: awsome
}
});
var bar = MyModules.get("bar");
var foo = MyModules.get("foo");
console.log(bar.hello("hippo"));//Let me introduce: hippo
foo.awsome();//Let me introduce: jazz
MyModules的define方法包含name，deps，impl三个参数，name表示是模块名称，deps表示是依赖项，impl表示实现。关键是modules[name] = impl.apply( impl, deps );这一句，上面的for循环将一个模块名称数组先转成一个包含具体模块的数组，然后apply给具体的实现方法。相当于是注入了依赖项。注意到定义foo模块的时候，依赖了bar模块，只需要在deps这个参数加入[“bar”]即可。
在sea.js中，模块的状态做了区分：
var STATUS = Module.STATUS = {
// 1 - The `module.uri` is being fetched 相当于初始化
FETCHING: 1,
// 2 - The meta data has been saved to cachedMods 缓存在cacheMods
SAVED: 2,
// 3 - The `module.dependencies` are being loaded
LOADING: 3,
// 4 - The module are ready to execute
LOADED: 4,
// 5 - The module is being executed
EXECUTING: 5,
// 6 - The `module.exports` is available
EXECUTED: 6
}
看下define方法：
View Codesave的内部是通过Module.get 缓存起uri和deps(依赖项)构建的Module对象。
Module.get = function(uri, deps) {
return cachedMods[uri] || (cachedMods[uri] = new Module(uri, deps))
}
require也是通Module.get来获取模块：
seajs.require = function(id) {
return (cachedMods[resolve(id)] || {}).exports
}
不像例子中是一次性加载模块，sea.js可以在需要的地方再加载对应的模块。
ES6中的模块
以上的模块都是基于函数的，API在运行时都可以被修改。ES6中为模块增加了一级语法支持，通过模块系统进行加载时，ES6会将文件独立的模块来处理。使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。
// ES6模块
import { stat, exists, readFile } from ‘fs‘;
上面代码的实质是从fs模块加载3个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。
下面是一个circle.js文件，它输出两个方法area和circumference。
// circle.js
export function area(radius) {
return Math.PI * radius * radius;
}
export function circumference(radius) {
return 2 * Math.PI * radius;
}
现在，加载这个模块。
// main.js
import { area, circumference } from ‘./circle‘;
console.log(‘圆面积：‘ + area(4));
console.log(‘圆周长：‘ + circumference(14));
上面写法是逐一指定要加载的方法，整体加载的写法如下。
import * as circle from ‘./circle‘;
这语法让人有点激动。而且是不允许修改的，这样就很大的确保了接口的稳定性。
import * as circle from ‘./circle‘;
// 下面两行都是不允许的
circle.foo = ‘hello‘;
circle.area = function () {};
小结：模块在JavaScript运用很广泛，好的模块构建能确定一个清晰的结构，有助于分工和维护。
参考文档：
ES6 Module: http://es6.ruanyifeng.com/#docs/module
CMD规范：https://github.com/seajs/seajs/issues/242
阅读书籍：
资源在读书群中。
JavaScript模块