前端模块化CommonJs、AMD(require.js)、CMD(sea.js)、ES6 Module的浅析

浅浅的花香味﹌ 2021-12-24 05:13 111阅读 0赞

*  CommonJS
 *  AMD(require.js)
 *  CMD(sea.js)
 *  ES6 Module

## CommonJS ##

通过`require`加载模块并执行，返回一个引用文件的`export`对象.

`var test = require('./test');`

该方式属于同步加载，适用于服务器端。浏览器更适合异步加载方式。

## AMD(require.js) ##

推崇的是依赖前置，提前执行。（一些该页面不需要的模块也加载了进来)

// 配置路径
    require.config({
        baseUrl: "js/lib",
        paths: {
            "jquery": "jquery.min",
            "underscore": "underscore.min"
        }
    });
    
    // 模块加载
    require(["jquery", "underscore"], function($, _) {
        $(body).css("background", "#6fc");
        var result = _.map([1, 2, 3], function() {
            return num * 3;
        });
    })
    
    // 自定义模块,第一个参数为可选，表示模块依赖的模块
    define(["underscore"], function(_) {
        var minNumIndex = function(arr) {
            return arr.indexOf(_.min(arr))
        };
        return {
            minNumIndex: minNumIndex 
        };
    })

## CMD(sea.js) ##

推崇依赖就近，延迟执行。（也就是按需加载）

// 定义模块 math.js
    define(function(require, exports, module) {
        var $ = require("jquery.js");
        var add = function(a, b) {
            return a + b;
        };
        export.add = add;
    });
    
    // 加载模块
    seajs.use(["math.js"], function(math) {
        var sum = math.add(1, 2)
    });

## ES6 Module ##

`export` => 导出模块  
`import` => 引入模块

// math.js
    const NUM = 1;
    const add = (a, b) => a + b;
    export {
        add
    }
    
    // 引入模块
    import add from "./math";

## CommonJS && ES6 Module ##

*  CommonJS: 值拷贝,
 *  ES6 Module: 值引用
 *  CommonJS: 运行时加载。即加载整个模块后，生成一个对象，然后从这个对象上读取相应值或方法。
 *  ES6 Module: 编译时加载。即import时指定加载某个输出值，而非整个模块。（按需加载）

转载于:https://www.cnblogs.com/miku561/p/10507991.html