模块化

2024-02-20 20:33:46

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";