标签：iphonex ref 通过 init 模块化 color sync code plain
AMD、UMD、
无论是那种模块化规范，重点关注
独立模块作用域
导出模块内部数据
独立模块作用域
一个文件就是模块，拥有独立的作用域
导出模块内部数据
通过 module.exports 或 exports 对象导出模块内部数据
// a.js let a = 1; let b = 2; module.exports = { x: a, y: b } // or exports.x = a; exports.y = b;
导入外部模块数据
通过 require
// b.js let a = require(‘./a‘); a.x; a.y;
https://github.com/amdjs/amdjs-api/wiki/AMD
浏览器并没有具体实现该规范的代码，我们可以通过一些第三方库来解决
这里强调一下AMD是一个规范，它并不是代码。
这是一个第三方库
// 1.html <script data-main="scripts/main" src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script>
通过一个 define 方法来定义一个模块，并通过该方法的第二个回调函数参数来产生独立作用域
// scripts/Cart.js define(function() { // 模块内部代码 })
导入外部模块数据
通过前置依赖列表导入外部模块数据
// scripts/main.js // 定义一个模块，并导入 ./Cart 模块 define([‘./Cart‘], function(Cart) { let cart = new Cart() cart.add({name: ‘iphoneXX‘, price: 1000000}) })
导出模块内部数据
// scripts/Cart.js define([‘require‘, ‘exports‘, ‘module‘], function(require, exports, module) { class Cart { add(item) { console.log(`添加商品：${item}`) } } exports.Cart = Cart; }) // 忽略不需要的依赖导入 define([‘exports‘], function(exports) { class Cart { add(item) { console.log(`添加商品：${item}`) } } exports.Cart = Cart; }) // 如果是依赖的导入为：require, exports, module，也可以省略依赖导入声明 define(function(require, exports, module) { class Cart { add(item) { console.log(`添加商品：${item}`) } } exports.Cart = Cart; })
导入外部模块数据
// scripts/main.js define([‘./Cart‘], function(Cart) { let cart = new Cart() cart.add({name: ‘iphoneXX‘, price: 1000000}) })
模块化 —— CommonJS、AMD、UMD、ESM（上）
标签：iphonex ref 通过 init 模块化 color sync code plain
原文地址：https://www.cnblogs.com/jfen625/p/12571675.html
