js概念之模块化

[zhaobinglong]

CommonJs

2009年Nodejs发布，其中Commonjs是作为Node中模块化规范以及原生模块面世的。Node中提出的Commonjs规范具有以下特点：

• 原生Module对象，每个文件都是一个Module实例
• 文件内通过require对象引入指定模块
• 所有文件加载均是同步完成
• 通过module关键字暴露内容
• 每个模块加载一次之后就会被缓存
• 模块编译本质上是沙箱编译
• 由于使用了Node的api，只能在服务端环境上运行

基本上Commonjs发布之后，就成了Node里面标准的模块化管理工具。同时Node还推出了npm包管理工具，npm平台上的包均满足Commonjs规范，随着Node与npm的发展，Commonjs影响力也越来越大，并且促进了后面模块化工具的发展，具有里程碑意义的模块化工具

var a = require('./a');
var b = require('./b');

console.log(a.aNum, b.bStr);

参考

https://zhuanlan.zhihu.com/p/33843378 https://www.cnblogs.com/mengfangui/p/9073459.html

[zhaobinglong]

ES6新增import/export

之前的各种方法和框架，都出自于各个大公司或者社区，都是民间出台的结局方法。到了2015年，ES6规范中，终于将模块化纳入JavaScript标准，从此js模块化被官方扶正，也是未来js的标准。

导入

// 导入模块中的一个功能
import {aNum} from './a';

// 导入整个模块
import _ from 'lodash'

导出export/export default

// export和export default可以同时存在
// export可以多个，但是export default只能存在一次

// 在同一个文件中，export导出两次
// export default一次
export baseUrl = 'http://127.0.0.1'
export function fn1 () {
      //do something
}
export default function fn2 () {
      //do something
}

[zhaobinglong]

两种模块化的区别

• CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
• CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

[zhaobinglong]

AMD和CMD

• AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
• CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
• 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.
• CMD 推崇依赖就近，AMD 推崇依赖前置。
• AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一

参考

https://www.zhihu.com/question/20351507

[zhaobinglong]

导出和导入的对应

// 导出一个默认的对象
export default {
    name: '名称',
    naturalUnit: '自然单位', 
    jfUnit: '换算单位',  
    chargeUnit: '换算单位',    
    unitLocation: '单位位置'
}

// 导入上面这个对象
import para from '@/libs/index'
para.name