JavaScript學習10：動態載入指令碼和樣式

連江偉發表於2015-06-27
JavaScript指令碼
       我們在寫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>標籤，一種是<style>標籤。因此給出兩種方式的程式碼示例，來說明如何動態載入樣式。
       使用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>
       小結一下：記得老師曾經反覆強調，如無必要，勿增實體。同樣在程式設計的過程中也一樣，我們在程式啟動時，就載入很多的東西，勢必會影響程式的效能，因此我們要學會在需要的時候，一點一點的進行新增，有點裝飾模式的趕腳，同時也是一個靈活性的體現，雖然是一個小的知識點，但是運用好了，是有大用處的。

相關文章