模块化主假如用来抽离大众代码,断绝作用域,防止变量争执等。将一个庞杂的体系分解为多个模块以轻易编码。
会报告以下内容
- CommonJS
- AMD 及 中心道理完成
- CMD 及 中心道理完成
- UMD 及 源码剖析
- ES6 Module
- webpack打包战略
CommonJS
同步加载
CommonJS API是以在浏览器环境以外构建 JS 生态体系为目的而发生的项目
假如没有写后缀名Node会尝试为文件名增加.js、.json、.node后再搜刮。
.js件会以文本花样的JavaScript剧本文件剖析,.json文件会以JSON花样的文本文件剖析,.node文件会以编译后的二进制文件剖析。
AMD
异步加载(对象)
“Asynchronous Module Definition”(异步模块定义),是由RequireJS提出的
AMD中心完成
function require (url, callback) {
// url能够换成List,然后遍历;
var $script = document.createElement('script');
$script.src = url;
// 应用onload回调,完成依靠加载
$script.onload = function (e) {
// 省略callback 检测
callback();
}
document.body.appendChild($script);
}
CMD
按需加载
由玉伯提出的(seajs),按需剖析加载模块(价值挺大的),须要运用把模块变成字符串剖析一遍才晓得依靠了那些模块
CMD中心完成
// ajax,怕忘了原生ajax怎样写。顺手写一个
function myAjax (url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('get', url);
xhr.send();
xhr.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
return callback(request.responseText);
} else {
// 省略...
}
} else {
// 省略...
}
}
}
// 完成
function require(url) {
myAjax(url, function(res) {
// 此时 res 的对应JS的 String情势
// 剖析 省略
// 实行
eval(res);
});
}
UMD
兼容AMD,CommonJS 模块化语法。
UMD源码剖析
(function (root, factory) {
// 推断是不是支撑AMD(define是不是存在)
if (typeof define === 'function' && define.amd) {
define(['b'], factory);
// 推断是不是支撑NodeJS模块花样(exports是不是存在)
} else if (typeof module === 'object' && module.exports) {
module.exports = factory(require('b'));
// 前两个都不存在,则将模块公开到全局(window或global)
} else {
root.returnExports = factory(root.b);
}
} (this, function (b) {
// ...
}));
import
加载援用
- 编译时加载(静态实行)。
- 加载的是援用
不能处于代码块中
为了完成编译时加载
- 提案示意能够用
import()
运用时加载
- 提案示意能够用
不能运用表达式和变量 等运转时加载的语法
- 同上
webpack打包战略
import会被编译成 require/exports (CommonJS范例)
1. 直接引入
import xxx.js
或许import xxx.css
会像增加<script>
和<link>
标签一样注入到全局中去
2. commonjs同步语法
webpack会将require('abc.js')
打包进援用它的文件中。以对象的情势猎取。
3. commonjs异步加载
webpack(require.ensure):webpack 2.x 版本中的代码支解。
在commonjs中有一个Modules/Async/A范例,内里定义了require.ensure
语法。webpack完成了它,作用是能够在打包的时刻举行代码分片,并异步加载分片后的代码。
此时list.js会被打包成一个零丁的chunk文件。像如许:1.d6f343b727f5923508bf.js
比方:vue路由懒加载const Foo = () => import('./Foo.vue')
manifest
manifest文件是最早加载的,manifest是在vendor的基础上,再抽掏出要常常更改的部份,经由过程manifest.js文件来治理bundle文件的运转和加载。(比方关于异步加载js模块部份的内容)
webpack v4.6.0+ 增加了预取和预加载的支撑
import(/* webpackPrefetch: true */ 'LoginModal');
会天生 <link rel="prefetch" href="login-modal-chunk.js"> 并追加到页面头部