JS模块化

一、函数的Rest参数和扩展
二、Promise使用
三、modules.exports和ES6 import/export的使用
四、AMD、CMD、CommonJS和ES6对比
1)为什么要对JS进行模块化?

参考:https://www.imooc.com/article/20057

阶段一:无模块化

        js最初的作用仅仅是为了验证表单,后来会添加一些动画,但是这些js代码很多在一个文件中就可以完成了,所以我们只需要在HTML文件中添加一个script标签,后来随着前端复杂度提高,为了能够提高项目代码的可读性、可扩展性等,我们的js文件逐渐多了起来,不再是一个js文件就能解决的了,而是把每一个js文件当做一个模块,这时引入js文件的方式如下:

<script src="jquery.js"></script>   
<script src="jquery_scroller.js"></script>   
<script src="main.js"></script>   
<script src="other1.js"></script>   
<script src="other2.js"></script>   
<script src="other3.js"></script>

        即简单的将所有的js文件统统放在一起,但是这些文件的顺序还不能出错,比如jquery需要先引入,才能引入jquery插件,才能在其他的文件中使用jquery;
        优点:相比于使用一个js文件,这种多个js文件实现最简单的模块化的思想是进步的;
        缺点:污染全局作用域,因为每个模块都是暴露在全局的,简单的使用,会导致全局变量名冲突,当然我们也可以使用命名空间的方式来解决,对于大型项目,各种js很多,开发人员必须手动解决模块和代码库的依赖关系,后期维护成本较高,依赖关系不明显,不利于维护,比如main,js需要使用jquery,但是从上面的文件中,我们是看不出来的,如果jquer忘记了,就会报错;

阶段二:CMD规范

        CommonJS是一个js模块化的规范,该规范最初是用在服务器端的node的,前端的webpack也是对CommonJS原生支持的;根据这个规范,每一个文件就是一个模块,其内部定义的变量是属于这个模块的,不会对外暴露,也就是说不会污染全局变量;
        CommonJS的核心思想是通过require方法来同步加载所要依赖的其他模块,然后通过exports或者modules.exports来导出需要暴露的接口,如下:

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

        这里的a.js就是一个CommonJS规范的模块了,这里的module就代表了这个模块,module的exports属性就是对外暴露的接口,可以对外导出外部可以访问的变量,比如这里的x和addX;
        exports是对module.exports的引用,比如我们可以认为在一个模块的顶部有这句代码:exports = module.exports,所以我们不能直接给exports赋值,比如number、function等,然后我们就可以在其他模块中引入这个模块并使用了;

vara = require('./a.js'); 
console.log(example.x); // 5 
console.log(example.addX(1)); // 6

        这里的require就会获取到a.js所暴露的module.exports变量,然后就可以使用其暴露的x和addX了。
        优点:CommonJS规范在服务器端率先完成了JavaScript的模块化,解决了依赖、全局变量污染的问题,这也是js运行在服务器端的必要条件。
        缺点:此文主要是浏览器端js的模块化, 由于 CommonJS 是同步加载模块的,在服务器端,文件都是保存在硬盘上,所以同步加载没有问题,但是对于浏览器端,需要将文件从服务器端请求过来,那么同步加载就不适用了,所以,CommonJS是不适用于浏览器端的。

阶段三: AMD规范

        之前提到: CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。AMD规范则是非同步加载模块,允许指定回调函数。由于Node.js主要用于服务器编程,模块文件一般都已经存在于本地硬盘,所以加载起来比较快,不用考虑非同步加载的方式,所以CommonJS规范比较适用。但是,如果是浏览器环境,要从服务器端加载模块,这时就必须采用非同步模式,因此浏览器端一般采用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);
});

        但是,在使用require.js的时候,我们必须要提前加载所有的依赖,然后才可以使用,而不是需要使用时再加载。
        优点:适合在浏览器环境中异步加载模块。可以并行加载多个模块。
        缺点:提高了开发成本,并且不能按需加载,而是必须提前加载所有的依赖。

阶段四: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()
   // ... 
});
阶段五: ES6模块化

        之前的几种模块化方案都是前端社区自己实现的,只是得到了大家的认可和广泛使用,而ES6的模块化方案是真正的规范。 在ES6中,我们可以使用 import 关键字引入模块,通过 export 关键字导出模块,功能较之于前几个方案更为强大,也是我们所推崇的,但是由于ES6目前无法在浏览器中执行,所以,我们只能通过babel将不被支持的import编译为当前受到广泛支持的 require。
        虽然目前import和require的区别不大,但是还是推荐使用使用es6,因为未来es6必定是主流,对于代码的迁移成本还是非常容易的。 如:

  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());
    }
总结

       1)AMD是RequireJs在推广过程中对模块定义的规范化产出,依赖前置;
       2)CMD是SeaJs在推广过程中对模块化定义的规范化产出,依赖就近,淘宝团队;
       3)CommonJs规范,modules.exports,前端浏览器不支持CommonJs规范,Node端使用;
       4)ES6特性,export/import;
       5)2009年,ES5出现,例如foreach,Object.keys,Object.create和JSON标准;

参考文档:http://yijiebuyi.com/blog/7c8ffb3a58657e01e80f3bdc747473d2.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,324评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,356评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,328评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,147评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,160评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,115评论 1 296
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,025评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,867评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,307评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,528评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,688评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,409评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,001评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,657评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,811评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,685评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,573评论 2 353

推荐阅读更多精彩内容

  • 什么是模块化? 简单理解:将各个功能封装为独立的模块,当需要某个功能时,只需要加载相应的模块即可 为什么出现模块化...
    放风筝的小小马阅读 848评论 0 6
  • 模块 函数式 模块是实现特定功能的文件,将多个函数编写在同一个文件中就构成了一个模块,加载文件即可调用文件中的函数...
    JunChow520阅读 457评论 0 1
  • 历史上JavaScript一直没有模块体系,在其他高级语言中,Java有类文件,Python有import机制,R...
    还是那个西瓜阅读 264评论 0 1
  • requirejs是一个JavaScript文件和模块加载器。requireJS允许你把你的javascript代...
    GQ1994阅读 2,204评论 0 58
  • 真冷啊… 窗子连窗纸都没有,冷风一阵阵灌进来,身上的破毡毯怎么也盖不全,手脚都麻了,也不知道被冻的还是被吹的。身下...
    纯棉有喜阅读 395评论 1 1