YUI模块开发原理详解


Posted in Javascript onNovember 18, 2013

随着互联网应用越来越重,js代码越来越庞大,如何有效的去组织自己的代码,变得非常重要。我们应该学会去控制自己的代码,而不是到最后一堆bug完全不知道从哪冒出来。前端的模块化开发可以帮助我们有效的去管理代码,特别是多人开发的时候,提高开发效率。

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 = '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实际的过程比上面要复杂的多。

Javascript 相关文章推荐
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 Javascript
深入领悟JavaScript中的面向对象
Nov 18 #Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 #Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 #Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 #Javascript
jquery cookie的用法总结
Nov 18 #Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 #Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 #Javascript
You might like
德生9700DX电路分析
2021/03/02 无线电
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
Python 条件判断的缩写方法
2008/09/06 Python
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
应届生学校辅导员求职信
2013/11/07 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python