动态加载JavaScript的小实践
动态加载JavaScript文件和CSS资源为Web前端开发提供了巨大的灵活性，同时也实现了lazy load和按需加载，相比XMLHttpRequest而言其没有跨域的限制使其广泛应用。其基本原理是：在页面DOMReady后，利用JavaScript把指定文件路径的script和link元素插入到页面中，然后判断其加载状态再进行继续操作。
YUI的Get就专门提供了一套动态加载的机制，是YUI最基础的功能之一。在YUI中利用Get加载JavaScript和CSS资源会在HTML的head节点中插入如下代码：
<script id="..." type="text/javascript" src="some.js"></script>
<link id="..." type="text/css" rel="stylesheet" href="some.css">
当页面编码和JavaScript或CSS资源编码不一致时，常见的方法是通过charset属性声明其编码，比如页面是gb2312，而资源文件为utf-8，则设置编码后其插入的代码是
//YUI3.0.0 和 YUI 2.8.0中
<script id="..." type="text/javascript" src="some.js" charset="utf-8"></script>
<link id="..." type="text/css" rel="stylesheet" href="some.css" charset="utf-8">
然而，在IE的一些特殊情况下加载JavaScript时，当你刷新页面时会看到状态栏上有如下的错误提示：
当你通过随机参数让JavaScript文件不缓存时，或者让script元素中的charset属性位于src属性之前（比如利用YUI2.8.0之前版本加载）就不会有这个错误提示。所以，这个问题可能是IE的缓存解码机制的bug，也可以看着是YUI的bug（已经提交给YUI开发团队，将在3.1.0中解决）。
因此，动态添加script或CSS资源时，把charset放在资源路径前面是最佳实践。对于YUI，暂时可以这样修改源码来修复。
标签：JavaScript, Loader, YUI
作者：秦歌，时间:2009-11-05 0:56，归纳于：Javascript & DOM & AJAX，订阅：RSS 2.0，引用：Trackback
You can still do “通过随机参数让JavaScript文件不缓存”, but the key is that you need to append “.js” after the random key.
For example:
your-script.js?random=12345 ;// This may not work on IE.
your-script.js?random=12345.js // This works, haha.
IE的缓存是一把双刃剑。方便用户，危害开发人员。
@Hedger：是的，你说的很对，虽然知道这个规则但是在写代码的时候还是漏掉了，现在加上，多谢。
危害-貌似言重了
我想问个问题：
动态加载之后，加载的js或者css文件，是如何知道其加载完成从而进行相应的操作的呢？
我看每个加载的资源有个id，难道是不停侦听此id来判别吗？
[...] 近日，在秦歌的blog中看到动态加载的内容，主要是说YUI3.0在动态加载js的一点小bug。当时想了个问题：如何侦听动态加载的内容被成功加载了，翻阅一番后记录下来。 [...]
与文章无关：
秦歌你好，我一直订阅你的博客，但是文章过长我不敢点击到原文，因为你的博客字体颜色和背景色的对比太过强烈，希望能优化下字体的颜色，谢谢。
@fer：非常感谢你的支持，最近是考虑对博客改版一下，但一直拖着，对比度其实也调整了很多次，主要是不同的显示器对比度有很大不同，所以最后用了一个很不完美的方案，就是设置强烈一些，这样不至于对比度很弱的显示器看不到，而对比度强的显示器可以调节对比度。正在考虑下一步怎么做。
“在页面DOMReady后，利用JavaScript把指定文件路径的script和link元素插入到页面中，然后判断其加载状态再进行继续操作。” 思路新颖，Good！受教了~
传统的方式是在页面头部的一段js里面通过document.createElement来加载，而没有考虑DOMReady的形式，这影响了页面的加载速度。
[...] 秦歌的文章里提到《用YUI3.0.0加载无缓存的JavaScript文件》，我感觉这个方案挺实用的，记下了。 原理：利用随机数避免【utf-8.js】这个文件被浏览器缓存 [...]