在a.网页特效中直接使用 include("../js/common.js");
多请求的问题
使用上面的include看上去挺爽的,不过却带来另外1个严重的问题,就是多发送了1个ajax的请求。
我们常常为了web性能,而合并js,减少请求。但使用include后却偏偏多了请求。如果这个问题不解决,相信很多人都不会在正式产品中使用include的了,除非是局域网产品。
如何解决这个多请求的问题,我也思考很久,最后觉的单单使用客户端js是没办法解决了。所以就想到了使用服务端代码来解决
还记的我之前有文章介绍 "js、css教程的合并、压缩、缓存管理"的时候,就通过服务器端代码在程序启动时候去合并js。
所以我把include多请求的解决方案也加到里面去。就是在程序启动的时候去查找所有的js,发现有使用include的就把include中common.js的源代码替换该include函数。这样a.js中在运行的时候就没有include函数,而是真真包含了common.js的内容的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,用|隔开
for(var i=0;i<jssrcs.length;i++){
// 使用juqery的同步ajax加载js.
// 使用document.write 动态添加的js会在当前js的后面,可能会有js引用问题
// 动态创建script脚本,是非阻塞下载,也会出现引用问题
$.ajax({type:'get',url:getpath(jssrc,src),async:false,datatype:'script'});
}
}