html如何引用公用的JS和CSS

html如何引用公用的JS和CSS

問題：

         每個頁面都要用到很多插件，如jq，hui，js-sdk等，如果每個頁面都要寫一次的話，太麻煩了，代碼很冗餘。

解決: 

        1，將公共的js和css寫在單個文件(js和css可在進行拆分)，這裏就一個文件 common.js

document.write('<!-----------  公共js和css start----------->');
document.write('' +
    '<script type="text/javascript" src="/zvideo/resources/hui/js/hui.js"></script>\n' +
    '<script type="text/javascript" src="/zvideo/resources/hui/js/hui-form.js"></script>\n' +
    '<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>\n' +
    '<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>\n' +
    '<script type="text/javascript" src="/zvideo/resources/common/vue.min.js"></script>\n' +
    '<!--<script type="text/javascript" src="/zvideo/resources/layer_mobile/layer.js"></script>-->\n' +
    '<script type="text/javascript" src="/zvideo/resources/hui/js/hui-refresh-load-more.js"></script>\n' +
    '<script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>' +
    '');
document.write('<!-----------  公共js和css end----------->');

        2，將自定義的js代碼放到一個文件（如果沒有自定義js可以忽略）dvideo.js

/**
 * 工具類對象
 * @type {{}}
 */
var dv = {};

dv.checkLogin=function(){
    var user = localStorage.user;
    if (!user){
        window.location = "/zvideo/html/user/login.html";
    }
}

/**
 * 檢驗用戶手機號
 */
dv.checkPhone = function(phone){
    //手機號正則
    var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
    return phoneReg.test(phone);
}

/**
 * 從地址欄裏獲取參數
 */
dv.getUrlParam = function(name) {
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //構造一個含有目標參數的正則表達式對象
    var r = window.location.search.substr(1).match(reg);  //匹配目標參數
    if (r!=null) return unescape(r[2]); return null; //返回參數值
}

3,將引入代碼加到html頁面裏即可。(因爲裏面有很多地方調用到上面的插件方法，所以要先加載common.js)

<script type="text/javascript" src="/zvideo/resources/common/common.js"></script>
<script type="text/javascript" src="/zvideo/resources/common/dvideo.js"></script>

搞定！！

結果: