YUI的模块化开发
随着互联网应用越来越重,js代码越来越庞大,如何有效的去组织自己的代码,变得非常重要。我们应该学会去控制自己的代码,而不是到最后一堆bug完全不知道从哪冒出来。前端的模块化开发可以帮助我们有效的去管理代码,特别是多人开发的时候,提高开发效率。
这篇文章主要介绍YUI模块化开发的原理,适合有一定基础的朋友阅读,如果对前端模块化开发不是很熟的话,可以先看看阮一峰的博文,http://www.ruanyifeng.com/blog/2012/10/javascript_module.html。
YUI生成模块的方式是:
YUI.add('module1', function (Y) { ... }, '1.0.0', requires: ['module2']);
YUI 是全局变量,类似于jquery中的$。add方法中第一个参数是模块的名称module1,第二个参数是一个匿名函数,里面是模块内容,第三个参数是版本名,第四个requires表示的是模块的依赖关系,如上是module1 依赖于module2(即module2要先于module1 执行)。
通常每个模块存放在一个js文件中,文件以模块名来命名,即模块module1存放在module1.js 文件中,module2存放在mudule2.js 文件中。
加载模块module1:
// 加载YUI seed 文件,包含了YUI所有的依赖关系
<scriptsrc="http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js"></script>
<script>
YUI().use('module1', function (Y) { ... });
</script>
下面就分析下上面这行代码会发生什么事。
1)YUI 首先会分析module1 模块存在的依赖关系,创建一个URL: http://localhost:3000/yui/combo?mudule2.js&module1.js。注意module2.js 在modul1.js 前面。
2)创建动态script标签,向服务器端请求js文件
var script = document.createElement('script');
script.src = 'http://localhost:3000/yui/combo?mudule2.js&module1.js';
if(script.readyState) {
//IE
script.onreadystatechange = function () {
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
//预留
}
};
} else {
//非IE
script.onload = function () {
//预留
};
}
document.body.append(script);
3)服务器端检测客户端传来的到请求,解析URL,然后开始寻找module2.js 和 module1.js 两个js文件,并将两个文件按顺序拼成一个文件,返回给客户端。最后传回的js文件内容如下:
//module2.js 中的内容
YUI.add('module2', function (Y) { Y.module2 = {}; Y.module2.name = 'module2'; }, '1.0.0', requires: []);
//module1.js 中的内容
YUI.add('module1', function (Y) { Y.module1 = {}; Y.module1.name = 'module1'; }, '1.0.0', requires: ['module2']);
4)客户端接受到返回的js,开始解析,即执行里面的YUI下的add方法,执行过程大致如下:
YUI.modules = {};
//module2
YUI.modules.push(function (Y) { Y.module2 = {}; Y.module2.name = 'module2'; });
//module1
YUI.modules.push(function (Y) { Y.module1 = {}; Y.module1.name = 'module1'; });
5)解析完成后,自动触发步骤2中onload方法(IE中为onreadystatechange方法),下面是步骤2中“预留”处的代码:
for(var i = 0, len = YUI.modules.length; i < len; i++) {
//将模块中需要export出的api注册在this下面;this是YUI的一个实例, this = new YUI();
YUI.modules[i](this);
}
//callback 是YUI().use 中的回掉函数
//此时模块解析完成,传入this参数,在callback 就可以任意调用module1 和 module2 中输出的api了
callback(this);
以上是借助YUI对模块化开发做一个简单的介绍,YUI实际的过程比上面要复杂的多。想了解更多可以看YUI官方文档:http://yuilibrary.com/yui/docs/yui/。也可以看看《JavaScript.Patterns》第五章 Sandbox Pattern,里面对这种开发模式有比较详细的介绍。
---------------刚开始写博客,很多方面都不足,希望各位志同道合的朋友多提意见~
YUI的模块化开发的更多相关文章
- web前端学习路线:HTML5教程之前端模块化开发
1. 命名冲突 首先从一个简单的习惯开始. 由于以前一直做 JavaEE 开发的缘故,在 JavaScript 开发中,我已经习惯将项目中的一些通用功能抽象出来,形成一个个的独立函数,以便于实现代码复 ...
- 前端模块化开发的价值(seaJs)
随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做 ...
- 初学seaJs模块化开发,利用grunt打包,减少http请求
原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...
- JS模块化开发:使用SeaJs高效构建页面
一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...
- iOS关于模块化开发解决方案(纯干货)
关于iOS模块化开发解决方案网上也有一些介绍,但真正落实在在具体的实例却很少看到,计划编写系统文章来介绍关于我对模块化解决方案的理解,里面会有包含到一些关于解耦.路由.封装.私有Pod管理等内容:并编 ...
- Angular 结合RequireJs实现模块化开发
angular的指令是模块化很好的一个体现,下面我将只使用指令(不用控制器),结合requirejs,实现模块化开发. 模块化关系图:
- .NET/ASP.NET MVC(模块化开发AraeRegistration)
阅读目录: 1.开篇介绍 2.AreaRegistration注册路由(传递路由上下文进行模块化注册) 1]开篇介绍 ASP.NET Routing 路由功能非常强大,设计的也很巧妙:如果说ASP.N ...
- Mvc 模块化开发
在Mvc中,标准的模块化开发方式是使用Areas,每一个Area都可以注册自己的路由,使用自己的控件器与视图.但是在具体使用上它有如下两个限制 1.必须把视图文件放到主项目的Areas文件夹下才能生效 ...
- 模块化开发--sea.js
当你的网站开发越来越复杂的时候,会经常遇到一下问题吗?1.冲突2.性能3.依赖如果在多人开发或者是复杂的开发过程中会经常遇到这些问 题,就可以用模块化开发来解决.以上问题是如何产生的?1.冲突:如果你 ...
随机推荐
- 小希的迷宫(HDU 1272 并查集判断生成树)
小希的迷宫 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- STL之二分查找 (Binary search in STL)
STL之二分查找 (Binary search in STL) Section I正确区分不同的查找算法count,find,binary_search,lower_bound,upper_bound ...
- 深入学习微框架Spring-boot
深入学习微框架:Spring Boot 深入学习微框架:Spring Boot
- Effective Java单元测试TestNG - 就是爱Java
TestNG是另一种单元测试的framework,与JUnit的类似,这次Mix将使用它来撰写测试程序,大部分所引用的class package都一样,只差在JUnit与TestNG的字样,可以直接用 ...
- eMMC的MMC模式与SPI模式
MMC存贮卡可以分为MMC和SPI两种工作模式,MMC模式是标准的默认模式,具有MMC的全部特性.而SPI模式则是MMC存贮卡可选的第二种模式,这个模式是MMC协议的一个子集,主要用于只需要小数量的卡 ...
- Qt 框架的图形性能高(OpenGL上的系统效率高),网络性能低,开发效率高,Quick是可以走硬件加速——Qt中分为好几套图形系统,差不多代表了2D描画的发展史。最经典的软描画系统
-----图形性能部分-----Qt的widgets部分,运行时的图像渲染性能是一般的,因为大部分的界面内容都是Qt自绘,没有走硬件加速,也就是说很多图形内容都是CPU算出来的.但是widgets底层 ...
- expect set timeout -1 永不超时
. ~/.bash_profile passwd='xxx' expect <<! set timeout -1 spawn rsync -avH /webapps/Seeyon/A8/b ...
- Seletion Sort
referrence: GeeksforGeeks The selection sort algorithm sorts an array by repeatedly finding the mini ...
- DFS(深度优先搜索)模板
void dfs()//参数用来表示状态 { if(到达终点状态) { ...//根据题意来添加 return; } if(越界或者是不符合法状态) return; for(扩展方式) { if(扩展 ...
- apache FtpServer整合spring逻辑处理
上面我们的部署工作完成了,那么文件上传下载后,ftpserver会自动相应我们的上传下载操作,也就是说ftpServer服务器会得到触发,那么我们如果要得到文件的一些信息,比如说文件的路径.大小.类型 ...