JavaScript模块化
in Javascript with 0 comment

JavaScript模块化

in Javascript with 0 comment

CommonJS规范

服务器端规范,Node.js推广使用。该规范的核心是:允许模块使用require方法来同步加载所依赖的其他模块,然后通过exports或module.exports导出需要暴露的接口。

 // module.js
 exports.add = (a, b) => a+b

 module.exports = {
   add: (a, b) => a + b
 }
  1. require命令第一次加载模块时,执行整个脚本,在内存中生成对象
  2. 多次执行require命令再次加载该模块时,不会再执行该脚本,直接从缓存中取值
  3. CommonJS加载模块是同步加载模块

ADM规范

AMD(Asynchronous Module Definition)异步模块定义,客户端规范。采用异步方式加载模块,模块加载不影响它后面语句的代执行。AMD是require.js在推广使用过程中对模块定义规范化的产物。在使用时,需引入require.js。

 /**
 + @param id 模块名称,如果为空,模块的名字默认为模块加载器请求的指定脚本名
 + @param dependencies 模块依赖
 + @param factory 工场函数,模块初始化执行的函数或对象
  */
 define(id? dependencies? factory)
 require([module], callback)

CMD规范

CMD(Common Module Definition)通用模块定义,异步加载模块。CMD是sea.js在推广过程中对模块定义的规范化产物。在使用时,需引入sea.js。

 define(function (require, exports, module) {
     let a = require('a')
     let b = require('b')
     exports.eat = a.eat
     exports.run = b.run
 })
seajs.use(id, callback?)

UMD规范

UMD(Universal Module Definition)通用模块定义,为了兼容AMD、CMD和无模块化开发规范.

/**
 + UMD-Universal Module Definition 通用模块定义
 + */
 (function (root, factory) {
     // 判断是否是AMD/CMD
     if (typeof define === 'function') {
         define([], factory)
     } else if (typeof exports === 'object') {
         // Node CommonJS规范
         module.exports = factory()
     } else {
         // 浏览器环境
         root.someAttr = factory
     }
 })(this, function () {
     let add = function (a, b) {
         return a + b
     }
     return {
         add,
         module: 'UMD'
     }
 })

ES6模块

ES6通过imort和export实现模块的输入与输出,import命令用于输入其他模块提供的功能,export命令用于规定模块对外的接口。

 // test.js
 export let module = 'ES6 Module'
 export let hello = function () {}
 let demo = function () {}
 // 默认导出
 export default demo
 // 导入默认模块
 import demo from './test.js'

 // 导入指定模块
 import { hello, module } from './test'

 // 导入指定模块,并重命名
 import { hello as hi, module } from './test.js'

 // 导入全部模块,并重命名
 import * as test from './test.js'
Responses