模块化 - 简书

主要解决

避免全局污染，解决命名冲突

JS设计初衷

JS诞生的时候，仅仅是为了实现网页表单的本地校验和简单的DOM操作，并没有模块化的规范设计

随着前端越来越丰富，一些问题随之而来，于是模块化才渐渐的趋于规范化

原始JS命名冲突

张三写了一个脚本tab.js，李四写了一个脚本index.js，如果命名有冲突，就会相互覆盖

// 张三
var name = "产品";
// 李四
var name = "首页";

前缀是之前变量冲突很好的解决方案，但是缺点一是命名不规范，缺点二是有些人的名称简写相同

// 张三
var zs_name = "产品";
// 李四
var ls_name = "首页";

这时候，模块化的思想就渐渐开始形成，比如模块化演变一：命名空间

var tab = {
    name:"产品"
}
var index = {
    name:"首页"
}

模块化演变二：局部作用域

function tab () {
    var name = "产品";
}
function index () {
    var name = "首页";
}

模块化演变三：自执行函数（已很好的隔离作用域，很多非标准模块化的插件，脚本都是以这种形式书写）

;(function () {
    var name = "产品";
})();

;(function () {
    var name = "首页";
})();

最终演变

模块化演变到现在出现了AMD，CMD，CommonJS（node方案）等模块化标准，然后前端模块化进入大爆发时代，未来的趋势肯定是ES6的标准方案会逐渐统一，但是AMD，CMD、CommonJS和ES6的的标准方案相差不大

AMD标准

中文API地址https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)

模块化逐步演变的过程中，AMD规范一直站前端主导地位，出现了很多实现AMD规范的插件，现在以requireJS（https://requirejs.org/）为例

requireJS出了个rJS专门针对nodeJS的模块化标准，但是一般不会使用

hello

在html页面中引入

<!-- src是为了引入脚本，data-main设置入口文件 -->
<script src="./lib/require2.3.6.min.js" data-main="lib/main"></script>

lib/main.js

require(["moduleA", "moduleB"], function (moduleA, moduleB) {
    console.log(moduleA);
    console.log(moduleB);
})

lib/moduleA.js

define(() => ({
    name: "产品"
}));

lib/moduleB.js

define(() => ({
    name: "首页"
}));

源码解析（非完全）

执行require函数时，得到模块的相对路径，生成script脚本，比如：<script async src="加载的模块地址"></script>，并添加到head标签中，添加侦听脚本加载完成事件

// 源码截取
req.createNode = function (config, moduleName, url) {
    var node = config.xhtml ?
        document.createElementNS('http://www.w3.org/1999/xhtml', 'html:script') :
        document.createElement('script');
    node.type = config.scriptType || 'text/javascript';
    node.charset = 'utf-8';
    node.async = true;
    return node;
};

运行动态添加的脚本语言，执行模块的define函数，参数push到全局队列

// 源码截取
define = function (name, deps, callback) {
    // 很多省略代码
    if (context) {
        context.defQueue.push([name, deps, callback]);
        context.defQueueMap[name] = true;
    } else {
        globalDefQueue.push([name, deps, callback]);
    }
};

执行require的回调函数，取出队列作为参数

define函数的参数

语法： $\color{red}{define(name?:string, dependencies?:string [], callback)}$

name：模块名称，如果没有命名则为引入脚本的名字。如果写了name，模块名必须是顶级的和绝对的（不允许用相对名字）

dependencies：依赖项

callback：回调函数，返回模块内容

define有amd属性，它的值是一个对象，这是为了规范编程规则，可以防止与现有定义了define函数但不遵从AMD编程接口的代码相冲突

define.amd = {
    jQuery: true
};

怎么判断一个库支不支持Amd标准，判断define是全局函数，且define有amd属性，比如jquery

if (typeof define === "function" && define.amd) {
    define("jquery", [], function () {
        return jQuery;
    });
}

define可以引入依赖模块，依赖模块的地址可以用require.config进行路径映射（见下）

define(['jquery'], function ($) {
    'use strict';
    $.get("/user/info", (res) => {
        console.log(res);
    })
});

define的标准写法是使用exports一个对象作为返回对象，如果没有exports，会以函数的返回值作为返回对象

define("moduleA", ["exports"], (exports) => {
    exports.moduleA = { name: "产品" }
})

使用exports导出的对象的格式变为{ moduleA: {name: "产品"} }，而不是{name: "产品"},如果想实现return效果可以使用解构

require(["moduleA", "moduleB"], function ({ moduleA }, moduleB) {
    console.log(moduleA);
    console.log(moduleB);
})

defined还有一种写法，引入require模块后，使用require引入其他模块。依赖模块非常多时，这种写法比较简洁

define("moduleA", ["require", "jquery"], (require) => {
    let $ = require("jquery");
    console.log($.fn);
    return { name: "产品" };
})

require函数

require可以有一个config属性，可以配置模块路径

require.config({
    paths: {
        jquery: "../lib/jquery.js"
    }
});

CMD标准

sea.js（国产）在推广过程中，逐渐形成了CMD规范，跟AMD比较类似，并且兼容CommonJS的模块写法，但是目前已不再维护

CMD推崇的是就近依赖，AMD则默认约束模块一开始就声明相关依赖，其他定义方式及模块相关变量都很相似

CMD写法

define((require, exports, module) => {
    // 模块代码
})

CommonJS标准

这是nodeJS的模块化标准，致力于前后端统一的模块化标准，差点统一模块化天下

模块写法

module.exports = {
    name: "首页"
}

在CommonJS规范中，module.exports和exports相等，所以module.exports可以简写为exports

exports = {
    name: "首页"
}

模块引入，不加后缀表示js文件（注意，CMD和AMD如果和入口文件在同一目录下，可以省略./，但是CommonJS不行）

let moduleA = require("./moduleA");

console.log(moduleA);

模块引入可解构

let { name } = require("./moduleA");

console.log(name);

可引入内置文件（Node自带功能）

const path = require("path");

引入node_modules文件夹的内容，也可以直接写名称，比如：cnpm i jquery，则引入时，可以用以下方式

 const jquery = require("jquery");

ES6模块化标准

未来模块化的一统标准

定义模块

模块写法一

export var a = 10;
export var f = function () {
    console.log(1);
}

模块写法二

var a = 10;
var f = function () {
    console.log(1);
}

export { a, f }

模块写法三（export default一个页面只有有一个，export可以有多个，可共存）

export default {
    name: "首页"
}

模块写法可以使用别名

function v1() { }
function v2() { }

export {
    v1 as streamV1,
    v2 as streamV2
}

引入模块

假如有如下定义模块

let name = "首页";
let version = "2.0.7";

export {
    name, version
}

export default {
    name, version
}

引入处理

使用export导出的模块，必须用import并用{ }来接收

export default导出，比如用一个对象接收，且不支持解构

import { name, version } from "./moduleA"
import info from "./moduleA"

默认export导出的内容无法用对象接收，export default导出的内容无法解构，如果希望export导出的内容也能用对象接收，可以用关键字as申明别名

// 声明
let name = "首页";
let version = "2.0.7";

export {
    name, version
}

// 接收
import * as info from "./moduleA"