Comments (3)
什么是模块化
理解模块化,最简单的方式就是拿乐高来对比,它有这几个特性
- 模块与模块之间是相互独立的
- 模块之间可以做加法
- 模块是完整的,不会少了一个螺丝钉
- 模块是可以有子模块的,同样也是可以有父模块的
为什么要使用模块化呢
可以更好的分工,职责分明,理清脉络,还可以贡献分享一些模块帮助其他人完成任务
from bindy.github.com.
如何实现模块化
目前市面上实现模块的方式大致有两类
- CommonJs (服务端)
- CMD/AMD (客户端)
CommonJs的规范,主要是Node、NPM在执行,同时也得益于模块化,使得Node、Npm的发展非常迅猛,他们的写法大概是这样的
function moduleA(){
/* */
};
module.exports = moduleA;
var A = require(./moduleA);
A.funA();
CommonJs规范约定,每个模块内部,module代表当前模块,它的exports属性是对外的接口。
CommonJs遵循的是同步加载模块规范,也就是会自上而下依次进行,而且由于服务器环境对模块的加载等同于硬盘的读写速度,是非常非常快的。
CMD/AMD的规范则是非同步加载模块,允许有回调函数,一般用在浏览器端这种加载环境多变的情况
以SeaJs为例
define(function(require,exports,module){
require.async('./module/a', function(){alert(1)}
require.async('./module/b', function(){alert(2)}
});
由于网络环境,加载模块的顺序是不固定的,哪个模块先加载完优先执行
对于CMD与AMD的区别,有这几点
- AMD 提前执行依赖 - 尽早执行,requireJS 是它的实现
- CMD 按需执行依赖 - 懒执行,seaJS 是它的实现
参考文章:
http://javascript.ruanyifeng.com/nodejs/module.html
http://anjia.github.io/2015/06/23/js_module_2_AMD%E5%92%8CCMD/
from bindy.github.com.
简要梳理一下seajs内部实现的过程
1.从use函数开始,根据id,预定义的config去获取js/css的绝对路径
2.获得文件的路径之后,接下来初始化缓存对象,用来缓存每个模块的信息
3.开始从网络加载相关资源,资源ready之后,存储在缓存对象,以供使用
4.等待资源加载完毕,开始进入代码中的define部分
5.define事件执行之后,onload事件将触发,执行回调事件,开始修改模块中的调用信息
6.若检测到有其他依赖,则重复以上3,4,5
7.当所有的模块加载完毕后,开始执行use函数的主回调事件,完毕
SeaJS是异步加载模块, 执行模块的顺序也是严格按照模块在代码中出现(require)的顺序。
from bindy.github.com.
Related Issues (4)
- png序列播放解决方案 HOT 1
- js 奇淫技巧 HOT 4
- Vue.js 中的订阅-观察者模式
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bindy.github.com.