原生JS動態載入JS、CSS檔案及程式碼指令碼

DOM readyState屬性共5中狀態

1. uninitialized：初始狀態
2. loading：document載入中
3. loaded: document載入完成
4. interactive：已載入並可與使用者互動，但還需要載入圖片等其他資源
5. complete：全部資源載入完成

---

DOM文件載入順序：

1. 解析HTML結構
2. 載入外部指令碼和樣式表檔案(loading)
3. 解析並執行指令碼
4. DOM樹構建完成（readyState：interactive）
5. 載入外部資原始檔（圖片等）
6. 頁面載入完成（readyState：complete）

---

動態載入公共方法

var DynamciLoadUtil = {
    // 動態載入外部js檔案，並執行回撥
    loadJS: function(url, callback){
        var script = document.createElement(`script`);
        script.type = `text/javascript`;
        script.src = url;
        if(typeof callback == `function`){
            script.onload = script.onreadystatechange = function(){
                if(!this.readyState || this.readyState == `loaded`
                                    || this.readyState == `complete`){
                    callback();
                    script.onload = script.onreadystatechange = null;
                }
            }
        }
        document.body.appendChild(script);
        //document.getElementsByTagName(`body`)[0].appendChild(script);
    },
    // 行內方式動態載入js程式碼
    loadJSText: function(jsText){
        var script = document.createElement(`script`);
        script.type = `text/javascript`;
        try {
            // Firefox,Safari,Chrome,Opera支援
            script.appendChild(document.createTextNode(jsText));
        } catch(ex){
            // IE早期的瀏覽器，需要使用script的text屬性來指定js程式碼
            script.text = jsText;
        }
        document.body.appendChild(script);
    },
    // 動態載入外部CSS檔案
    loadCSS:function(url){
        var link = document.createElement(`link`);
        link.rel = `stylesheet`;
        link.type = `text/css`;
        link.url = url;
        document.getElementsByTagName(`head`)[0].appendChild(link);
    },
    // 使用<style>標籤包含嵌入式CSS
    loadCSSText: function(cssText){
        var style = document.createElement(`style`);
        style.type = `text/css`;
        try{
            // Firefox,Safari,Chrome,Opera支援
            style.appendChild(document.createTextNode(cssText));
        } catch(ex){
            // IE早期瀏覽器，需要使用style元素的styleSheet屬性的cssText屬性
            style.styleSheet.cssText = cssText;
        }
    }
}