关于前台开发的一些开发技巧_前台开发的一些小技巧

作者：人工智能uu | 2024-07-31 04:49:35

踩

前台开发的一些小技巧

开发前台的有一些时间，总结一些小技巧，客官若已知晓，请别见笑。

一、简单应用：

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"); //返回系统当前时间

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/人工智能uu/article/detail/907089