OYE - AMD模块化开发思想的实现原理及应用

dh20156 2011-11-16 10:02:51
加精
hi,大家,一切都别来无恙吧? ^_^

为了推行模块话的开发思想,将刚推出不久的AMD模块化加载管理器 - OYE,拿出来跟大家分享一下,希望能够多尽一份力!

AMDCommonJS规范的一个分支,它更适合在浏览器端进行实现。

OYE是对AMD规范的一个实现!

OYE概述

✔ 不依赖Script onload事件,更稳定可靠
✔ 完美支持具名、匿名模块
✔ 支持模块提取完整依赖列表
✔ 支持模块循环依赖检测
✔ 支持require与define在同一个文档


OYE实现原理

辅助项
[[当前正在处理的模块名称]], [[请求队列]]

define
define函数执行时,如果是具名模块,则直接将模块定义体与模块名进行注册;如果是匿名模块,则取[[当前正在处理的模块名称]]为模块名称进行模块注册;最后将[[当前正在处理的模块名称]]置空;

require
require函数执行时,如果[[当前正在处理的模块名称]]为空,则发起文件请求,并将本次请求的模块名称置为[[当前正在处理的模块名称]];否则,将本次请求丢到[[请求队列]]

依赖关系
采用触发器方式,一个模块准备好后,触发所有依赖它的模块进行检查,看它们是否也准备好


应用指引

开发阶段

确认当前项目准备采用模块化的方式进行开发;
每个模块定义为匿名模块,并存储为一个独立的JS文件;
每个页面最好只引入一个模块,如:首页,可以有一个app/home这样的模块,在这个模块中再去调用其他模块,如:

<你的站点路径或CDN路径>resource/js/app/home.js
define(['common/head','common/foot','app/home/content'], function(head,foot,content){
return {
init:function(){
head.init();
foot.init();
content.init();
}
};
});

然后,在home页面,我们只要这样去调用即可:

<script src="<你的站点路径或CDN路径>resource/js/oye/oye.min.js"></script>
<script>
require('app/home', function(home){
home.init();
});
</script>

请注意:

模块文件home.js与oye.js的目录关系,在oye里,模块名对应模块的路径!
如果模块名是以http或https等协议开头的,则视为绝对路径,oye会直接去请求这个URL;
否则,都被视为相对路径,相对于oye.js所在的路径而言,而不是相对于当前页面的路径,这个很重要!

为什么设计成这样?

因为我们需要覆盖线上线下两种应用场景:
线下,即开发阶段,我们的资源文件与项目内容基本上是作为一个项目的整体来开发的;
线上,资源文件和项目内容多数情况下会分开部署到不同的域;

更多具体用法,请参见我们给出的OYE DEMO演示

项目上线(可选)
如果公司的站点线上与开发阶段完全不一致,则需要考虑以下步骤。

在BUILD工具中添加提取JS模块依赖列表、合并压缩的功能;实现方式大致如下:
通过对模块依赖列表的提取,将各依赖模块的模块名自动添加到提取出来的内容中,即为原来的匿名模块加上模块名称,如:
(举例)我们通过对app/home提取依赖列表,可以得到:

app/home: http://你的站点路径/resource/js/app/home.js
common/head: http://你的站点路径/resource/js/common/head.js
common/foot: http://你的站点路径/resource/js/common/foot.js
app/home/content: http://你的站点路径/resource/js/app/home/content.js

现在,我们的BUILD工具就可以遍历读取这些文件,并将读取的内容做如下替换:
将 define( 替换成 define("app/home" ,即将模块名填充进去。
将已知的具名模块配置中,添加一条:define.amd.namedModules['模块名'] = true;
将提取并修改后的所有内容保存到一个JS文件,如:app/home.min.js
在页面上,引入oye.min.js文件的后面,添加一个对该文件的引入:<script src="<你的站点路径或CDN路径>resource/js/app/home.min.js"></script>

现在就去体验使用OYE作为模块化开发的便利吧!
...全文
995 36 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
36 条回复
切换为时间正序
请发表友善的回复…
发表回复
峭沙 2011-11-24
  • 打赏
  • 举报
回复
我用过require.js和javascripMVC的steal.js,感觉还行。不过老实说,我还没完全弄明白他们是怎么实现的
望舒 2011-11-24
  • 打赏
  • 举报
回复
楼主的头像
hushuhongqianyu 2011-11-22
  • 打赏
  • 举报
回复
太棒了
最后一个菜鸟 2011-11-21
  • 打赏
  • 举报
回复
模块开发,小僧还没有接触过,学习一下
wquanchao 2011-11-19
  • 打赏
  • 举报
回复
init:function(){
head.init();
foot.init();
content.init();
这将导致页面代码相当整齐
panshang1987 2011-11-19
  • 打赏
  • 举报
回复
真的吗??/???
shotusa 2011-11-18
  • 打赏
  • 举报
回复
1111111111111111111111111111
dajiahaowo 2011-11-18
  • 打赏
  • 举报
回复
写的不错,mark留名!
hong78 2011-11-18
  • 打赏
  • 举报
回复
其实,我也是来看楼主头像的~~
zkyEric 2011-11-17
  • 打赏
  • 举报
回复
很好,很强大的
斯巴达2k 2011-11-17
  • 打赏
  • 举报
回复
性能会降低很多吗
Crazywa 2011-11-17
  • 打赏
  • 举报
回复
之前也用js模仿过类似AS3、JAVA之类的模块化,后来还是选择了放弃。
患有性能极端强迫症..
性能与敏捷开发之间选择的话,我还是倾向于性能...
yhtapmys 2011-11-16
  • 打赏
  • 举报
回复
再占地板,然后学习。
dh20156 2011-11-16
  • 打赏
  • 举报
回复
模块化开发思想的话题没有感兴趣的同学么?
dh20156 2011-11-16
  • 打赏
  • 举报
回复
我也有写实现原理,建议你先熟悉一下用法,然后再去看源码,这样会更有助于理解 ^_^
foolbirdflyfirst 2011-11-16
  • 打赏
  • 举报
回复
[Quote=引用 9 楼 dh20156 的回复:]

引用 8 楼 foolbirdflyfirst 的回复:
模块化编程。。。弥漫着C语言的芬芳。。
要是这一标准能推广开去,js开发又规范不少。
不过各个模块如何依赖,这个还是得OOD,个人感觉Extjs这一点做得不错。


其实如果大家开始尝试模块化编程,会发现它不仅不会增加任何开发负担,反而使得大家的开发效率能够得到一定提高,而且,所有模块的重用性显著增强。

关于模块间的依赖……
[/Quote]
嗯,其实我更关注"模块管理器"如何设计的问题,
话说回来,模块化编程其实是很古老的编程模式,所以看你在这楼的代码,感觉有点像在写makefile。。。

dh20156 2011-11-16
  • 打赏
  • 举报
回复
[Quote=引用 8 楼 foolbirdflyfirst 的回复:]
模块化编程。。。弥漫着C语言的芬芳。。
要是这一标准能推广开去,js开发又规范不少。
不过各个模块如何依赖,这个还是得OOD,个人感觉Extjs这一点做得不错。
[/Quote]

其实如果大家开始尝试模块化编程,会发现它不仅不会增加任何开发负担,反而使得大家的开发效率能够得到一定提高,而且,所有模块的重用性显著增强。

关于模块间的依赖,是模块管理器内部处理的事情,开发人员不用关心,只需要知道如何使用即可,比如:

定义一个没有依赖的模块:

define('util', {isString:function(){...}});

定义一个依赖 'util' 的模块:

define('app', ['util'], function(util){
alert(util.isString(1));
alert(util.isString('OYE'));
});

在页面上使用app模块:

require('app');

看,是不是很简单明了?更多演示请参见:http://www.w3cgroup.com/oye
foolbirdflyfirst 2011-11-16
  • 打赏
  • 举报
回复

模块化编程。。。弥漫着C语言的芬芳。。
要是这一标准能推广开去,js开发又规范不少。
不过各个模块如何依赖,这个还是得OOD,个人感觉Extjs这一点做得不错。
huejim 2011-11-16
  • 打赏
  • 举报
回复
我是来看楼主头像的

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧