JavaScript學習10：動态載入腳本和樣式

       我們在寫Web頁面的時候，須要引入非常多的JavaScript腳本檔案和CSS樣式檔案，尤其是在站點需求量非常大的時候，腳本的需求量也随之變大，這樣一來，站點的性能就會大打折扣。是以就出現了動态載入的概念。即在須要的時候才去載入相應的腳本和樣式。以下我們就來看看怎樣實作動态載入。

      動态腳本：

       先來看一個動态載入js檔案的代碼示範樣例：

//動态載入JS
var flag=false ;
if(flag){
	loadScript('browserdetect.js');
}
function loadScript(url){
	var script =document.createElement('script');
	script.type='text/javascript';
	script.src=url;
	document.getElementsByTagName('head')[0].appendChild(script);
}      

       如此一來，我們僅僅需控制flag的值就能夠控制js腳本檔案是否載入到目前頁面中。

       再來看一個動态運作js的示範樣例：

//動态運作JS
var flag=true ;
if(flag){
	executeScript();
}
function executeScript(){
	var script =document.createElement('script');
	script.type='text/javascript';
	var text=document.createTextNode("alert('Lian')");
	script.appendChild(text);
	document.getElementsByTagName('head')[0].appendChild(script);
}      

      動态樣式

       我們肯定都對各種換膚功能司空見慣了，可是你肯定沒想過換膚是怎樣實作的。我也是學到這塊才恍然大悟。原來看起來蠻進階的換膚功能居然如此簡單：僅僅需換一個CSS樣式就可以。

那我們就來看看網頁的樣式是怎樣動态載入的。

       使用link标簽載入，和上面提到的動态載入js腳本沒什麼兩樣，不再多說。

<span style="font-size:18px;">//動态運作link
var flag=true;
if(flag){
	loadStyle('basic.css');
}
function loadStyle(url){
	var link=document.createElement('link');
	link.rel='stylesheet';
	link.type ='text/css';
	link.href=url;
	document.getElementsByTagName('head')[0].appendChild(link);
}</span>      

       比較麻煩點的是使用style來改變樣式，由于涉及相容性問題，是以在運作的時候，須要依據浏覽器支援的類型，選擇對應的函數來運作這個過程，看下代碼示範樣例

<span style="font-size:18px;">//動态運作style
var flag=true;
if(flag){
	var style=document.createElement('style');
	style.type='text/css';
	document.getElementsByTagName('head')[0].appendChild(style);
	insertRule(document.styleSheets[0],'#box','background:red',0);
}
function insertRule(sheet,selectorText,cssText,position){
	//假設是非IE
	if(sheet.insertRule){
		sheet.insertRule(selectorText+"{"+cssText+"}",position);	
	}else if(sheet.addRule){ //假設是IE
		sheet.addRule(selectorText,cssText,position);
	}
}</span>      

       小結一下：記得老師以前重複強調，如無必要。勿增實體。相同在程式設計的過程中也一樣，我們在程式啟動時。就載入非常多的東西，勢必會影響程式的性能。是以我們要學會在須要的時候，一點一點的進行加入。有點裝飾模式的趕腳。同一時候也是一個靈活性的展現。盡管是一個小的知識點，可是運用好了，是有大用處的。