JS 实现完美include

               

转载于:https://www.cnblogs.com/BearsTaR/archive/2010/08/05/js_include.html　

js为什么需要include？让我们想想这样1个场景，a.js 需要用到1个公用的common.js，当然你可以在用到a.js的页面使用<script src="common.js">，但假设有5个页面用到了a.js，你是不是要写5遍<script。而且要是以后a.js 又需要引用common2.js，你是不是又的修改5个页面了？

 

已有js include的一些问题

  　　在写这个之前在网上搜索了些资料，发现以前写的include都存在2个问题，这也是include需要解决的比较重要的2个问题。

 　　1、相对路径的问题：  在a.js中使用include("../js/common.js");  include 函数中肯定是使用相对路径，是相对a.js的路径。而a.js在html中使用<script>嵌入有可能是相对路径，有可能是绝对路径。  include函数如何才能真正确定common.js的绝对路径，或者是相对html的相对路径。网上一些为了解决这个问题，还需要加一些js变量，不方便。  

 　　2、引用的问题。  网上include函数的实现几乎都是使用下面2种方式插入common.js     

　　　　　　document.write("<script src='" + .. + "></script>")  

　　　　或者    

　　　　　　var s = document.createElement("script");    

　　　　　　s.src = ...;    

　　　　　　head.insertAfter(s,...);    

　　　　document.write 输出的脚本会在a.js后面加载，而createElement("script")创建的脚本是非阻塞加载。  所以如果在common.js加载完毕之前，a.js中调用了common.js的函数就会报错。

 

实现

   　　解决上面2个问题，就可以实现js include。  

 　　第1个问题，我的方法是先获取到a.js在html中的绝对路径(如果是相对路径，就转为绝对路径)，然后再把common.js的路径转为绝对路径。  

 　　第2个问题，采用同步的ajax来请求common.js，这样就不会出现引用问题。

 

　　实现代码如下：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17