本文分享了前端开发中的一些实用技巧，包括兼容性优化、模块化编程、CSS样式命名规范、图片加载判断方法及日期格式转换。同时，介绍了文件上传优化、第三方图片加载检查、图片不存在判断以及前台日期格式化方法。
开发前台的有一些时间，总结一些小技巧，客官若已知晓，请别见笑。
1. 如果要兼容IE浏览器，在JS开发，请不要使用console进行调测，因为IE没有console。
2. 开发JS中，建议以模块进行书写，对同一模块的代码，可以使用:(function(){})();，这样子可以避免太多的全局变量，而且代码清晰可观。
3. CSS样式命名，推荐使用 xxx-xxx，代替xxx_xxx，因为IE对_下划线是识别特殊字符。
4. IE浏览器中，建议使用<!DOCTYPE html> 代替 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">，那么在CSS和JS应用中，就不会出现太多的兼容问题，而且允许你使用部分html5特性，如：localStorage、CSS3中:hover，:focus等，测试浏览器IE8。
5. 去掉IE链接、按钮等的虚线框，可在CSS样式中设置： a:focus{outline: 0;hide-focus: expression(this.hideFocus=true);} 测试谷歌、IE8.
二、复杂应用：
1. 在开发文件上传部分，考虑不刷新页面提交文件，目前最好的做法就是通过form表单提交指向对象(target属性)为iframe，然后JS去获取iframe里的后台返回的内容：
对于谷歌、火狐等浏览器是这种做法是没有问题，但是到了IE浏览器每次提交表单的时候总会弹出个保存框，经过百度，发现是由于后台在response设置了返回为application/json格式数据。
因此，如果你也遇到同等问题，请在后台代码修改response的设置为text/plain，这已经不是前台代码问题了。
2. 有时候网页需要加载一些第三方图片，但是你不知道这些图片是否存在，那么这时候就需要一个方法去判断图片是否存在，下面代码（SCUI.js框架已封装该方法）就可解决该问题：
/* imgSrc:图片路径 */
function imgExist(imgSrc){
var ImgObj = new Image();
ImgObj.src = imgSrc;
if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {
return true;
}
return false;
}
3. 前台日期格式转换方法，类似java中SimpleDateFormat.format，代码实例如下：
/* date: 显示的日期 format:格式 如：yy:MM:dd */
function formateDate(date,format){
var o = {
"M+" : date.getMonth()+1, //month
"d+" : date.getDate(), //month
"h+" : date.getHours(), //month
"s+" : date.getSeconds(), //month
"q+" : Math.floor((date.getMonth()+3)/3), //month
"S" : date.getMilliseconds()
}
if(/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(var k in o) {
if(new RegExp("("+ k +")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
}
}
return format;
}
/*调用例子*/
formate(new Date(), "yyyy-MM-dd hh:mm:sss"); //返回系统当前时间
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
