【前端编码】模块化编程
摘要:
慢慢开始使用模块化编程,学着使用define,require这类的东西。一开始使用只是单纯觉得页面加载时会立刻请求加载所有文件会影响速度,后面慢慢使用发现,还能解决文件之间的相互依赖关系,解决文件上线版本问题。
再继续发现自己学的还很浅,网上看了这篇文章http://blog.chinaunix.net/uid-26672038-id-4112229.html 深入了解下。
一、为什么要使用模块化编程
1)解耦软件系统的复杂性,使维护“有理可循”
2)定义封装,遵循低耦合高内聚
3)解决文件之间依赖关系
4)解决文件加载版本缓存问题
备注:
依赖分为两种,“强依赖” —— 肯定需要 和“弱依赖” —— 可能需要。
对于强依赖,如果要性能优先,则考虑参照依赖前置的思想设计,个人更推崇,能够清晰明了文件依赖关系;如果考虑开发成本优先,则考虑按照依赖就近的思想。
对于弱依赖,只需要将弱依赖的部分改写到回调函数内即可。
二、规范
区别 | 代表 | |
AMD |
异步模块定义,预加载,在使用模块之前加载依赖的模块。 格式:define( id, dependencies, factory ); |
requirejs requirejs2.0+也可以支持延迟加载 |
CMD |
模块使用时才加载,需要的异步加载模块可以使用 require.async 来进行加载。 格式:define( id, deps, factory ); require 是 factory 的第一个参数。 |
seajs |
三、requirejs 与 seajs
requirejs 提前执行,推崇依赖前置,RequireJS 在尝试让第三方类库修改自身来支持 RequireJS,目前只有少数社区采纳(目前就我使用的库echart,hightchart等都能支持requirejs2.0)
seajs 延迟执行,推崇就近依赖,非常关注代码的开发调试,有 nocache、debug 等用于调试的插件。Sea.js 不强推,采用自主封装的方式来“海纳百川”,目前已有较成熟的封装策略。
用法
// CMD define(function(require, exports, module) { var a = require('./a') a.doSomething() // 此处略去 100 行 var b = require('./b') // 依赖可以就近书写 b.doSomething() // ... }) // AMD 默认推荐的是 define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好 a.doSomething() // 此处略去 100 行 b.doSomething() // ... })
3.1 requirejs 的常用api
requirejs.config ({ base:'' , paths:{}, deps:{}, urlArgs:'' })
define('模块名', [依赖模块名], function(模块1, 模块2...) { })
3.2 seajs的常用api
seajs.config ({ base:'' , paths:{}, alias:{},})
seajs.use ([模块名])
definef (function(require, exports, module){ .... })
require ([模块名])
require.asyn ([模块名])
exports 对外暴露的函数,为module.exports的引用
module.exports
参考:https://github.com/seajs/seajs/issues/266
四、个人些观点
其实就个人编程习惯而言,更喜欢requirejs,而且在管理模块关联关系时可以非常清晰一目了然,同时由于js的单线程工作,seajs的懒加载,会导致程序中断,进入加载文件阶段,而requirejs就不会,预加载文件,浏览器是可以多线程并行的。
执行顺序分析:http://www.douban.com/note/283566440/
四、参考资料
AMD规范文档 https://github.com/amdjs/amdjs-api/wiki/AMD
amdjs 的接口文档 https://github.com/amdjs/amdjs-api/wiki
RequireJS和AMD规范 http://javascript.ruanyifeng.com/tool/requirejs.html
知乎 AMD 和 CMD 的区别有哪些? http://www.zhihu.com/question/20351507
JavaScript模块化开发 - AMD规范 http://www.feeldesignstudio.com/2013/09/javascript-module-pattern-amd
模块化设计 http://baike.baidu.com/view/189730.htm
模块化 http://baike.baidu.com/view/182267.htm