Ext.Loader使用(js延迟加载)
首先感谢公司里傅哥对于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可以达到只更新一次页面的目的，减小页面的开销。