首页 » 技术分享 » 在淘宝里,他们总结的一些前端Tips

在淘宝里,他们总结的一些前端Tips

 

1.【约定】文件命名全部都用小写和下划线,样式命名全部使用小写和连接符,JS的钩子使用“J_HiTao”

2.【HTML】需要为html元素添加自定义属性的时候,首先要考虑下有没有默认的已有的合适标签去设置,如果没有,可以使用以”data-“为前缀来添加自定义属性,避免使用”data:”

3.【约定】文件要求编码必须为GBK、GB2312或者GB18030

4.【HTML】html代码要求所有的标签、属性都是用小写字母,属性值使用双引号括起来,使用js插入html代码的时候也要注意保持一致。

3.8 - 3.12

5.【JS】在书写代码时,应该尽量在函数开始地方统一进行变量声明,变量名注意语义化,一般使用名词来命名,不要在意名字的长度,压缩后会替换为简短的变量名的。

6.【JS】浮点数的计算过程是:先将浮点数转化为二进制,然后进行计算,再转化为十进制,这样子会有少许的误差,所以为了避免这种误差我们可先将浮点数乘以10的n次方,转化为整数计算,然后再转化为小数。

7.【Firefox】Firefox中将同一域名下不同端口的访问也视为跨域操作。

8.【Mobile】强制WEB App在iPhone中全屏模式运行 <meta name=“viewport” content=“width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /> <meta name=“apple-mobile-web-app-capable” content=“yes” /> <meta names=“apple-mobile-web-app-status-bar-style” content=“black-translucent” />(王卓)

9.【Mobile】移动设备上的CSS媒体查询应用: img {

margin:0 0 10px 10px;
float:right;

} @media all and (max-width: 480px) {

img {
  margin:10px auto;
  float:none;
  display:block;
}

} @media all and (max-width: 240px) {

img {
  display:none;
}

} 释义:浏览器中的图片在屏幕大于480px时会向右浮动,当屏幕小于480px时图片display:block并居中,屏幕小于240px非常小时,直接让图片消失掉 (Opera/Safari3 only) (王卓)

3.15-3.19

10.【JS】Date()作为普通函数被调用时,Date()将忽略传递给它的所有参数,返回当前日期和事件的字符串标识。

11.【HTML】在页面中写button的时候,一定要记得加上button的type类型,否则,某些浏览器会将其认为是submit类型。

12.【JS】在绑定表单的提交事件时,如果button的type类型为submit时,要通过绑定form的submit事件,避免使用button的click事件,因为如果表单可以通过回车提交的话,绑定在button上的click事件是不会触发的。

13.【HTML】img对象alt和title的解析: alt:当照片不存在或者load错误时的提示; title:照片的tip说明。 在IE中如果没有定义title,alt也可以作为img的tip使用,但是在FF中,两者完全按照标准中的定义使用 结论:大家在定义img对象时,最后将alt和title对象都写全,保证在各种浏览器中都能正常使用(涵宇)

14.【JS】在使用form[name]的方式去取同一name的多个表单元素时,需要注意一点,如果有多个的话,返回的是一个数组,如果仅有一个的话直接返回这个元素而不是一个数组,所以大家在循环之前要先做判断,以免报错。

3.22 - 3.26

15.【JS】关于Degrading Script Tags,这是一种脚本文件加载完成后执行一段脚本的方法,由jQuery的作者John提出,不了解的可以看下作者的博客:http://ejohn.org/blog/degrading-script-tags/

16.【JS】有些浏览器对 try-catch-finally 的处理并不高效,所以把 catch 语句放在关键循环中将极大影响性能。如果可能,应在脚本中不频繁被调用的地方进行异常处理,或通过检查某种动作是否被支持来避免使用。

17.【JS】尽量向 setTimeout() 和 setInterval()传送函数名,而不要传送字串。setTimeout() 和 setInterval() 方法近似于 eval。如果传进参数是字符串,则在一段时间之后,会和 eval一样执行字符串值,当然其低效率也和 eval 一样。但这些方法也可以接受函数作为第一个参数。在一段时间后将调用此函数,但此函数可在编译时被解释和优化,也就是说会有更好的性能。

18.【CSS】经典的垂直问题中,img 的父容器如果 float 了,那么其 display table-cell 将失效,table-cell 只能在 display static 的时候有效,因此解决方案是给 img 再加个包装容器,原来的父容器 float,包装器 table-cell……(法海)

19.【编辑器】编辑器下的bug,选中字体背景色时,除了对gecko浏览器要对backColor替换成hiliteColor,opera下也有问题。设置背景色时需用hiliteColor~(子涯)

3.29 - 3.31

20.【JS】如果页面里只有div和script标签没有body,head什么的,而且div里面只有空格没有字符的话,这时候用document.getElementById(“”)获取不到div的引用(孙信宇)

21.【JS】字符串合并是比较慢的。+ 运算符并不管是否将结果保存在变量中。它会创建新 string 对象,并将结果赋给此对象;也许新对象会被赋给某个变量。下面是一个常见的字符串合并语句: a += 'x' + 'y'; 此代码首先创建临时string对象保存合并后的'xy'值,然后和a变量合并,最后将结果赋给a。下面的代码使用两条分开的命令,但每次都直接赋值给a ,因此不需要创建临时string对象。结果在大部分浏览器中,后者比前者快20%,而且消耗更少的内存: a += 'x'; a += 'y';

22.【JS】在设置元素样式时,应该尽量一次设定,避免多次设定,较少reflow,可以通过改变元素的class来达到目的。

转载自原文链接, 如需删除请联系管理员。

原文链接:在淘宝里,他们总结的一些前端Tips,转载请注明来源!

0