【注意】
之前的
YUI
分析都是针对
YUI 2.8
版本。
关于动态加载
先来说说关于动态加载有哪些个方法,以及动态加载有什么作用。
有时页面的开发,需要加载很多
js
文件。每个
js
文件加载需要消耗很多时间,而动态加载机制可以使
js
文件在需要的时候加载,加快页面的呈现速度。其本质还是将
script
element
添加到
Dom
树里面。
Google
搜出很多动态加载的文章,其实有提到
4
个方法,其实都是添加一个
script
元素到
head
里面。然而都是异步加载。而第四种方法使用
XHR
去请求,可以同步,不过得声明其同步。且这个只能是在同源策略下。
关于YUI Get Utility
看看
Get Utility
通用使用的地方:
翻译自
YUI/Get Utility
官方网站。
1
,跨域资源的获取:因为
XMLHttpRequest
是遵守严格的同源策略,通过
XHR
来获取第三方数据需要服务端的代理。如果是能控制或者完全信任的跨域资源,可以不通过服务端代理而直接加载
script
数据从不同源的地方;而
script
文件,可能是典型
json
格式化的数据,在
load
的时候会立马执行。有一点至关重要,如果你加载的
script file
有恶毒的代码,没有安全的机制可以保证用户不受到恶毒代码的影响,因为浏览器会以完全的权限来执行这些代码。所以记住这一点:不要让用户接触到那些不能彻底信任的数据源。
2
,先进的加载方法:
在富客户端应用中,基于用户动态加载需要的
js
文件和
css
文件变得非常有用,
Get utility
提供了动态加载资源的功能。(注意:如果是加载
YUI
里面资源,可以使用
YUIloader
来加载,
YUILoader
使用
Get Utility
来加载
YUI
组件,并且对解决
YUI
组件依赖问题)
现在分析一下
YUI
关于动态加载,
首先
YUI
Get Utility
是闭包形式实现,只暴露了部分方法和数据。重点使用到的就是
API
里面看到的。
说说闭包的形式,其实就是域的控制灵活使用。
YAHOO.util.Get = function() {
//_next 就只能在 YAHOO.util.Get 中使用得到 , 将其封装了。
var _next=function(){
};
//return 里面是可使用 API ;
return {
css:function(){},
script:function(){},
. . . . . .
};
}
|
YUI
使用的也是通过 createElement ,然后
append script
节点或
node
节点来达到加载,然而不同之处在于有对节点onload事件的监听,且是通过监听来达到同步的效果,使script node按照顺序同步加载完
。
YUI2.8
里面在关于节点加载onload事件监听上有
bug
,也不怪
YUI
,是各浏览器之战留下的后果。这个放到后面说说。
加载原理:
YUI
对
script
和
css
的加载
,可以一次函数里面多个资源
url
加载,
都还是同步的。对于加载而言,
YUI
作为事务来处理,当整个发生中止的时候,会调用定制的
onFailure
方法。
YUI Get
按照
url
定义的顺序一个一个的加载,这个的设计流程是对上一次资源
url
进行
onload
监听,当加载完
才又开始加载下一个
url
资源。
一个是
_next function
另一个是
_track
function
。在
next function
中
调用一次,就对
url
数组
shift
一下,去掉第一个元素,且调用
_track
来监听。而在
_track function
监听中,
url
的
onloaded
事件处理中对
_next
进行调用,亦是调用下一个
url
。
再来说说
YUI2.8
中的
bug
存在地方。
先说说关于动态加载中
append node
后,对
node
进行onload监听。
script
node
和
css link node
的监听不同,且在各个浏览器中也不同。
此图来源
http://www.zachleat.com/web/2010/07/29/load-css-dynamically/
上图解释:
在
javascript
和
css
这些资源同源的情况下,可以通过
XHR
的方式来获取数据,浏览器都为
onreadystatechange
Event
;
而在不同源的情况下,加载
script
node
且进行监听,
firefox
和
ie
的
事件名ie为onreadystatechange,firefox为onload ;
css node的监听ie 做的不错,还是和script一样,而firefox却没有
此监听。
用firefox和ie这样来区别说明有点浅薄了,在YUI源码中是针对其浏览器所用内核来各个区别对待,
if (ua.ie) {
n.onreadystatechange = function() {
。。。。。。
};
} else if (ua.webkit) {
if (type === "script") {
if (ua.webkit >= 420) {
n.addEventListener("load", function() {
。。。。。。
});
//这里使用轮询的方法来确认script资源加载上去
} else {
var q = queues[id];
if (q.varName) {
var freq=YAHOO.util.Get.POLL_FREQ;
q.maxattempts = YAHOO.util.Get.TIMEOUT/freq;
q.attempts = 0;
q._cache = q.varName[0].split(".");
q.timer = lang.later(freq, q, function(o) {
var a=this._cache, l=a.length, w=this.win, i;
for (i=0; i<l; i=i+1) {
w = w[a[i]];
if (!w) {
// if we have exausted our attempts, give up
this.attempts++;
if (this.attempts++ > this.maxattempts) {
var msg = "Over retry limit, giving up";
q.timer.cancel();
_fail(id, msg);
} else {
}
return;
}
}
q.timer.cancel();
f(id, url);
}, null, true);
} else {
lang.later(YAHOO.util.Get.POLL_FREQ, null, f, [id, url]);
}
}
}
// FireFox and Opera support onload (but not DOM2 in FF) handlers for
// script nodes. Opera, but not FF, supports the onload event for link
// nodes.
} else {
n.onload = function() {
f(id, url);
};
}
下面代码截至
YUI Get源码 _track function
里面
// FireFox and Opera support onload (but not DOM2 in FF) handlers for
// script nodes. Opera, but not FF, supports the onload event for link
// nodes.
、、、
} else {
n.onload = function() {
f(id, url);
};
}
|
图来源的文章
是对
css node
进行伪监听。有兴趣的去看看。
YUI 2.8 中并没有对firefox的css link node实现监听,实现同步,所以一次加载中仅仅能加载一个css资源,在API中YAHOO.util.Get.css的url参数仅为<string> 而不像script 方法中的url参数为<string|string[]>
以上仅个人浅见,有错误的地方欢迎指正。
分享到:
相关推荐
YUI3 源码 非compress版 YUI3 源码 非compress版 YUI3 源码 非compress版
雅虎提供的js压缩工具包,包含源码及jar包
yui 源码下载,3.9.0 r2 包,最新版本
Yahoo JavaScript库 YUI,非常有名的免费开源代码库
YUI教程YUI 入门教程YUI 入门教程YUI 入门教程
YUI 库,全称Yahoo! UI Library。是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...
yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...
yui3-master.zip
YUI3 引入了粒度更细的模块管理方式,通过异步 HTTP 请求加载模块、然后执行回调来加载和使用模块。现场有很多人提出疑问,大家无非关心的是“效率”二字。个人以为在现阶段,这种方式有一点激进,否能为广大用户所...
YUI的使用文档,汉语版的,个人日记,是别人写的,不是我写的
雅虎的东西,简单的操作很好用 使用例子:java -jar D:\yuicompressor\yuicompressor\yuicompressor.jar E:\js\all.js -o E:\wap\wap2\js\all-min.js --charset utf-8 当然要装jdk了 不然就玩完了
基于java的开发源码-JSCSS压缩工具 YUI Compressor.zip 基于java的开发源码-JSCSS压缩工具 YUI Compressor.zip 基于java的开发源码-JSCSS压缩工具 YUI Compressor.zip 基于java的开发源码-JSCSS压缩工具 YUI ...
YUI Compressor非常好用,特别是JS的混淆是众多JS Coding的最爱。可惜官网提供的版本都不具备右键功能,每次压缩都要cmd输入一些命令实在是繁琐,本文就介绍如何给YUI Compressor添加右键命令,方便使用。 网上已有...
yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2
YUI Test is a complete testing framework for JavaScript and Web applications. You can use the simple JavaScript syntax to write unit tests that can be run in web browsers or on the command line, as ...
从YUI2到YUI3看前端的演变
YUI资料 雅虎 用户接口库 中文说明及如何使用学习 Yui组件分成2类:工具包和控件库 Yui 工具包 Yui 工具包利用DOM脚本来简化浏览器内的开发(in-browser devolvement),使用DHTML和AJAX的特性开发所有的Web程序。...
yuicompressor.jar是JS压缩工具、前端优化神器、yuicompressor-2.4.8.jar
基于YUI3的dialog组件该组件是基于YUI3开发的,功能强大,详细见http://www.qiqicartoon.com