前端模块化规范

在前端开发中，在使用webpack等构建工具开发中我们经常使用import *** from ** 或者是require来引入我们需要的模块，那么下面来聊聊前端模块化几种规范。

为什么需要模块化

在早期我们写js代码通常是这样子：

var a=1;
var b=1;
function a(){
    
}
function b(){
    
}

这样子会造成命名冲突和全局污染。
同时当我们在同一个页面请求过多的js文件时会造成页面阻塞和http请求过多。

模块化规范

由于上面的种种缺点，这时候模块化显得非常重要，前期的模块化通过闭包来达到变量私有化和模块化。

var module=(function(){
    var a = 1;
    var b = function(){
        
    }
    return {
        b:b
    }
})()

但是这样子还是不能解决加载问题。 这时js模块加载器诞生了，并逐渐形成几种模块化规范。

CommonJS规范

CommonJS简介

CommonJS规范是在node的模块系统基础上提出来的，也就是CommonJS在服务器中使用，不能在浏览器环境中使用。

CommonJS规范规定，每个模块内部，module变量代表当前模块（一个js文件就是一个模块）。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

CommonJS代码书写

var a = 1;
var b = function (){
    
}
module.exports.a = a;
module.exports.b = b;

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

require方法引入

var main = require('./main')
main.a
main.b

其实这些代码在我们使用webpack配置的时候经常用到，webpack是运行在node环境中的，他使用的是CommonJS规范。

CommonJS规范特点

• 所有模块都是运行在模块作用域，不会污染全局
• 模块多次运行，只执行一次，然后缓存起来，要让模块重新执行只能清缓存
• 他是按照引入的顺序执行的，也是就是同步执行

ADM

ADM简介

上面说了CommonJS的执行是同步进行的，而且浏览器环境中没有CommonJS模块中的必要的字段，所以他不适合浏览器环境，这时候requirejs应势而生，它的诞生逐渐形成了ADM规范。

ADM规范中规定所有模块和依懒项异步加载，这样子js文件就不是一次性引入了。

ADM模块代码书写

我们说ADM规范主要使用requirejs。

//a.js
define([jquery.js],function($){
    var aa = 1
    return{
        a:aa
    }
})
//b.js
define([jquery.js],function($){
    var bb = 2;
    return {
        b:bb
    }
})

上面文件a.js和b.js通过define方法定义各自的模块。

通过require方法引入:

require([a.js,b.js],function(a,b){
    console.log(a.aa) //1
    console.log(b.bb)//2
})

ADM规范模块特点

• 按需加载，也就是说你引入模块才加载，不会在页面上一次性加载
• 异步加载，所有加载都是异步，不会阻塞页面

CDM

CDM介绍

在seajs出现后又形成了CDM规范，CDM规范和ADM类似，都是为了适应浏览器，但是CDM推崇就近依赖，ADM推崇依赖前置。

CDM模块代码书写

define(function(require,exports,module){
    var $ = require(jquery.js)
    exports.sayHello = function() {
    $('#hello').toggle('slow');
  };
})

CDM规范中模块代码书写和CommonJS相似，其实ADM规范中也可以这样子引用模块。具体可以看seajs使用文档和requirejs使用文档

CDM和ADM规范

CDM规范和ADM规范是类似的，都是异步按需引入。
但是他们执行的时机不同。

CDM是加载模块后立刻执行，也就是提前执行，

而ADM是加载模块后遇到require方法才执行模块，也就是延迟执行，可以参考这篇文章中的几个列子。

ES6模块化规范

在前面几个模块化规范发展中，逐渐形成了ES6规范，也是我们在项目中用的最多的了，也是我们最熟悉的模块化规范了，这里就不展开说了。

参考：
https://blog.csdn.net/weixin_40969472/article/details/78646003

http://www.360doc.com/content/19/0519/15/13328254_836725029.shtml

http://www.ruanyifeng.com/blog/2015/05/commonjs-in-browser.html

http://huangxuan.me/js-module-7day/#/15

https://github.com/seajs/seajs/issues/547