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 写类方式之七
Jul 05 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
JS获取时间的方法
Jan 21 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
深入领悟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
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
Document 对象的常用方法
2009/07/31 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
Python实现批量下载文件
2015/05/17 Python
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
利用python求积分的实例
2019/07/03 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
银行实习自我鉴定
2013/10/12 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
应届毕业生自荐书
2014/06/18 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
加强作风建设工作总结
2014/10/23 职场文书
交警失职检讨书
2015/01/26 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
详解python字符串驻留技术
2021/05/21 Python
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL