快捷導(dǎo)航

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

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

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

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

復(fù)制代碼代碼如下:

 
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("載入成功")});

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

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

復(fù)制代碼代碼如下:

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

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

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

復(fù)制代碼代碼如下:

 
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(); 

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

實(shí)驗(yàn)：在AA.js中添加：

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

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

您可能感興趣的文章: