模块

模块

  • 需要满足的特性：独立性、完整性、可依赖、被依赖

原始模块

使用函数作为独立模块

1
2
3
4
5
6
7
// 例子
(function(mod, $) {
    function clone () {
        console.log('clone')
    }
    mod.clone = clone
})(window.clone = window.clone || {}, jQuery)

AMD

  • 异步模块加载规范，为浏览器设计
    1
    define(id?, dependencies?, factory);
    需要使用RequireJs（AMD模块加载器）加载模块
    1
    2
    3
    4
    5
    // 例子
    define(['clone'], function (clone) {
        const a = { a:1}
        const b = clone(a) // 使用
    })

CommonJs

  • 同步模块加载规范，主要用于node环境
    1
    2
    3
    define(function(require, exports, module){
        // xxx
    })
    在node环境中define自动生成，不需要开发者手写
    1
    2
    3
    function clone() {}

    module.exports = clone; // 模块导出
    1
    2
    3
    4
    const clone = require('./clone.js') // path

    const a =  { a: 1}
    const b = clone(a) // 使用

UMD

  • 通用模块加载规范，不是一个新的规范，而是对前面多种规范的整合
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    (function (root,factory) {

        var clone = factory(root)
        
        if(typeof define === 'function' && define.amd) {
            // AMD 情况
            define('clone', function() {
                return clone
            })
        }else if(typeof exports === 'object') {
            // CommonJs 情况
            module.exports = clone;
        }else {
            // 原始模块 情况
            var _clone = root.clone;

            clone.noConflict = function () { //解决全局命名冲突问题
                if(root.clone === clone) {
                    root.clone = _clone
                }
                return clone
            }
            root.clone = clone
        }

    })(this, function(root) { 
        function clone(source) {
            // xxx
        }
        return clone
    })

ES Module

1
2
3
4
// 定义并导出
export function clone(source) {
    // xxx
}
1
2
3
import {clone} from './clone.js';
const a =  { a: 1}
const b = clone(a) // 使用