amd cmd commonjs 模块规范 和 es6 的 module 语法

Posted 2020-10-16

• js的模块化

  在前端开发的原始时期，只要在script标签中嵌入js代码就能实现一些基本的交互效果，但是随着时代的进步。js扮演的角色变得重要起来，js应用的场景页越来越复杂，。然而，js都没有类的概念，更不用说模块了。

  为什么要有模块化

  1. 当一个项目变得复杂的时候，会出现问题，比如：
     命名冲突：开发中重复命名，导致命名冲突。
     文件依赖：项目开发中，依赖的js文件，引入遗漏，引入顺序错误。

  2. 使用模块化开发可以避免类似情况，而且利于项目的维护：
     提升开发效率：代码方便重用，能直接引入，避免重复开发。
     方便后期维护：维护起来文件依赖和结构清晰

• AMD
  AMD 英文Asynchronous Module Definition，中文“异步模块定义”。它是一个在浏览器端模块化开发的规范。AMD规范的主要实现是RequireJs

---

define(id?, dependencies?, factory)
id：指定义中模块的名字（可选）。如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数，模块名必须是“顶级”的和绝对的（不允许相对名字）。
dependencies：当前模块依赖的，已被模块定义的模块标识的数组字面量（可选）。
factory：一个需要进行实例化的函数或者一个对象。   

---

   define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
       exports.verb = function() {
           return beta.verb();
           //Or:
           return require("beta").verb();
       }
   });

• CMD 
  CMD 英文 Common Module Definition。CMD 依赖就近。CMD规范的主要实现是SeaJs

    define(function(require, exports, module){ 模块代码 });
    

• commonjs
  CommonJS是服务器端模块的规范，Nodejs使用该规范。
  CommonJS定义，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象属性。
  通过 require 来加载模块。
  commonJs通过 exports 和 modul.exports 来暴露模块中的内容。

• es6的module 语法 
  一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。
  export 命令用于规定模块的对外接口。
  import 命令用于输入其他模块提供的功能。

  // profile.js
  export var firstName = ‘Michael‘;
  export var lastName = ‘Jackson‘;
  export var year = 1958;
  // main.js
  import {firstName, lastName, year} from ‘./profile‘;
  
  function setName(element) {
    element.textContent = firstName + ‘ ‘ + lastName;
  }