js動態載入 js檔案和 css檔案

---

        今天寫廣告管理功能的時候, 需要不依賴jquery, 發現自己寫載入css的方法還是比較麻煩的, 下面的今天寫的, 測試通過IE6-9, chrome, ff, 其他沒測, 估計測試的也不全面, 有錯誤歡迎指出

var thinkHelper = {};

// 獲取文件的head物件
thinkHelper.head = document.getElementsByTagName('head')[0];

// 空方法, 用於初始化和釋放一些特定的函式, 如獲取js成功後呼叫的函式
thinkHelper.emptyFunc = function() {
    // 什麼都不做
};
/**
 * 作用: 獲取和載入js檔案函式,
 * @param {string} scriptUrl 要加在的js地址
 * @param {bool} cache 是否快取(預設不快取false)
 * @returns {success:function(){ }, error: function(){ }}
 * 使用方法: 
 *      thinkHelper.getScript(url).success(function(){
 *          // 成功執行
 *      }).error(function(){
 *          // 失敗執行
 *      });
 */
thinkHelper.getScript = function(scriptUrl, cache) {
    var cache = arguments[1] ? arguments[1] : false;
    var success = thinkHelper.emptyFunc;
    var error = thinkHelper.emptyFunc;
    var script = document.createElement('script');
    script.onload = function() {
        // 載入成功
        success();
        success = thinkHelper.emptyFunc;
    };
    script.onreadystatechange = function() {
        // ie9一下的載入成功判斷
        if (this.readyState && this.readyState === 'loaded') {
            success();
            success = thinkHelper.emptyFunc;
        }
    };
    script.onerror = function() {
        // 載入失敗
        error();
        error = thinkHelper.emptyFunc;
    };
    script.type = 'text/javascript';
    if (!cache) {
        // 如果不快取就在url後新增隨機數
        scriptUrl = thinkHelper.addQueryParams(scriptUrl, {'_t': Math.random()});
    }
    script.src = scriptUrl;
    thinkHelper.head.appendChild(script);
    var result = {
        success: function(func) {
            success = func;
            return result;
        },
        error: function(func) {
            error = func;
            return result;
        }
    };
    return result;
};

/**
 * 作用: 載入css檔案助手函式
 * @param {string} cssUrl css檔案路徑
 * @param {bool} cache 是否快取(預設false, 不快取)
 * @returns {undefined}
 */
thinkHelper.getStyle = function(cssUrl, cache) {
    var cache = arguments[1] ? arguments[1] : false;
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    if (!cache) {
        cssUrl = thinkHelper.addQueryParams(cssUrl, {'_t': Math.random()});
    }
    link.href = cssUrl;
    thinkHelper.head.appendChild(link);
};
/**
 * 作用: 給文件追加css程式碼
 * @param {string} cssString css程式碼
 * @returns {undefined}
 */
thinkHelper.addCssString = function(cssString) {
    var style = document.createElement("style");
    style.setAttribute("type", "text/css");
    if (style.styleSheet) {
        style.styleSheet.cssText = cssString;
    } else {
        var cssText = document.createTextNode(cssString);
        style.appendChild(cssText);
    }

    var heads = document.getElementsByTagName("head");
    if (heads.length) {
        heads[0].appendChild(style);
    } else {
        document.documentElement.appendChild(style);
    }
};

/**
 * 作用: 擴充套件url的引數
 * @param {string} url 需要擴充套件引數的地址
 * @param {json} obj 要新增到url中的引數
 * @returns {String} 新增引數後的url字串
 */
thinkHelper.addQueryParams = function(url, obj) {
    var joinChar = (url.indexOf('?') === -1) ? '?' : '&';
    var arrParams = [];
    for (var key in obj) {
        arrParams.push(key + '=' + encodeURIComponent(obj[key]));
    }
    return url + joinChar + arrParams.join('&');
};

/**
 * 作用: 傳送jsonp請求
 * @param {string} url 請求地址
 * @param {function} success 成功返回執行的處理函式
 * @param {function} error 失敗執行的處理函式
 * @returns {undefined}
 */
thinkHelper.jsonp = function(url, success, error) {
    var error = error ? error : thinkHelper.emptyFunc;
    var callback = 'callback_' + Math.random().toString().replace('.', '_');
    window[callback] = success;
    url = thinkHelper.addQueryParams(url, {callback: callback});
    thinkHelper.getScript(url).error(error);
};