js 文件引入實現(xiàn)代碼

更新時間：2010年04月23日 15:51:01 作者：

項目前端的文件和后臺開發(fā)分離，只要后臺開發(fā)更新svn前端的js，css文件都會更新，以前引用的是一個js文件如AA.js，由于想在項目中引用jquery庫，如果在每個文件的頭部都引讓他們從新寫入這個jq文件不太可能

也不好麻煩讓他們從新寫一個方法，由于他們都引用了這個AA.js文件，想在這邊在AA.js后執(zhí)行一個函數(shù)自動把jq庫引入，于是想到引入js文件方法：

 
getScript : function(s,call){ 
var el = UI.DC('script'); 
        if (call) { 
            el.onload =el.onreadystatechange=call; 
        } 
        UI.A(el,'type','text/javascript'); 
        UI.A(el,'src',s); 
        UI.GT(document,'head')[0].appendChild(el); 
    } 
/*UI.DC為創(chuàng)建對象，UI.A為屬性賦值，GT為getElementsByTagName的簡寫*/ 

于是這樣執(zhí)行UI.getScript("js/jquery/jquery-1.4.2.min.js",function(){alert("載入成功")});

結果在IE和ff下確實彈出了載入成功，可當我再HTML中使用jq的時候在IE下怎么都執(zhí)行不了，不斷刷新偶爾還能執(zhí)行，放在服務器上和在客戶端的靜態(tài)頁面也有差別，但在火狐下沒有問題.........

于是想到是不是jq文件在載入的時候和html載入是并行的，當jq載入成功之前HTML文件已經執(zhí)行，于是在html的body結束之時添加

復制代碼代碼如下:

 
<script> 
alert("html前執(zhí)行") 
</script> 

執(zhí)行發(fā)現(xiàn)確實是先彈出hmtl前執(zhí)行，后彈出載入成功。在火狐下也是這樣。上傳到服務器上時感覺火狐的彈出會同時出現(xiàn).....

于是開始不解，到底怎么設置才能確保jq文件載入完之后才能執(zhí)行html body中的東東，怎么像在head中添加<script type="text/javascript" src="js/jquery.js"></script>那樣引入文件..
思索總想到以前瀏覽一個頁面是他用了一個loading文件引入許多js文件，在html中就可使用這些引入的文件函數(shù)，搜索查到了這個js文件內容為：

復制代碼代碼如下:

 
var Collapsar = { 
Version: '0.0.1', 
require: function(libraryName) { 
// inserting via DOM fails in Safari 2.0, so brute force approach 
document.write('<script type="text/javascript" src="'+libraryName+'"></script>'); 
}, 
load: function() { 
if((typeof Prototype=='undefined') || 
(typeof Element == 'undefined') || 
(typeof Element.Methods=='undefined') || 
parseFloat(Prototype.Version.split(".")[0] + "." + 
Prototype.Version.split(".")[1]) < 1.5) 
throw("The Prototype JavaScript framework 1.5.0+ is required"); 

$A(document.getElementsByTagName("script")).findAll( function(s) { 
return (s.src && s.src.match(/loader\.js(\?.*)?$/)) 
}).each( function(s) { 
var path = s.src.replace(/loader\.js(\?.*)?$/,''); 
var includes = s.src.match(/\?.*load=([a-z,]*)/); 
(includes ? includes[1] : "").split(',').each( 
function(include) { 
Collapsar.require(path+include+'.js') }); 
}); 
} 
} 
Collapsar.load(); 

調用的時候為<script type="text/javascript" src="js/loder.js?load=jquery,...,..."></script>這樣等號后面的文件都可引入，其實是這句在關鍵的作用 document.write('<script type="text/javascript" src="'+libraryName+'"></script>');
剛看到有些疑惑write方法不是像文檔內添加內容嗎，內容應該在body標簽中出現(xiàn)啊，實驗發(fā)現(xiàn)如果是字符串確實出現(xiàn)在文檔內，當如是script link等標簽就出現(xiàn)在了head內;那在head中添加引用js文件難道和直接在head中一樣載入他們之后才執(zhí)行body中的內容....他載入和上面添加script有什么區(qū)別啊........

實驗：在AA.js中添加：

UI.getsc=(function(){
document.write('<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>');
})()

讓他自動執(zhí)行，在body的第一行就引入jq的方法，實驗確實成功了，在IE和在ff一樣都可執(zhí)行;
有時間繼續(xù)實驗...................

您可能感興趣的文章: