js模块化

commonJs

• 定义模块：module.exports, 导出属性不需要声明变量
• 定义模块：exports, exports 指向module.exports
• 加载模块：require()， 将一个文件当作一个导出对象引入进来
• 服务器端，node，运行时加载，模块对象拷贝

// common.js
module.exports.add = function(a, b) {
    return a + b
}

exports.add = function(a, b) {
    return a + b
}

// index.js
const common = require('./common.js')

common.add(10, 20)

ES Module

• 定义模块：export, export default
• 加载模块： import from
• export导出属性需要声明变量
• 浏览器端，es6，编译时输出接口，模块对象引用

// common.js
export function add(a, b) {
    return a + b
}

export default {
    add
}

// index.js
import common from './common.js'
import { add } from './common.js'

common.add(10, 20)

requireJs/AMD

• 定义模块：define(id?, deps?, factory)
• 加载模块：require([module], factory)
• 浏览器端，异步加载，依赖前置

// common.js
define('common', ['utils', 'require', 'exports'], function(utils, require, exports) {
    exports.add = function(a, b) {
        return a + b
    }

    exports.utils = function() {
        return require('./util.js')
    }
})

// index.js
require(['common'], function(common) {
    common.add(10, 20)
})

SeaJS/CMD

• 定义依赖: 无需列依赖
• require, exports, module 顺序固定
• 浏览器端，异步加载，依赖就近，

// common.js
define(function(require, exports, module) {
    exports.add = function(a, b) {
        return a + b
    }
})


// index.js
define(function(require) {
    const common = require('./common.js')
    common.add(10, 20)
})

动态加载/import()

• 返回一个promise

import('./common.js').then(common => {
    common.add(10, 29)
})

const common = await import('./common.js')
common.add(10, 20)