小谈前端代码的一些问题

最近在做一个项目，已经到了后期，通常我们在后期主要是做一些代码优化的工作，本文主要谈谈前端的代码优化方面的一些问题，分为CSS篇和JS篇

一、CSS篇

　　1）内联元素inline，inline元素对一些Css不起作用，例如margin-top，margin-bottom，vertical-align，overflow，height，width如果是内联元素，然后设置这些属性，是根本不会起到作用的，因为内联元素本身是没有高度的。

　　类似这样的代码: <span style="margin-top:10px; height:100;width:100"><img src="xxx.png" width="100" height="100"></span> 

　　2）block 元素，块状元素 ，顾名思义，就是一个块状的，有同学给加了一个属性 width:100%，我觉得这个是不合理的，本身就是100%，何必还要添加呢。

这个类型的元素对垂直 属性 vertical-align 也是不起作用的。

　　3）设置了float或者position:absolute 的元素 也是不支持 vertical-align和margin 的，因为他们都脱离了文档，所以不可能还能垂直居中的。

　　4）触发haslayout 属性，一般都用zoom:1来触发这个属性，但是如果有高度或者宽度 ，同样就触发了这个haslayout属性，就不需要这个zoom:1了。同样有

很多同学写成这样的 <span style="display:inline-block;*display:inline,*zoom:1"></span> 其实后面的这个*display:inline,*zoom:1可以去掉，有这个display：inline-block一样可以起到这个作用，在ie6,7下触发了haslayout属性。

二、JS篇

　　1）对一些常见的有规律的函数的处理方式，通过数组这种形式来统一处理

　　2）有判断多种情况的，基于值的形式，出现不同分支的，一般用三目来处理

　　3）赋值的形式，有很多不同的值形式不同，通过正则表达式来处理 tangram里面有baidu.format 函数来处理

　　4）判断是否存在然后执行，通过 && 符号来 判断

　　5）基于数据的开发，通常写成小数据模板的形式，然后render数据

　　6）多用异步接口去数据，对事件的绑定，用class的形式要优于id的绑定形式，因为id可能并没有，从而导致报错。

　　7）拼字符串 通过数组join() 的形式

　　8）循环数组的时候，开始得到数组的长度，不要在每次都获取

　　9）数组赋值 arr[l] = ele 

三、我是怎么写CSS，调试js的

　　1）拿到PSD，在标准模式下，在chrome，firefox下调整成和设计图一模一样的

　　2）在ie6下看效果，调整一些css，会写一些hack

　　3）在ie7，8下看效果，如果特殊情况，特殊处理

　　4）调试js，在chrome的console下调试，搜索关键字，单步跟踪，都可以找到问题的。