CommonJS
默认情况下,浏览器是同步加载 JavaScript 脚本,即渲染引擎遇到<script>
标签就会停下来,等到执行完脚本,再继续向下渲染。
browserify
http://browserify.org/
浏览器端的打包工具
,和 webpack 类似
打包后的bundle.js
也是一个封闭的模块。在 index.html 中通过 script 标签引入后,也无法访问里面的变量
如果需要,可以在模块中用 window.变量的方式将变量挂载到全局。
导入导出方式
// exports带s
require();
module.exports = value;
module.exports.a = b;
exports.a = b;
AMD
模块的加载是异步的
定义一个只是对象的模块
// moduleA.js
define({
name: "djh",
nickname: "flyerya",
});
// app.js
require(["moduleA"], function (obj) {
//obj 就是 {name:'djh',nickname:'flyerya'}
});
定义没有依赖的模块
define(function () {
// 暴露模块
return xx;
});
定义有依赖的模块
define(["moduleA", "moduleB"], function (A, B) {
// 暴露模块
return xx;
});
ES6
单个暴露
export const a = "这是a";
export const b = "这是b";
export const c = "这是c";
import { a, b, c } form ".js";
export 没有 s,接受必须以{}接收
统一暴露
const a = "这是a";
const b = "这是b";
const c = "这是c";
export { a, b, c };
import { a, b, c } form ".js";
export 没有 s,接受必须以{}接收
默认暴露
export default value;
import value from ".js";
只能默认暴露一次,多了会报错,直接接收暴露变量