首先感谢公司里傅哥对于Ext的Loader类的关注,没有他提起,我还一直不知道原来EXT3.3以后有了这么一个有趣的小东西。傅哥对新技术的敏感性要远强于我,向他学习,天天向上。
因为我对js了解不深,所以对一些问题的关注点或许太浅薄,请擅长js的大大见谅。
1. 这篇博文要记录什么:Extjs中的新类,Ext.Loader . 作用是可以在需要的时候即时加载js,而不是在页面head里一股脑儿把所有js都加载。
2. 环境条件:Extjs 3.3新增加的js,经我测试可以平稳转移到其他低版本的EXT上。
3. Loader试用代码:
Ext.Loader.load(["<c:url value='/dwr/interface/testaManager.js'/>"],function(){
。。。一堆加载完js要做的事情
});
Loader类很小,算上注释也只有96行代码,但它却实现了一个很实用的功能——在程序需要某个js的时候才对这个Js进行手工加载,因此在触发某些事件前不需要用到的js,我们就不必把它们写在页面的<head>里了。
刚听到这个功能的时候,我心中一震,这不是传说中的延迟加载么?细看了一下API,才发现不是想像中的“用到才自动加载”。而是基于一种手工编码的,在确定需要使用到某个js的时候,手动加载js的功能。
Ext.Loader.load方法就是延迟加载js的方法。它有四个参数:
-
fileList:将要被加载的一系列js的路径。切记,必须传入集合类型,否则fileList.length会解析错误。(必填)
-
callback: fileList中所有的Js都被加载完成后触发的回调函数(一般都要写的,否则底下的代码就异步跑过去了)
-
scope: callback的范围(选填)
-
preserveOrder:是否强制js的严格加载顺序。默认是false.(选填)
4. Loader如何运作:
Loader的作用简单明了,让我感兴趣的是它如何实现在需要的时候才加载js而不是在head里。
Loader.load方法的核心代码如下:
buildScriptTag: function(filename, callback) {
var script = document.createElement('script');
script.type = "text/javascript";
script.src = filename;
//IE has a different way of handling <script> loads, so we need to check for it here
if (script.readyState) {
script.onreadystatechange = function() {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else {
script.onload = callback;
}
return script;
}
从这段代码中可以了解到2个东西:
- 页面后期才引入的js文件,可以通过document.createElement('script')创建出来,
然后设置属性,最后由
document.getElementsByTagName("head")[0].appendChild(创建出来的script);加入页面中
- 在创建script的过程中,为script注册了加载成功的监听事件,这里IE浏览器js加载事件为script.onreadystatechange,其他浏览器为script.onload. 注册加载成功监听事件的目的有2个:一个是当要加载的文件多于一个时,用回调触发下一个js的加载。另一个目的是在回调中检查,当加载到最后一个js的时候,调用最外层传入的callback,标识着所有js已经加载完成。
5. preserveOrder顺序加载的实现:
Loader是通过回调函数中的分支判断来控制是否顺序加载的。如果顺序加载,那么在buildScriptTag的回调函数中才触发下一个js的加载,如果不用顺序加载,则此回调函数中只监控是否全部加载完成。
6. 通过documentFragment提升页面效率与减少DOM操作:
无论是否按顺序加载js,大体上script对象的生成流程是一致的,但有一个细节值得注意:
顺序加载的生成流程是: 创建script元素——>设置script——>追加script到head中 => 处理下一个script
无顺序加载js的流程是: 创建script元素——>设置script——>追加script到fragment中 => 处理下一个script ——>...——>追加fragment到head中
也就是说,顺序执行的时候,每创建一个script元素,就appendChild到head中一次。 而无顺序情况下,每个创建出来的script元素都会先appendChild到fragment中,最后一次性把fragment appendChild到head中。
为什么无顺序执行的时候不和顺序执行一样,直接把创建出来的script元素直接加入到head中呢?原因很简单,首先要了解什么是documentFragment. documentFragment 是一個無父對象的document對象. 如果没有使用documentFragment,每次执行head的appendChild都会改变页面的表现,同时更新整个页面。而通过documentFrament可以达到只更新一次页面的目的,减小页面的开销。
分享到:
相关推荐
EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档...
Ext.ux.tree.treegrid异步加载,点击节点加载数据
VBA文件夹,直接解压后,放到%Common Files%\microsoft shared下, ...“C:\Program Files\Common Files\Microsoft Shared\VBA\VBA6\VBE6EXT.OLB(即VBE6EXT.OLB的路径), 关闭已经打开的OFFICE,再打开就可以了
1. Ext.form.NumberField 2. Ext.form.TextArea 3. Ext.form.TriggerField 4. Ext.form.DateField 5. Ext.form.ComboBox 6. Ext.form.TimeField
Ext.js 3.0中文API和Ext.js中文教程打包下载
解决excel运行时弹出vbe6ext.olb不能被加载,
org.restlet.ext.spring.jar
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文
打印功能 ext.js,打印功能 ext.js,打印功能 ext.js,打印功能 ext.js,打印功能 ext.js
无法加载安装程序库fp40ext.dll
环境:Window XP Sp2、Tomcat 6.0、MyEclipse 5.5、Ext 3.2 使用步骤: 1、下载解压缩之后,使用IDE导入工程 2、在MyEclipse中启动服务器 ...如果一切正常,那么你可以看到...阅读对象:需要使用Ext框架进行Web开发的人员
Ext.get与Ext.fly的区别与用法
Ext.data.Store的基本用法 Ext.data.Store的基本用法 Ext.data.Store的基本用法
Ext+SwfUpload做的一个多文件上传的插件.
EXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rar
var reader = new Ext.data.JsonReader({totalProperty:'totalProperty',root:'root'},record); store = new Ext.data.Store({ proxy:proxy, reader:reader }); //尾 分页 var pagebar = new Ext....
ext封装的太死板,里面有常用到的15个ext.js触发事件和监听事件,对ext了解的不是特别深入,大部分都是经常碰到的
org.restlet.ext.servlet-2.1.1.jar