js模块化规范

---

title: js模块化
date: 2019-01-30 17:49:22
tags: js

---

1.无模块化

<script src="jquery.js"></script>
<script src="jquery_scroller.js"></script>

缺点：1.污染全局作用域 2.依赖关系不明显

2. commonJS规范

最初应用于服务端
前端webpack也对CommonJS原生支持

每一个文件就是一个模块，内部定义的变量属于这个模块，不会对外暴露，不会污染全局。

核心思想：通过require同步加载所要依赖的其他模块，通过exports 或者module.exports 来导出需要暴露的接口

module代表这个模块，exports代表要暴露的接口，默认顶部有一句代码 exports = module.exports

所以不能直接给exports赋值， 如 number/function等

// a.js
var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

// 引用
var a = require('./a.js');
console.log(a.x); // 5
console.log(a.addX(1)); // 6

优点：commonJS率先在服务端完成模块化，解决了依赖全局变量污染的问题
缺点：由于commonJS是同步加载模块，在浏览器端不适用。

3. AMD规范

AMD规范则是非同步加载模块，允许指定回调函数.AMD规范的实现：require.js
AMD标准定义了两个API

1.require([module],callback)
2.define(id,[depends],callback)

即通过define定义模块，require加载模块。且require支持commonJS的模块导出方式、

定义alert模块：

define(function () {
    var alertName = function (str) {
      alert("I am " + str);
    }
    var alertAge = function (num) {
      alert("I am " + num + " years old");
    }
    return {
      alertName: alertName,
      alertAge: alertAge
    };
});

引入模块

require(['alert'], function (alert) {
  alert.alertName('JohnZhu');
  alert.alertAge(21);
});

在使用requireJS时候，必须提前加载所有的依赖，然后才能使用

优点:适合在浏览器端异步加载模块，可以并行加载多个模块
缺点：提高了开发成本，并且不能按需加载，必须提前加载完所有依赖

4.CMD规范

CMD规范是阿里的玉伯提出来的，实现js库为sea.js。 它和requirejs非常类似，即一个js文件就是一个模块，但是CMD的加载方式更加优秀，是通过按需加载的方式，而不是必须在模块开始就加载所有的依赖。如下：

define(function(require, exports, module) {
  var $ = require('jquery');
  var Spinning = require('./spinning');
  exports.doSomething = ...
  module.exports = ...
})

优点： 浏览器端模块加载，按需加载，依赖就近
缺点： 依赖SPM打包，模块的加载逻辑偏重

AMD和CMD区别：
前者对依赖提前执行，后者延迟执行。
前者推崇依赖前置，后者推崇依赖就近，即在需要时候某个模块在require

// AMD
define(['./a', './b'], function(a, b) {  // 依赖必须一开始就写好  
   a.doSomething()    
   // 此处略去 100 行    
   b.doSomething()    
   ...
});
// CMD
define(function(require, exports, module) {
   var a = require('./a')   
   a.doSomething()   
   // 此处略去 100 行   
   var b = require('./b') 
   // 依赖可以就近书写   
   b.doSomething()
   // ... 
});

5.ES6模块化

之前的模块化都是社区自己实现的，只是得到大家的认可和广泛使用，而ES6是官方推出的真正规范的模块化方案。
使用import引入模块，通过export导出模块。
目前ES6在浏览器支持性不高，通过babel将import编译为require

import store from '../store/index'
import {mapState, mapMutations, mapActions} from 'vuex'
import axios from '../assets/js/request'
import util from '../utils/js/util.js'

export default {
  created () {
  this.getClassify(); 
  this.RESET_VALUE();
  console.log('created' ,new Date().getTime());
}