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

JavaScript學習10：動態載入指令碼和樣式，javascript指令碼
       我們在寫Web頁面的時候，需要引入很多的JavaScript指令檔和CSS樣式檔案，尤其是在網站需求量很大的時候，指令碼的需求量也隨之變大，這樣一來，網站的效能就會大打折扣，因此就出現了動態載入的概念，即在需要的時候才去載入對應的指令碼和樣式。下面我們就來看看如何?動態載入。      動態指令碼：       先來看一個動態載入js檔案的程式碼範例：

//動態載入JSvar 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的樣本：

//動態執行JSvar 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;">//動態執行linkvar 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;">//動態執行stylevar 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){//如果是非IEif(sheet.insertRule){sheet.insertRule(selectorText+"{"+cssText+"}",position);}else if(sheet.addRule){ //如果是IEsheet.addRule(selectorText,cssText,position);}}</span>

       小結一下：記得老師曾經反覆強調，如無必要，勿增實體。同樣在程式設計的過程中也一樣，我們在程式啟動時，就載入很多的東西，勢必會影響程式的效能，因此我們要學會在需要的時候，一點一點的進行添加，有點裝飾模式的趕腳，同時也是一個靈活性的體現，雖然是一個小的知識點，但是運用好了，是有大用處的。