Fork me on GitHub

JS模块加载简单实现

最近在看《你不知道的Javascript》,里面介绍了现代的JS模块机制,比较有趣,以下做一个分享

现在模块化加载常用的有三种书写规范 AMD,CMD,CommonJS, 今天暂不介绍这三种规范的差异, 而是通过代码简单介绍一下JS模块加载的实现原理。

代码如下(本代码大部分参考自《你不知道的Javascript》5.5.1):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var MyModules = (function Manager() {
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) {
console.log("Let me introduce: " + who);
}
return { hello: hello };
});
MyModules.define("foo", ["bar"], function (bar) {
function world(who) {
bar.hello(who.toUpperCase());
}
return { world: world };
});

MyModules.get( "bar" ).hello("wanger");

MyModules.get( "foo" ).world("wanger");

其中 MyModules 是实现模块加载的关键,它的核心是 modules[name] = impl.apply(impl, deps)。这样的话,我们就可以通过一个返回公共API的函数来定义 foobar 模块,foo 模块甚至接受 bar 的示例作为依赖参数,并能相应地使用它。

参考资料:

github’You-Dont-Know-JS’

你不知道的Javascript(上)(中文版) 密码:x7ge

-------------本文结束感谢您的阅读-------------