如何实现Javascript的include功能？

JavaScript09

如何实现Javascript的include功能？,第1张

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.lengthvar lastIndex = absolutePath.length-1for(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.srcif(src.indexOf("http://")!=0 &&src.indexOf("/") !=0){ // a.js使用相对路径,先替换成绝对路径 var url = location.hrefvar 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")

eval:

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

eval("alert(4)")会执行alert，弹出5.

$.extend(）：

是jquery的一个方法，用于合并拷贝对象，图片的中的语句是拷贝后面几个参数