JS 实现完美include

　　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，这样就不会出现引用问题。

　　实现代码如下：

<code>// 根据相对路径获取绝对路径</code>

<code>function</code> <code>getPath(relativePath,absolutePath){</code>

<code>    </code><code>var</code> <code>reg =</code><code>new</code> <code>RegExp(</code><code>"\\.\\./"</code><code>,</code><code>"g"</code><code>);</code>

<code>    </code><code>var</code> <code>uplayCount = 0;    </code><code>// 相对路径中返回上层的次数。</code>

<code>    </code><code>var</code> <code>m = relativePath.match(reg);</code>

<code>    </code><code>if</code><code>(m) uplayCount = m.length;</code>

<code>    </code> 

<code>    </code><code>var</code> <code>lastIndex = absolutePath.length-1;</code>

<code>    </code><code>for</code><code>(</code><code>var</code> <code>i=0;i&lt;=uplayCount;i++){</code>

<code>        </code><code>lastIndex = absolutePath.lastIndexOf(</code><code>"/"</code><code>,lastIndex);</code>

<code>    </code><code>}</code>

<code>    </code><code>return</code> <code>absolutePath.substr(0,lastIndex+1) + relativePath.replace(reg,</code><code>""</code><code>);</code>

<code>}      </code>

<code>function</code> <code>include(jssrc){</code>

<code>    </code><code>// 先获取当前a.js的src。a.js中调用include,直接获取最后1个script标签就是a.js的引用。</code>

<code>    </code><code>var</code> <code>scripts = document.getElementsByTagName(</code><code>"script"</code><code>);</code>

<code>    </code><code>var</code> <code>lastScript = scripts[scripts.length-1];</code>

<code>    </code><code>var</code> <code>src = lastScript.src;</code>

<code>    </code><code>if</code><code>(src.indexOf(</code><code>"http://"</code><code>)!=0 &amp;&amp; src.indexOf(</code><code>"/"</code><code>) !=0){     </code>

<code>        </code><code>// a.js使用相对路径,先替换成绝对路径</code>

<code>        </code><code>var</code> <code>url = location.href;</code>

<code>        </code><code>var</code> <code>index = url.indexOf(</code><code>"?"</code><code>);</code>

<code>        </code><code>if</code><code>(index != -1){</code>

<code>            </code><code>url = url.substring(0, index-1);</code>

<code>        </code><code>}</code>

<code>        </code> 

<code>        </code><code>src = getPath(src,url);</code>

<code>    </code><code>var</code> <code>jssrcs = jssrc.split(</code><code>"|"</code><code>); </code><code>// 可以include多个js，用|隔开</code>

<code>    </code><code>for</code><code>(</code><code>var</code> <code>i=0;i&lt;jssrcs.length;i++){</code>

<code>        </code><code>// 使用juqery的同步ajax加载js.</code>

<code>        </code><code>// 使用document.write 动态添加的js会在当前js的后面，可能会有js引用问题</code>

<code>        </code><code>// 动态创建script脚本，是非阻塞下载，也会出现引用问题</code>

<code>        </code><code>$.ajax({type:</code><code>'GET'</code><code>,url:getPath(jssrc,src),async:</code><code>false</code><code>,dataType:</code><code>'script'</code><code>});</code>

<code>}</code>

　　在a.js中直接使用 include("../js/common.js");

多请求的问题

　　使用上面的include看上去挺爽的，不过却带来另外1个严重的问题，就是多发送了1个ajax的请求。

　　我们常常为了WEB性能，而合并js，减少请求。但使用include后却偏偏多了请求。如果这个问题不解决，相信很多人都不会在正式产品中使用include的了，除非是局域网产品。

　　如何解决这个多请求的问题，我也思考很久，最后觉的单单使用客户端js是没办法解决了。所以就想到了使用服务端代码来解决

　　所以我把include多请求的解决方案也加到里面去。就是在程序启动的时候去查找所有的js，发现有使用include的就把include中common.js的源代码替换该include函数。这样a.js中在运行的时候就没有include函数，而是真真包含了common.js的内容的js文件

后语

　　丫的。说到最后，怎么又把所有的include都替换掉了，哪之前说的那么多不白说了。

　　个人觉得，每个产品都应该要区分开发环境和产品环境(一般通过配置文件进行区分)，在开发环境应该以开发效率为首要，而产品环境则以性能为首。所以这里的inlcude就应该要区分对待，在开发环境中使用js include来提高开发和维护效率，而在产品环境中则自动把所有include替换成真真的js文件的内容。

本文转自BearRui(AK-47)博客园博客，原文链接：  http://www.cnblogs.com/BearsTaR/archive/2010/08/05/js_include.html  ，如需转载请自行联系原作者