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>
搞定!!
结果: