首页 > 开发 > JS > 正文

JS实现完美include加载功能代码

2024-09-06 12:41:25
字体:
来源:转载
供稿:网友
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=0;i<=uplayCount;i++){
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,用|隔开
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表