Fork me on GitHub 盒子
盒子
文章目录
  1. 前言
  2. 分析
    1. 模拟module函数
    2. 定义模块
    3. 未来的模块机制(ES6)

现代模块加载机制解析

前言

随着近几年模块化被越来越多的前端人士所念叨,我也义无反顾的涌入了这股大潮,本文将浅析个人的模块加载理解。

分析

本文不对具体的库进行分析,只从宏观上介绍一些核心的概念。

模拟module函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var McChenModules = (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
}
})();

这里核心是modules[name] = impl.apply(impl, deps),为了模块的定义引入包装函数,并可传入依赖,返回值,也就是模块的API了,根据key存在modules列表中。

定义模块

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
McChenModules.define("moduleA", [], function () {
function hello(who){
return "Let me introduce:" + who;
}
return {
hello: hello
}
});
McChenModules.define("moduleB", ["moduleA"], function (module) {
var hungry = "hippo";
function awesome(){
console.log(module.hello(hungry).toUpperCase());
}
return {
awesome: awesome
}
});
var moduleA = McChenModules.get("moduleA");
var moduleB = McChenModules.get("moduleB");
console.log(moduleA.hello("hippo"));
moduleB.awesome();

moduleA和moduleB都是通过一个返回公共API的函数来定义的。模块间也可以相互依赖并使用,这便是模块化加载的核心所在。

未来的模块机制(ES6)

ES6的模块没有“行内”格式,必须被定义在独立的文件中才行,浏览器或引擎有一个默认的“模块加载器”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// moduleA.js
function hello(who){
return "Let me introduce:" + who;
}
export hello;
// moduleB.js
import hello form "moduleA";
var hungry = "hippo";
function awesome(){
console.log(hello(hungry).toUpperCase());
}
export awesome;
// main.js
module moduleA form "moduleA";
module moduleB form "moduleB";
console.log(bar.hello("rhino"));
foo.awesome();

需要把代码片段提取出来分单独的js文件。


如果能给您带去些许帮助,鄙人不甚欢心。如有错误,恳请交流指出,谢谢!
转载请注明出处:http://mcchen.club/


支持一下
扫一扫,支持McChen