本文从以时间为轴从以下几个方面进行总结 JS 模块化。从无模块化 => IIFE => CJS => AMD => CMD => ES6 => webpack 这几个阶段进行分析。
历史
幼年期:无模块化
方式
需要在页面中加载不同的 js,用于动画,组件,格式化
多种 js 文件被分在了不同的文件中
不同的文件被同一个模板所引用
<script src="jquery.js"></script>
<script src="main.js"></script>
<script src="dep1.js"></script>
复制代码
此处写法文件拆分是最基础的模块化(第一步)
* 面试中的追问
script 标签的参数:async & defer
<script src="jquery.js" async></script>
复制代码
总结
普通加载:解析到立即阻塞,立刻下载执行当前 script
defer 加载:解析到标签开始异步加载,在后台下载加载 js,解析完成之后才会去加载执行 js 中的内容,不阻塞渲染
async 加载:(立即执行)解析到标签开始异步加载,下载完成后开始执行并阻塞渲染,执行完成后继续渲染
污染全局作用域
成长期(模块化前夜) - IIFE(语法测的优化)
作用域的把控
let count = 0;
const increase = () => ++count;
const reset = () => {
count = 0;
}
复制代码
利用函数的块级作用域
(() => {
let count = 0;
...
})
//最基础的部分
复制代码
实现一个最简单的模块
const iifeModule = (() => {
let count = 0;
const increase = () => ++count;
const reset = () => {
count = 0;
}
console.log(count);
increase();
})();
复制代码
优化 1:依赖其他模块的传参型
const iifeModule = ((dependencyModule1,dependencyModule2) => {
let count = 0;
const increase = () => ++count;
const reset = () => {
count = 0;
}
console.log(count);
increase();
...//可以处理依赖中的方法
})(dependencyModule1,dependencyModule2)
复制代码
面试 1:了解 jquery 或者其他很多开源框架的模块加载方案
将本身的方法暴露出去
const iifeModule = ((dependencyModule1,dependencyModule2) => {
let count = 0;
const increase = () => ++count;
const reset = () => {
count = 0;
}
console.log(count);
increase();
...//可以处理依赖中的方法
return
increase,reset
}
})(dependencyModule1,dependencyModule2)
iifeModule.increase()
复制代码
=> 揭示模式 revealing => 上层无需了解底层实现,仅关注抽象 => 框架
继续模块化横向展开
转向框架:jquery|vue|react 模块细节
转向设计模式
成熟期
CJS (Commonjs)
node.js 指定
特征:
通过 module + exports 对外暴露接口
通过 require 去引入外部模块,
参考 前端进阶面试题详细解答
main.js
const dependencyModule1 = require('./dependencyModule1')
const dependencyModule2 = require('./dependencyModule2')
let count = 0;
const increase = () => ++count;
const reset = () => {
count = 0;
}
console.log(count);
increase();
exports.increase = increase;
exports.reset = reset;
module.exports = {
increase, reset
}
复制代码
exe
const {increase, reset} = require(./main.js)
复制代码
复合使用
(function(this.value,exports,require,module){
const dependencyModule1 = require('./dependencyModule1')
const dependencyModule2 = require('./dependencyModule2')
}).call(this.value,exports,require,module)
复制代码
追问:一些开源项目为何要把全局、指针以及框架本身作为参数
(function(window,$,undefined){
const _show = function(){
$("#app").val("hi zhuawa")
}
window.webShow = _show;
})(window,jQuery)
复制代码
阻断思路
优缺点
=> 异步依赖的处理
AMD
通过异步执行 + 允许指定回调函数经典实现框架:require.js
新增定义方式:
//define来定义模块
define(id, [depends], callback)
//require来进行加载
reuqire([module],callback)
复制代码
模块定义的地方
define('amdModule',[dependencyModule1,dependencyModule2],(dependencyModule1,dependencyModule2) => {
//业务逻辑
let count = 0;
const increase = () => ++count;
module.exports = {
increase
}
})
复制代码
引入的地方
require(['amdModule'],amdModule => {
amdModule.increase()
})
复制代码
面试题:如果在 AMDModule 中想兼容已有代码,怎么办?
define('amdModule',[],require => {
const dependencyModule1 = require('./dependencyModule1')
const dependencyModule2 = require('./dependencyModule2')
//业务逻辑
let count = 0;
const increase = () => ++count;
module.exports = {
increase
}
})
复制代码
面试题:手写兼容 CJS&AMD
//判断的关键:
1. object还是function
2. exports ?
3. define
(define('AMDModule'),[],(require,export,module) => {
const dependencyModule1 = require('./dependencyModule1')
const dependencyModule2 = require('./dependencyModule2')
let count = 0;
const increase = () => ++count;
const reset = () => {
count = 0;
}
console.log(count);
export.increase = increase();
})(
//目标:一次性区分CJS还是AMD
typeof module === 'object' && module.exports && typeof define !== function ? //CJS
factory => module.exports = factory(require,exports,module)
: //AMD
define
)
复制代码
优缺点
优点:适合在浏览器中加载异步模块的方案
缺点:引入成本
CMD
按需加载主要应用框架:sea.js
define('module',(require,exports,module) => {
let $ = require('jquery')
let dependencyModule1 = require('./dependencyModule1')
})
复制代码
优缺点
ES6 模块化
新增定义:
面试:
性能 - 按需加载
// ES11原生解决方案
import('./esMModule.js').then(dynamicModule => {
dynamicModule.increase();
})
复制代码
优点:通过一种统一各端的形态,整合了 js 模块化的方案缺点:本质上还是运行时分析
解决模块化新思路 - 前端工程化
遗留
根本问题:运行时进行依赖分析解决方案:线下执行
编译时依赖处理思路
<script src="main.js"></script>
<script>
// 给构建工具一个标识位
require.config(__FRAME_CONFIG__);
</script>
<script>
require(['a', 'e'], () => { // 业务逻辑
})
</script>
define('a', () => {
let b = require('b')
let c = require('c')
})
复制代码
完全体:webpack 为核心的前端工程化 + mvvm 框架的组件化 + 设计模式
评论