JavaScript 进阶（三）模块化

Augus

关注

发布于: 3 小时前

刚和朋友在外面小吃了一顿。然后步行回家，大概走到 5km，说实话很久没有运动了。走这么远。感觉脚好酸，看来以后自己还是要好好锻炼锻炼了，咱今天就废话不多说，直接进入正题。Let's go！

模块化

ES6 的模块化

在有 Babel 的情况下，我们可以直接拿起 ES6 的模块化语法直接用，干他丫的

// file a.jsexport function a() {}export function b() {}
// file b.jsexport default function() {}
// file c.js 导入import {a, b} from './a.js'import XXX from './b.js

复制代码

CommonJS

CommonJs 是 Node 独有的规范，写 node 的同学相比是日常见到的，嗯哈

// a.jsmodule.exports = {    value: 1}// orexports.value = 1
// b.jsvar module = require('./a.js')module.value // 1

复制代码

上述代码中，我们发现 module.exports 和 exports 都可以实现，那他两有啥区别呢？

// 这⾥其实就是包装了⼀层⽴即执⾏函数，避免污染全局变量，
module.exports = {    value: 1}// 基本实现var module = {    exports: {} // exports 就是个空对象}// 这个是为什么 exports 和 module.exports ⽤法相似的原因var exports = module.exportsvar load = function (module) {    // 导出的东⻄    var value = 1    module.exports = value    return module.exports
};

复制代码

再来说说 module.exports 和 exports ，⽤法其实是相似的，但是不能对 exports 直接赋值，不会有任何效果。

对于 CommonJS 和 ES6 中的模块化的两者区别是：
前者⽀持动态导⼊，也就是 require(${path}/xx.js) ，后者⽬前不⽀持，
⽽后者是异步导⼊
但是后者采⽤引用的形式，导⼊导出的值都指向同⼀个内存地址，所以导⼊值会跟随导出值变化
后者会编译成 require/exports 来执⾏的

AMD

AMD 是由 RequireJS 提出的

// AMD
define(['./a', './b'], function(index, indexy) {    index.did()    indey.did()})
define(function(require, exports, module) {    var index = require('./a')    index.doSomething()    var indey = require('./b')    indey.doSomething()})

复制代码

END

发布于: 3 小时前阅读数: 2

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

发布

暂无评论

创作场景

JavaScript 进阶（三）模块化

模块化

ES6 的模块化

CommonJS

AMD

Augus

评论