前端内参
搜索文档…
壹.2.14 模块化开发
一线互联网公司几乎都在推行模块化开发

壹.2.14.1 老一辈前端工程师如何实现模块化

在 ECMAScript 6 出现之前,JavaScript语言没有内建支持模块化的语法,这导致前端开发复杂Web应用的时候,引用.js、组织文件、扩展功能、维护工程都显得效率低下,而且流程繁琐。然而对于一个复杂的Web应用,模块化编程可以良好的工作分工、功能扩展、工程维护,是软件开发方法论里面最基本的需求。那时候老一辈前端工程师们可以使用 IIFE 函数来实现模块化,很多库比如jQuery是这样实现的。
1
let module = (function() {
2
var _version = "1.0";
3
var _name = "a-nice-module";
4
5
function _log(x) {
6
console.log(x);
7
}
8
9
function say(s) {
10
_log(s);
11
}
12
13
return {
14
name: _name,
15
say: say
16
};
17
})();
18
19
console.log(module._version);//>> undefined
20
console.log(module._log);//>> undefined
21
console.log(module.name); //>> a-nice-module
22
module.say("hello"); //>> hello
Copied!
模块本质上是封装,把模块内可访问的和不可以访问的区分得清清楚楚。如上示例,模块之外是无法访问到模块内部的私有属性_version和私有方法_log的;而以一个对象的属性和方法的形式暴露内部属性_name和方法say(s)之后,然后将该对象返回给模块外部的调用者,那么在模块外部就可以访问它们了。
ECMAScript 6 吸收了老一辈前端工程师的各种优秀思想,最终采用了importexport内建语法支持模块化开发,基于浏览器底层的实现,使前端的模块化开发变得空前地规范和有效率起来,模块化开发终于迎来了应用热潮。

壹.2.14.2 AMD 和 CommonJS

//todo

壹.2.14.3 ECMAScript 6 的模块化

1.模块里的变量是以引用形式传递的

模块内变量的改变会同步到外面,说明是模块是以引用类型传递的,也即引用模块时,模块外层再包了一层对象,变量以该对象的属性传递过去。举例说明如下:
1
///////////////// module.js //////////////////////
2
3
let m = 0;
4
setTimeout(() => {
5
m = 1;
6
}, 1000);
7
export function getM() {
8
return m;
9
}
Copied!
上面代码相当于传递下面的对象,其中_m表示私有属性m
1
{
2
_m:0,
3
getM:function(){
4
return this._m;
5
}
6
}
Copied!
下面为入口文件 index.js :
1
/////////////// index.js //////////////////////////
2
3
import {getM} from "./module.js";
4
setTimeout(()=>{
5
console.log(getM());
6
});
7
setTimeout(()=>{
8
console.log(getM());
9
},2000);
10
//>> 0
11
//>> 1
Copied!

2.模块嵌套

有些书籍称之为模块的继承,继承是面向对象编程的概念,本书更愿意称之为嵌套
//todo
最近更新 1yr ago