日期:2014-05-16  浏览次数:20387 次

动态加载JS文件(支持各种浏览器)
   我是一个喜欢偷懒的程序员,什么事情都想能封装就封装,能系统自动做就自动做,所以咯,为了这个目的,最近开始写一套自己的框架。
    首先,我开始了JS框架的编写:为了让页面打开的时候,系统就自动的去填充一些数据,比如 select(获取这个select的数据,后台代码已经写好,在web容器一开始的时候就去获取数据,然后放在缓存当中,以后只要从这个缓存读取就可以了) 等,所以我开始了写这个功能
          1、我写了一个common.js文件,这里面的功能都是系统自动会去执行的方法,这个文件里面会自动的去页面查找我指定的元素,然后通过ajax去后台查我要的select数据,返回。
          2、 再写一个util.js文件,这个文件里面放着JS工具方法,当然,填充select的方法也放在这里面,写这个文件的目的是为了不单系统可以自动调用这里面的方法,也可以让开发者手动去使用这里面的方法。

        写好这些功能后,我又希望开发者只要在页面上导入 common.js就可以了,而不要再手动去导入util.js 等其他文件,所以我就必须在common.js中动态的去加载util.js文件。一开始我是这么写的: document.write("<script type='text/javascript' src='"+_webInfPath+"/js/util.js'</script>");  (变量_webInfPath是工程的web-inf路径,值也是动态获取的,这里不多解释读取方式,各人有各人的方法)。结果出问题了,加载util.js文件后,马上去执行里面的方法,结果就出错了。调试了半天不明白,上网查了下原因,才发现原来document.write这种加载JS文件的方法竟然是异步的。。也就是说,我在加载util.JS文件的时候还没加载完就去调用里面的方法,当然出错了。

      好吧,知道了出错的原因,和同事讨论了一下,想办法改成同步调用就没问题了,可是没结果,不知道怎么做。。不久之后突然灵光一闪(拖最近在用jquery的福),突然想到了,jquery的 append 这个方法,然后就把代码改成了$(document).append("<script type='text/javascript' src='"+_webInfPath+"/js/util.js'</script>"); OK,问题解决了。。
 
       哈哈,那个兴奋。。
       其实这方面的解决办法网络上也是有的(虽然查到了,但是我没有试验,太麻烦了) ,而且还存在浏览器兼容的问题。。。 我这里使用了jquery的append方法,不仅解决了异步的问题,还解决了浏览器的兼容问题,而且代码还简单。。
       呵呵。。。继续编写我自己的框架了。。
       我是一个爱偷懒的程序员。。
       再来补充一下吧,由于个人当心我的表达能力不好,看的人不明白我写什么,所以这里附上我写的部分代码来表达我的意思。。

首先HTML文件部分代码:
        <script type="text/javascript" src="./js/jquery-1.4.2.js"></script>
       <script type="text/javascript" src="./js/common.js"></script>

     <select id="ts1" jselect="ts1"></select><!-- 下拉框使用 -->

然后是common.js部分代码:
var _webInfPath = "" ;  //工程上下文web-inf路径


//初始页面
$(document).ready(function(){
_webInfPath = getWebRootPath(); //获取工程上下文路径
$(document).append("<script type='text/javascript' src='"+_webInfPath+"/js/util.js'</script>");
JSelect(); //下拉框填值
}
);

//获取项目跟路径
function getWebRootPath(){
var path = location.href ;
var pathArr = path.split("/");
return pathArr[0]+"//"+pathArr[2]+"/"+pathArr[3] ;
}

//下拉框填值
function JSelect(){
$.each($("select"),function(){
var jqueryObj = $(this) ;
var jselect = $(this).attr("jselect") ;
$.ajax({
url: _webInfPath+"/servlet/ajaxServlet.do" ,   //(这里的ajaxServlet其实是我写的一个公共的servlet,效果和struts一样,通过配置后,会自动执行action里面的方法)
data:{"method":"getJselect","act":"glob","jselect":jselect },
type: "post" ,
async : "true" ,
dataType : "json",
success : function(result){
fillSelect(result,jqueryObj.attr("id"));
}
});
});
}

然后是util.js文件的部分代码:
//-------------------------------------下拉框begin---------------------
/**
*填充下拉框供调用
*   jsonArr : 存放JselectVo对象的JOSN数组
*   selectId : selectID
*/
function fillSelect(jsonArr,selectId){
if(jsonArr==null || jsonArr.length==0){
return false ;
}
var content = "" ;
$.each(jsonArr,function(){
content += jselect_addOption(this);
});
$("#"+selectId).append(content);
}

//拼装option
function jselect_addOption(_option){
var arr = new Array() ;
arr.push("<option value='" + _option.value+"'>");
arr.push(_option.name);
arr.push("</option>");
return arr.join("");
}
//--------------