動態載入js css 外掛程式

標籤：logs   模組化   使用   microsoft   解決   else   .com   nts   增強   

簡介      

      動態載入js，css在現在以及將來肯定是很重要的。目前來看前端代碼編寫的業務量已經遠遠超過後端編寫的。隨著對使用者體驗度逐漸增強，前端業務複雜，載入速度變得很慢很慢。為瞭解決這個問題，目前出現的兩個前端模組載入器為require.js與sea.js，這兩款模組載入器都不錯。但是呢，有時候我僅僅需要的只是動態載入一個js，不需要把代碼模組化，那我們只能自己手寫一個載入函數。

簡單的載入js

/** * HTML動態載入js * @path {String} src地址必須帶有尾碼名.js * */function addJs(path){       var head = document.getElementsByTagName(‘head‘)[0];       var script = document.createElement(‘script‘);       script.src = path;       script.type = ‘text/javascript‘;       head.appendChild(script);}

這段代碼已經滿足我們需求，動態載入js。隨之問題又來了，假設某一個前端小白不知道你載入了沒有，又載入了一次，這樣就是浪費流量，時間，還有可能造成一些問題。現在我來最佳化一下。

次佳的載入js

/** * HTML動態載入js * @path {String} src地址必須帶有尾碼名.js * */var cache=[];function addJs(path){    var flag=0;//檢查是否載入的狀態    for(var i=cache.length;i--;){        cache[i]==path?flag=1:flag=0;    }    if(flag){//如果已經載入則不載入            return;    }    var head = document.getElementsByTagName(‘head‘)[0];    var script = document.createElement(‘script‘);    script.src = path;    script.type = ‘text/javascript‘;    head.appendChild(script);    cache.push(path);//把載入過的存起來}

一天線上又出現bug了，結果一看是因為動態載入的js導致，因為只載入了，由於載入的js檔案過大，導致還沒載入成功，下邊就開始使用了。下面在完善一下。

不錯的載入js

/** * HTML動態載入js * @path {String} src地址必須帶有尾碼名.js * @callback {Function} 載入成功的回掉函數 * */var cache=[];function addJs(path,callback){    var flag=0;//檢查是否載入的狀態    for(var i=cache.length;i--;){        cache[i]==path?flag=1:flag=0;    }    if(flag){//如果已經載入則不載入            return;    }    var head = document.getElementsByTagName(‘head‘)[0];    var script = document.createElement(‘script‘);    script.src = path;    script.type = ‘text/javascript‘;    head.appendChild(script);    script.onload = script.onreadystatechange = function() {/*判斷是否載入成功*/    if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) {        script.onload = script.onreadystatechange = null;            callback();         }    };    cache.push(path);//把載入過的存起來}

可以看出現在稍微完善一點，一天技術總監說，首頁載入太慢了，js,css都要動態載入。這下我們還需要更改代碼，再次最佳化一下。

推薦使用的動態載入js,css

var addStyleJs = (function(dom) {    var cache = {}, /*緩衝載入過的css或者js*/    funct;    /**     * HTML動態載入css或者js     * @path {String} src 或 link 地址必須帶有尾碼名.js或者.css     * @callback {Function} 載入成功的回掉函數     * */    funct = function(path, callback) {        if(!path) { /*檢查路徑是否為空白*/            throw new Error("請輸入path路徑!");        };        var fn=Object.prototype.toString.call(callback)=="[object Function]"?callback:function(){};        if(".js" == path.substr(-3)) { /*檢查路徑尾碼名是否為.js*/            addJs(path, fn);        } else if(".css" == path.substr(-4)) { /*檢查路徑尾碼名是否為.css*/            addCss(path, fn);        } else {            throw new Error(‘請輸入正確的path路徑!‘);        }    };    /**     * HTML 動態添加 CSS     * @path {String}  link 地址必須帶有尾碼名.css     * @callback {Function} 載入成功的回掉函數     * */    function addCss(path, callback) {        if(!checkcache(path)) { /*檢查是否載入過*/            var head = dom.getElementsByTagName(‘head‘)[0];            var link = dom.createElement(‘link‘);            link.href = path;            link.rel = ‘stylesheet‘;            link.type = ‘text/css‘;            head.appendChild(link); /*添加到HTML中*/            link.onload = link.onreadystatechange = function() { /*判斷是否載入成功*/                if(!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {                    link.onload = link.onreadystatechange = null;                    callback();                }            };            cache[path] = 1; /*儲存載入過的css路徑,值設為1*/        }    };    /**     * HTML動態載入js     * @path {String} src 地址必須帶有尾碼名.js     * @callback {Function} 載入成功的回掉函數     * */    function addJs(path, callback) {        if(!checkcache(path)) { /*檢查是否載入過*/            var head = dom.getElementsByTagName(‘head‘)[0];            var script = dom.createElement(‘script‘);            script.src = path;            script.type = ‘text/javascript‘;            head.appendChild(script); /*添加到HTML中*/            script.onload = script.onreadystatechange = function() { /*判斷是否載入成功*/                if(!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {                    script.onload = script.onreadystatechange = null;                    callback();                }            };            cache[path] = 1; /*儲存載入過的js路徑,值設為1*/        }    };    /**     * 檢查是否載入     * @path {String} 路徑     * */    function checkcache(path) {        if(cache[path]) { /*判斷是否載入過的js路徑*/            return true;        } else {            return false;            }    };    return funct;}(document));

 

總結

       動態載入js與動態載入css在日常開發中也許會不常用，但是對於我們來說這是必須要會的。代碼也許學幾天就會寫，但是寫一段高品質的代碼則需要你常常寫，常常總結，思考。歡迎大家與我一同進步。如有問題請大家指出哦！

 

動態載入js css 外掛程式