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

最新推荐文章于 2022-12-24 21:32:01 发布

daiwenkui521

最新推荐文章于 2022-12-24 21:32:01 发布

阅读量255

点赞数

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

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

方法二，如果要使用纯JS来控制，那么看看这样如何：
Js代码
$.ajax(){
   url:"xxx/play.js ";
……
success:function(res){
    eval(res.responseText);
}
}

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

方法三，通过添加<script>标签的方式来动态引入脚本：
原理相信大家也马上能领悟个大概了，需要的时候动态地往页面的<head>里面写一对<script>标签，让浏览器自己去取需要的js，这样的就解决了方法二里面的魔鬼eval的问题，是一个比较好的方法：
Js代码
<script src="xxx/play.js" ... />

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

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

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