JavaScript重构（二）：JS的动态加载

前一节留下了一个问题，如果JS分门别类也清晰了，那我现在需要在必要的情况下才加载某一模块的JS，这个怎么实现呢？

 

方法一，最简单也是最容易被接受的方法，通过后台代码来控制，还是少些复杂的JS吧，通过一个标签、一个分支判断，就可以做到，何乐而不为呢？

 

方法二，如果要使用纯JS来控制，那么看看这样如何：

$.ajax(){
    url:"xxx/play.js";
    ……
    success:function(res){
        eval(res.responseText);
    }
}

原理是很简单，不过有一个藏匿着的魔鬼：eval，js加载的生效就靠它了，那么执行的上下文就在它的里面，这就会带来一些潜在的问题，而且，调试也变得困难。

 

方法三，通过添加<script>标签的方式来动态引入脚本：

原理相信大家也马上能领悟个大概了，需要的时候动态地往页面的<head>里面写一对<script>标签，让浏览器自己去取需要的js，这样的就解决了方法二里面的魔鬼eval的问题，是一个比较好的方法：

<script src="xxx/play.js" ... />

这里啰嗦一句，<script>标签中的src——本质上不就是对src所表示的地址发送一个get请求吗？这虽然看起来有点歪门邪道，却恰恰是一个跨域问题的解决办法！因为浏览器对<script>引用js页面可没有同域的安全限制（以前转载过过一篇跨域问题的讨论，见此）。

 

方法四，很多JS框架都提供了易于使用的JS动态加载的方法，比如JQuery的loadScript方法，这里不讨论了。

 

另外，如果使用上pushlet的方法，对一个js文件无止境地读取，能否实现这样的效果呢？仅作设想，希望有人与我讨论。