利用jQuery的ResourceLoader插件实现JS和CSS脚本的动态按需加载
自己写的一个JQuery资源异步加载插件，托管在GitHub上的代码地址：https://github.com/haycco/jquery-resource-loader
为了优化页面初始化一次性引入的JS等不必要第一时间加载的脚本，我们通常都是希望点击相关内容才加载该部分的插件。
例如上篇文章讲到的，Web单页面设计的实现。
单页面应用的实现，由于IE67不是原生支持hashchange，将比程序实现带来些许麻烦，但自己新定义了一个JQuery单页面singlepage插件已经解决了该问题了。GithHub代码地址：https://github.com/haycco/jquery-singlepage
当页面有变化的时候，例如我们可以在SinglePage的onchage回调函数里面利用ResourceLoader实现，动态加载JS和CSS。
示例代码如下：
1 //弹出框插件 2 $.ResourceLoader(['css/zebra_dialog/zebra_dialog.css', 'js/zebra_dialog/zebra_dialog.js']);
该JS和CSS将默认只引入一份，如果你希望每次引入之后删除，当然也可以实现，实现方式如下所示：
1 var removeHandler = function(node) { 2 document.getElementsByTagName("head")[0].removeChild(node); 3 }; 4 $.ResourceLoader(['js/verification.index.js'], { onlyOnce:false }, removeHandler);
利用ResourceLoader预留回调接口，我们可以实现引入部分JS并等待他们执行完之后才做下一步操作，例如再引入部分的JS，示例代码如下：
1 var handler = function(){ $.ResourceLoader(['js/certificate.index.js'], { onlyOnce:false }, removeHandler ); }; 2 //日历插件 3 $.ResourceLoader(['css/zebra_datepicker/zebra_datepicker_metallic.css', 4 'js/zebra_datepicker/zebra_datepicker.js'], handler);
很多人可能会想当然的认为，为什么要那么麻烦，一次性引入不就行了，用
1 $.ResourceLoader(['css/zebra_datepicker/zebra_datepicker_metallic.css', 2 'js/zebra_datepicker/zebra_datepicker.js', 3 'js/certificate.index.js']);
但如果我们的'js/certificate.index.js'里面必须依赖zebra_datepicker的所有加载完成之后才能正常使用，上上面的写法才能实现我们的要求了。
下载插件（右键另存为）：
jquery.resourceloader.min.js