前端模块化规范,CommonJS,AMD,CMD,ES6 mod

2020-01-31 本文已影响0人 agamgn

前言

随着前端的发展，前端代码日益复杂庞大，此时在JS方面就会考虑使用模块化规范去管理。下面主要介绍开发中流行的几种前端模块化规范。

一、什么是模块化

1.1、什么是模块?

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信

1.2、模块化的好处

避免命名冲突(减少命名空间污染)
更好的分离, 按需加载
更高复用性
高可维护性

二、模块规范

2.1、CommonJS

2.1.1、简述

Node是CommonJS规范的主要实践者，每个文件就是一个模块，有自己的作用域，并且对其他文件都是不可见的，是私有的。

2.1.2、特点

所有代码都运行在模块作用域，不会污染全局作用域。
模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
同步的方式加载模块

2.1.3、基本变量

它有四个重要的环境变量为模块化的实现提供支持：module、exports、require、global。每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

暴露模块：module.exports=value或者exports.xxx=value。
引入模块：require(xxx)

let x=1;
let addx=function(value){
    return value+1;
}
module.exports.expx=x;
module.exports.expaddx=addx;

上面代码通过module.exports输出变量x和函数addX。

let demox=require("./demo.js");
console.log(demox.expx);//1

用require命令加载模块文件。
CommonJS模块的加载机制是，输入的是被输出的值的拷贝。也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。
当然导出方法也可以这样写

module.exports = {
    expx:x,
    expaddx:addx
}

2.2、AMD (Asynchronous Module Definition）

2.2.1、简述

AMD主要提供了异步加载的功能，不过随着打包工具和Babel在前端工程化的世界里大放异彩，其也在逐步退出历史舞台。RequireJS是其主要践行者

2.2.2、基本语法

暴露模块：

//定义没有依赖的模块
define(function(){
  return 模块
})

//定义有依赖的模块
define(['module1','module2'],function(m1,m2){
  return 模块
})

引入模块

require(['moudle1','moudle2'],function(m1,m2){
    //使用m1/m2
})

2.2.3、实例

//hello.js
define(function() {
    console.log('hello');
    return {
        getMessage: function() {
            return 'hello';
        }
    };
});

//worlld.js
define(function() {
    console.log('world');
});

//index.js
define(['./hello.js', './worlld.js'], function(hello) {
    return {
        sayHello: function() {
            console.log(hello.getMessage());
        }
    };
});
//hello
//world

2.3、CMD(Common Module Definition)

2.3.1简述

CMD规范专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行。CMD规范整合了CommonJS和AMD规范的特点。Sea.js是其实践者。

2.3.2、基本语法

暴露模块：

//定义没有依赖的模块
define(function(require, exports, module){
  exports.xxx = value
  module.exports = value
})

//定义有依赖的模块
define(function(require, exports, module){
  //引入依赖模块(同步)
  var module2 = require('./module2')
  //引入依赖模块(异步)
    require.async('./module3', function (m3) {
    })
  //暴露模块
  exports.xxx = value
})

引入使用模块：

define(function (require) {
  var m1 = require('./module1')
  var m4 = require('./module4')
  m1.show()
  m4.show()
})

2.3.3、实例

/hello.js
define(function(require, exports) {
    console.log('hello');
    exports.getMessage = function() {
        return 'hello';
    };
});

//worlld.js
define(function(require, exports) {
    console.log('worlld');
    exports.getMessage = function() {
        return 'world';
    };
});

//index.js
define(function(require) {
    var message;
    if (true) {
        message = require('./hello').getMessage();
    } else {
        message = require('./worlld').getMessage();
    }
});
//hello

AMD和CMD的区别：

对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。
解释：
(1)提前执行：参考RequireJS的异步模块加载迎合了浏览器端JS程序员固有的异步思维
(2)延迟执行：加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块
CMD 推崇依赖就近，AMD 推崇依赖前置
解释：
(1)依赖就近：可以把依赖写进你的代码中的任意一行
(2)依赖前置：解析和执行当前模块之前，模块作者必须指明当前模块所依赖的模块

2.4、ES6 module

ES6提供了import和export命令，分别对应模块的导入和导出功能。

2.4.1、实例

//demo.js
let name="agam";
var sayName=name=>console.log(name);
export {name ,sayName};

//index.js
import { name } from './demo';
sayName("aga");
console.log(name);
//aga
//agam

如上例所示，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

export default name;
export default sayName;

import names from './demo.js';

模块默认输出, 其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

ES6模块与CommonJS模块的差异：
① CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
② CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

三、模块工具介绍

3.1、Webpack

总结

CommonJS规范主要用于服务端编程，加载模块是同步的。
AMD规范在浏览器环境中异步加载模块，而且可以并行加载多个模块。不过，AMD规范开发成本高，代码的阅读和书写比较困难。
CMD规范与AMD规范很相似，都用于浏览器编程，依赖就近，延迟执行，不过，依赖SPM 打包，模块的加载逻辑偏重
ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

参考：
CommonJS，AMD，CMD区别
 理解CommonJS、AMD、CMD三种规范
 Javascript模块化编程（一）：模块的写法
代码
本节代码