js开发者对js模块加载的尝试和创新从来都没有停止过,尤其是当nodejs的出现后,模块化加载的必要性更加凸显。本文不讨论如何在nodejs环境来模块化加载(创造者已经利用commonJS机制解决),只讨论在浏览器环境下如何来模块加载的思路,并提出一些我的看法。

浏览器环境与nodejs的环境的最大差异是,对于nodejs的环境,大多数情况下被依赖的模块文件本身就在本地(它们都在服务器上),同步取过来就能用;而对于浏览器的环境,被依赖的模块文件通常还在远程服务器上,并未加载到本地,也就是说必须是先加载(并解析)后执行的机制。

既然已经有了commonJS,在这之上将异步回调的逻辑加入进去,可是异步先加载什么呢?于是就有了依赖的概念。一段时间的发展后,有了AMD、和CMD的解决方案,代表作品是requirejs和seajs,有兴趣的读者可以去了解一下,这里就不展开介绍了。
有必要简单提一下两者的主要区别,CMD推崇依赖就近,可以把依赖写进你的代码中的任意一行,例:

1
2
3
4
5
6
define(function(require, exports, module) {
  var a = require('./a')
  a.doSomething()
  var b = require('./b')
  b.doSomething()
})

代码在运行时,首先是不知道依赖的,需要遍历所有的require关键字,找出后面的依赖。具体做法是将function toString后,用正则匹配出require关键字后面的依赖。显然,这是一种牺牲性能来换取更多开发便利的方法。

而AMD是依赖前置的,换句话说,在解析和执行当前模块之前,模块作者必须指明当前模块所依赖的模块,表现在require函数的调用结构上为:

1
2
3
4
define(['./a','./b'],function(a,b){
   a.doSomething()
   b.doSomething()
})

代码在一旦运行到此处,能立即知晓依赖。而无需遍历整个函数体找到它的依赖,因此性能有所提升,缺点就是开发者必须显式得指明依赖——这会使得开发工作量变大,比如:当你写到函数体内部几百上千行的时候,忽然发现需要增加一个依赖,你不得不回到函数顶端来将这个依赖添加进数组。

细心的读者可能发现,到目前位置我讨论的AMD和CMD的思想的关于依赖的部分,都只讨论的“硬依赖”,也就是执行前肯定需要的依赖,但是这不是全部的情况。有的时候情况是这样的:

1
2
3
4
// 函数体内:
if(status){
  a.doSomething()
}

在这个函数体内,可能依赖a,也可能不依赖a,我把这种可能的依赖成为“软依赖”。对于软依赖当然可以直接当硬依赖处理,但是这样不经济,因为依赖是不一定的,有可能加载了此处的依赖而实际上没有用上。
对于软依赖的处理,我推荐依赖前置+回调函数的实现形式。上面的例子简单表述如下:

1
2
3
4
5
6
// 函数体内:
if(status){
  async(['a'],function(a){
    a.doSomething()
  })
}

至此可以对由commonJS衍生出来的方案做出总结了。在浏览器端来设计模块加载机制,需要考虑依赖的问题。
我们先把依赖分为两种,“强依赖” —— 肯定需要 和“弱依赖” —— 可能需要。
对于强依赖,如果要性能优先,则考虑参照依赖前置的思想设计你的模块加载器,我个人也更推崇这个方案一些;如果考虑开发成本优先,则考虑按照依赖就近的思想设计你的模块加载器。
对于弱依赖,只需要将弱依赖的部分改写到回调函数内即可。
如果现在我要实现一个模块加载器,我会将强依赖前置,弱依赖采用异步回调函数的形式,其它的方法我认为都只是语法糖而已,仅此就够了。

最新文章

  1. Flex 布局教程:实例篇
  2. 在usercontrol里实现导航
  3. Angular JS中双击事件ng-dblclick避免同时触发两次单击事件ng-click的解决方案
  4. Hill密码
  5. Oracle迁移MySQL笔记
  6. Android开发-API指南-<uses-feature>
  7. poj 3267 The Cow Lexicon(dp)
  8. 修改Latex常用编辑器WinEdt中的字号与字体 [转]
  9. web前端代码规范——css代码规范
  10. Banner 切换
  11. oracle 11gR2 在VM中安装步骤
  12. 解决C# WinForm 中 VSHOST.EXE 程序不关闭的问题
  13. 【记录一次windows技术学习】使用笔记本DOS命令搭建WLAN热点
  14. Android webView包装WebAPP
  15. Apache的域名配置
  16. Vue-cli3.0开发笔记
  17. MATLAB——神经网络sim仿真函数
  18. Python - __name__ == '__main__'
  19. linux网络设备—PHY
  20. 用 SQLite 和 FMDB 替代 Core Data

热门文章

  1. Gradle 是什么
  2. vue-cli报错:Class constructor FileManager cannot be invoked without 'new'
  3. 【在 Nervos CKB 上做开发】Nervos CKB 脚本编程简介[1]:验证模型
  4. Linux CentOS7 下设置tomcat 开机自启动
  5. HDU 1848 Fibonacci again and again SG函数做博弈
  6. Luogu-P2512 [HAOI2008]糖果传递 贪心
  7. POJ2723 Get Luffy Out解题报告tarjan+2-SAT+二分
  8. 什么是Werkzeug
  9. 从SpringBoot构建十万博文聊聊Tomcat集群监控
  10. 不要小看小小的 emoji 表情