js 模块化基础和模块规范AMD、CMD、ES6模块

一、模块基础 1、基于文件的模块化

把相关函数写在一个文件里

  function func1() {
    //   ...
  }

  function func2() {
    //   ...
  }

缺点：污染了全局变量，无法保证不与其他模块发生变量名冲突

2、基于对象的模块化

把所有的模块成员封装在一个对象中

  var myModule = {
    name: "Tom",

    func: function () {},
  };

优点：避免了变量污染，只要保证模块名唯一即可

缺陷：外部可以随意修改内部成员

3、基于函数的模块化

通过立即执行函数返回对象

  var myModule = (function () {
    var name = "Tom";

    function func() {}

    return {
      name: name,
      sayHello: sayHello,
    };
  })();

优点：模块外部无法修改我们没有暴露出来的变量、函数

二、JavaScript 模块规范

其中【基于函数的模块化】是模块化的基础

目前，通行的 JavaScript 模块规范主要有两种：CommonJS 和 AMD

1、Node.js 实现 CommonJS

1. 定义模块：一个文件就是一个模块，有单独的作用域
2. 模块输出：要导出的内容放入 module.exports 对象
3. 加载模块：require 返回 module.exports 对象

eg:

定义模块

// a.js

function func() {
  console.log("func");
}

module.exports = {
  func: func,
};

加载模块

// b.js

const myModule = require("./a");

myModule.func();

以上方法浏览器不直接支持

2、AMD 异步模块定义

Asynchronous Module Definition

由 require.js 支持

文档：https://requirejs.org/

实现接口：

// 定义模块
define(id?, dependencies?, factory);

id：模块的标识，默认脚本文件名
dependencies：当前模块依赖的模块名称数组
factory：模块初始化要执行的函数或对象

// 加载模块
require(dependencies, callback);

dependencies: 所依赖的模块数组
callback: 前面指定的模块都加载成功后的回调函数

eg:

1、下载

wget https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.min.js

2、helper.js 定义模块

// 模块名，模块依赖，模块的实现function
define(function () {
  return {
    func: function () {
      console.log("hello");
    },
  };
});

2、app.js 引入模块

require(["helper"], function (helper) {
  helper.func();
});

3、index.html 浏览器中使用

3、CMD 通用模块定义

Common Module Definition

由 Sea.js 支持

文档：https://seajs.github.io/seajs/docs/#intro

实现接口

// 定义模块
define(id?, deps?, factory)

一般不在define的参数中写依赖

factory = function(require, exports, module)
require 用来获取其他模块提供的接口：require(id)
exports 用来向外提供模块接口
module 存储了与当前模块相关联的一些属性和方法

eg:

1、下载

wget https://cdn.bootcdn.net/ajax/libs/seajs/3.0.3/sea.js

2、helper.js 定义模块

define(function (require, exports, module) {
  exports.func = function () {
    console.log("hello");
  };
});

3、app.js 引入模块

define(function (require, exports, module) {
  var helper = require("helper");
  helper.func();
});

4、index.html 浏览器中使用

  seajs.use("app");

4、AMD 与 CMD 区别

1. AMD 推崇依赖前置，在定义模块的时候就要声明其依赖的模块
2. CMD 推崇就近依赖，只有在用到某个模块的时候再去 require

三、ES6 模块 1、ES6 模块与 CommonJS 模块的差异 差异点CommonJSES6模块输出值拷贝值引用机制运行时加载编译时输出接口顶层 this 指向当前模块undefined

以下这些顶层变量在 ES6 模块之中都是不存在的

arguments
require
module
exports
__filename
__dirname

2、模块加载

1、传统方法

  // module code

浏览器脚本的默认语言是 JavaScript，因此 type="application/javascript"可以省略

默认情况下，浏览器是同步加载 JavaScript 脚本，执行完脚本，再继续向下渲染

2、异步加载脚本

3、ES6 加载

eg: 模块文件 demo.js

export default function () {
  console.log("demo");
}

主文件 index.html

  import Demo from "./demo.js";
  Demo();

参考

1. 前端模块化，AMD 与 CMD 的区别
2. Module 的加载实现