本文的目的是为了能大让家更好的认识 Mod,之所以引入 RequireJS/SeaJS 的对比主要是应大家要求更清晰的对比应用场景,并不是为了比较出孰胜孰劣,RequireJS 和 SeaJS 都是模块化漫漫之路的先驱者,向他们致敬!

为工程化为生的Mod

模块化是一种处理复杂系统分解成为更好的可管理模块的方式,它可以把系统代码划分为一系列职责单一,高度解耦且可替换的模块,采用模块化可以让系统的可维护性更加简单易得。

JavaScript 并没有为开发者们提供以一种简洁、有条理地的方式来管理模块的方法。从出发点来看,Mod和 RequireJS/SeaJS 是一致的,为开发者提供一套 JavaScript 模块化开发方案,让 JavaScript 的模块化开发变得更简单自然。但是在实现的过程中却存在巨大着的差异。

Mod严格上来讲并不是一个独立的模块化框架,它是被设计用做前端工程化模块化方案的 JavaScript 支持,需要和自动化工具、后端框架配合来使用,目的在于希望给工程师提供一个类似 nodeJS 一样的开发体验,同时具备很好的线上性能。

RequireJS 和 SeaJS 的定位主要是 Web 浏览器端的模块加载器,依靠 JavaScript 运行时来支持模块定义、依赖分析和加载等功能。

类 CommonJS 的开发体验

RequireJS 遵守的是 AMD 规范,SeaJS 遵守的是 CMD 的规范。AMD/CMD 规范使用的是“异步模块定义”的方式,这种方式给开发带来了极大的不便,所有的同步代码都需要修改为异步的方式,我们是否可以在前端开发中使用“ CommonJS ”的方式,开发者可以使用自然、容易理解的模块定义和调用方式,不需要关注模块是否异步,不需要改变开发者的开发行为。答案当然是肯定的,Mod并不完全遵守 AMD/CMD 规范,也正是为了为开发者提供更简单自然的开发体验。

模块定义

Mod 使用 define 来定义一个模块:

  1. define (id, factory)

factory 提供了 3 个参数:require, exports, module ,用于模块的引用和导出。

在平常开发中,我们无需关注模块定义,工具会自动对 JS 进行 define 包装处理:

JS 源码

  1. //common/widget/menu/menu.js
  2. var $ = require('common:widget/jquery/jquery.js');
  3. exports.init = function() {
  4. $('.menu-ui ul li a').click(function(event) {
  5. var self = this;
  6. $('.menu-ui ul li a.active').removeClass('active');
  7. $(self).addClass('active');
  8. event.preventDefault();
  9. });
  10. };

编译后代码

  1. define('common:widget/menu/menu.js', function(require, exports, module){
  2. var $ = require('common:widget/jquery/jquery.js');
  3. exports.init = function() {
  4. $('.menu-ui ul li a').click(function(event) {
  5. var self = this;
  6. $('.menu-ui ul li a.active').removeClass('active');
  7. $(self).addClass('active');
  8. event.preventDefault();
  9. });
  10. };
  11. });

模块调用

Mod会在模块初始化之前自动加载相关依赖。因此当我们需要一个模块时,只需提供一个模块名即可获取:

  1. require (id)

因为所需的模块都已预先加载,因此 require 可以立即(同步)返回该模块引用。无论在页面的 script 还是模块内部,工程师都可以放心通过 require 来加载模块,不需要考虑何时该使用同步接口何时调用异步接口。

避免模块化引来的性能问题

RequireJS/SeaJS 通过过 JavaScript 运行时来支持“匿名闭包”、“依赖分析”和“模块加载”等功能,“依赖分析”需要在 JavaScript 运行时通过正则匹配到模块的依赖关系,然后顺着依赖链(也就是顺着模块声明的依赖层层进入,直到没有依赖为止)把所有需要加载的模块按顺序一一加载完毕, 当模块很多、依赖关系复杂的情况下会严重影响页面性能。Mod通过以下设计避免了如上问题:

  • 通过工具自动添加 define 闭包,线上不需要支持匿名闭包
  • 通过工具自动处理依赖,线上不需要动态处理依赖
  • 通过后端模板自动插入 script,线上不需要通过前端框架进行模块加载

通过以上设计,Mod极其精简,整个文件只有 100 多行,相比下 RequireJS 有 2000 多行,SeaJS 有将近 1000 行。

避免模块化为打包部署带来的极大不便

通过 RequireJS/SeaJS 进行模块化开发后,合并静态资源(打包)将变得十分不方便和晦涩难懂,每个文件里只能有一个模块,无论是“ combo 插件”还是“ flush 插件”,都需要我们修改模块化调用的代码,这无疑是雪上加霜,工程师不仅需要在开发的时候关注模块定义,在调用的时候还需要关注在一个请求里面加载哪些模 块比较合适,模块化的初衷是为了提高开发效率、降低维护成本,但我们发现这样的模块化方案实际上并没有降低维护成本,某种程度上来说使得整个项目更加复杂 了。而使用 Mod,工程师只需要在配置文件配置合并策略即可,并不需要关注其他细节,Mod会自动处理好依赖以及合并信息并在模块初始化之前将模块的静态资源以及所依赖的模块加载并准备好。

自适应的性能优化

整个Mod模块化流程如下:

通过自动化工具对模块进行编译处理,包括对对 JavaScript 模块添加闭包、记录每个静态资源的部署路径以及依赖关系并生成资源表(resource map),如下所示,

  1. {
  2. "res": {
  3. "demo.js": {
  4. "uri": "/static/js/demo_33c5143.js",
  5. "type": "js",
  6. "deps": [
  7. "demo.css"
  8. ],
  9. "pkg": "p0"
  10. },
  11. "index.html": {
  12. "uri": "/index.html",
  13. "type": "html",
  14. "deps": [
  15. "demo.js",
  16. "demo.css"
  17. ]
  18. },
  19. "script.js": {
  20. "uri": "/static/js/script_32300bf.js",
  21. "type": "js",
  22. "pkg": "p0"
  23. }
  24. },
  25. "pkg": {
  26. "p0": {
  27. "uri": "/static/pkg/aio_5bb04ef.js",
  28. "type": "js",
  29. "has": [
  30. "demo.js",
  31. "script.js"
  32. ],
  33. "deps": [
  34. "demo.css"
  35. ]
  36. }
  37. }
  38. }

所有被打包的资源会有一个 pkg 属性 指向该表中的资源,而这个资源,正是我们配置的打包策略。有了这些信息,我们可以通过 Mod 框架(Mod 和后端框架)来管理和控制模块的加载。Mod的模块化可以十分灵活的适应各种性能优化场景,我们还可以通过监控模块的调用情况,自动生成最优的打包配置,让网站可以自适应优化。

总结

Mod提供的是一体化的模块化解决方案,更多的是从工程化、自动化的角度去考虑,RequireJS/SeaJS 更独立灵活。

参考:http://fex.baidu.com/blog/2014/04/fis-modjs-requirejs-seajs/?utm_source=tuicool&utm_medium=referral

http://www.tuicool.com/articles/yuY36n

Mod 与 RequireJS/SeaJS 的那些事的更多相关文章

  1. RequireJS 和 SeaJS

    RequireJS SeaJS CMD规范 CommonJS的规范: 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的 ...

  2. 使用RequireJS并实现一个自己的模块加载器 (一)

    RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺 ...

  3. requireJs,AMD,CMD

    知识点1:AMD/CMD/CommonJs是JS模块化开发的标准,目前对应的实现是RequireJs/SeaJs/nodeJs.   知识点2:CommonJs主要针对服务端,AMD/CMD主要针对浏 ...

  4. JavaScript AMD 模块加载器原理与实现

    关于前端模块化,玉伯在其博文 前端模块化开发的价值 中有论述,有兴趣的同学可以去阅读一下. 1. 模块加载器 模块加载器目前比较流行的有 Requirejs 和 Seajs.前者遵循 AMD规范,后者 ...

  5. Node.js这么下去...

    Node.js是基于javascript的.event驱动的单进程服务器(也能实现cluster模式,只要一个fork()语句,类似于C语言的进程创建). 所以大胆估计:Node.js会把很多大网站吞 ...

  6. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  7. 网页插件学javascript还是jquery好啊?

    文章的起因,也是在群内交流是回答一个小伙的问题,一扯就停不下来,但由于个人知识面覆盖有限,自身基础又不够扎实,仅供参考: 问这个问题之前,我个人建议先搞清什么是jquery,什么是js?     jq ...

  8. grunt 入门学习

    前端工作流,Grunt上手指南 Posted@2013-04-20 7:15 a.m. CategoriesGrunt ,  javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Lo ...

  9. JavaScript内存优化

    JavaScript内存优化 相对C/C++ 而言,我们所用的JavaScript 在内存这一方面的处理已经让我们在开发中更注重业务逻辑的编写.但是随着业务的不断复杂化,单页面应用.移动HTML5 应 ...

随机推荐

  1. Amazon 开始接受 Windows 礼品卡预订

    在 8 月微软虚拟货币系统 Microsoft Points 已经正式被真实货币替代,但目前,配套真实货币系统将推出的礼品卡还并没有开始销售.Amazon 上的一则预订显示“Windows 礼品卡”( ...

  2. java中的容器问题

    小小的总结一下java中的容器问题. 一.三个知识点 1.迭代器 1).java.util.Interator + hasnext(); next(); remove(); 2).java.lang. ...

  3. 机房收费系统之uml图——初版

    说起uml图,在我心中最难的当属类图无疑.虽然敲了三层的小例子,但真正让把三层和uml图结合起来,并且还要考虑设计模式的时候,总是让人有一种无从下手的感觉,不过还好,通过这半个多月的思考与探索(竟然用 ...

  4. Apache 日志分析(一)

    日志格式: 101.38.166.177 – – [10/Jun/2016:14:19:19 +0800] “POST /wp-admin/admin-ajax.php HTTP/1.1” 200 1 ...

  5. UML类图中的六大关系:泛化、实现、依赖、关联、聚合、组合关系

    UML定义的关系主要有:泛化.实现.依赖.关联.聚合.组合,这六种关系紧密程度依次加强,分别看一下 1.泛化 概念:泛化是一种一般与特殊.一般与具体之间关系的描述,具体描述建立在一般描述的基础之上,并 ...

  6. ShowModal在FireMonkey移动应用程序对话框

    This is the only code that changes between the first and second code snippets: dlg.ShowModal(procedu ...

  7. hdu-5597 GTW likes function(欧拉函数+找规律)

    题目链接: GTW likes function Time Limit: 4000/2000 MS (Java/Others)     Memory Limit: 131072/131072 K (J ...

  8. Matlab的GUI参数传递方式总结

    MATLAB GUI传递方式 1.全局变量: 2.作为函数的参数传递: 3.利用控件的userdata数据: 4.为handles结构体添加新字段: 5.setappdata函数为句柄添加数据: 6. ...

  9. 转: 视频相关的协议族介绍(rtsp, hls, rtmp)

    转自: http://www.zhihu.com/question/20621558   作者:杨华链接:http://www.zhihu.com/question/20621558/answer/1 ...

  10. 使用secureCRT连接VMware-Ubuntukylin虚拟机

    使用SecureCRT连接VMware时总是提醒主机拒绝连接.这时可以使用sudo apt-get install openssh-server openssh-client,在主机上安装ssh. 安 ...