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

实现代码如下：

复制代码 代码如下:

// 根据相对路径获取绝对路径

function getPath(relativePath,absolutePath){

var reg = new RegExp("\\.\\./","g")

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

var m = relativePath.match(reg)

if(m) uplayCount = m.length

var lastIndex = absolutePath.length-1

for(var i=0i<=uplayCounti++){

lastIndex = absolutePath.lastIndexOf("/",lastIndex)

}

return absolutePath.substr(0,lastIndex+1) + relativePath.replace(reg,"")

}

function include(jssrc){

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

var scripts = document.getElementsByTagName("script")

var lastScript = scripts[scripts.length-1]

var src = lastScript.src

if(src.indexOf("http://")!=0 &&src.indexOf("/") !=0){

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

var url = location.href

var index = url.indexOf("?")

if(index != -1){

url = url.substring(0, index-1)

}

src = getPath(src,url)

}

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

for(var i=0i<jssrcs.lengthi++){

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

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

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

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

}

}

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

关于使用jsp:include标签及哪激<%@ include标签时要注意的事项 先回忆一下二者的区别（对于此篇文章而言 二者在用法上没有区别） jsp:include是先编译一下included jsp文件 然后再包含(先编译 后包含) @ include是先把文件包含就来 然后统一编译(先包含 后编译) 今天下午想把Jquery集成到项目中 发现怎么样都会出问题 原因就是路径问题 在集成时 我的思路是写一个公共JSP文件 里面包含一些常用的js文件 当然此处我用的就是Jquery插件了 但写完发现单独测试公共JSP是可以使桐者用的 但包含公共JSP页面的页面却始终不能使用JQuery 开始还以为是加载顺序的问题 几经测试 终于发现了其中的问题 由于做的项目文件较多 故文件都不放在一个文件夹下 在公共JSP页面中 有

复制代码 代码如下: <%@ page language="java" import="java util *" pageEncoding="utf "%><script type=text/javascript src=js/jquery min js></script><script type=text/javascript>$(function(){ alert( hello )})</script>

在调用它的时候 有 <%@ include file=" / /mon_ext jsp"%>但这样很可能导致错误 原 因是 include之后 公共JSP被加载到自己的JSP 则JQueryr的相对位置已经发生了变化 即公共JSP把JQuery的相对位置传给了自 己的JSP 但自己的JSP以自身为标准 通过路径就找不局缓薯到Jquery插件了 简单地说 就是如果用相对路径 则公共JSP中的路径就应该是相对自己 jSP的路径了 但这样显然失去了它是公共JSP的意义 因此在这里用绝对路径来做

复制代码 代码如下: <%@ page language="java" import="java util *" pageEncoding="utf "%><% String tPath = request getContextPath()String tBasePath = request getScheme()+"://"+request getServerName()+":"+request getServerPort()+tPath+"/"%><script type=text/javascript src=<%=tBasePath%>js/jquery min js></script><script type=text/javascript>$(function(){ alert( hello )})</script>lishixinzhi/Article/program/Java/Javascript/201311/25490

---