传智播客旗下品牌:  黑马程序员  |  博学谷  |  传智专修学院

改变中国IT教育,我们正在行动     全国咨询热线:400-618-4000

Web前端开发培训之网页前端学习总结(二)

更新时间:2016年12月05日14时50分 来源:传智播客web前端开发培训学院

三、技巧
1. 写js效果时一定要注意先分析好效果的行为,尽量用最简单通用性的代码。分析步骤可以是1.先把要实现的功能一步一步的写在纸上(即自然语言)2.再根据自然语言翻译成机器语言,用jquery写的代码一定要注意代码的可移植性、通用性。

2. 组织css,推荐使用base、common、page三层,base可以分为两大部分:css reset(覆盖掉浏览器提供的默认样式,可以参考:developer.yahoo.com/yui/)和通用原子类。(疑问:如果使用css reset后,那么之前的要求的标签语义化是否就没有意义了呢?因为所有语义化的标签默认样式都被reset了),不用*{ margin:0; padding:0;}的原因是因为“*”表示所有标签,其中包含大量生僻标签和为向前兼容而留下来的淘汰标签。

3. 把多个按钮放在一张图定位时,最好两个按钮之间隔一个像素,要不然有些版本的chrome可能解析不准确。

4. .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } 注意如果用了浮动,一定要清除浮动,深刻理解浮动的作用很重要。 在层里调整文字的垂直位置可以用1.lineheight2.padding。 注意模块化布局,增加代码的重用性,尽量只给最里层的内容层设高度,一般如果高度不确定的都设置成自适应,这样有助于内容拉伸,也便于修改模块的高度。 大框架,尽量简单的分,比如左右结构最好就设置成左右,没必要搞成左中右。 尽量不要在html代码里插入img,把他设置在结构里,然后用css插入图片。

5. jquery编程习惯可以参考:1.把所有用$()选中的元素保存在前缀为$的js变量里2.每个函数结束都要用return false 结束掉函数。
6. 布局前,先构思好整个页面的结构,一个好的结构要便于维护,加载更快,布局时也更容易。布局时,稳扎稳打,一步步弄好后(既没有用hack,也没有兼容性问题了),再布局下一个板块。 布局一个带js效果的页面,要先把效果图上的页面效果,完整布局好后,再考虑加动作的事情。并且一定要分析好页面的结构,以最少的标签,以及标签要与所放内容对应来布局。

7. jquery代码一般要用$(document).ready(function(){}确保页面dom准备好了再进行js操作。 页面按钮点击时边框变红,点击完后边框变蓝可以用outline:none;解决。 有动画的层最好设置overflow:hidden以免层里面的内容在外层宽高改变时撑出层外。

8. 写js效果时一定要注意先分析好效果的行为,尽量用最简单通用性的代码。分析步骤可以是1.先把要实现的功能一步一步的写在纸上(即自然语言)2.再根据自然语言翻译成机器语言,用jquery写的代码一定要注意代码的可移植性、通用性。

9. a标签的四种状态的排序问题,可以用love hate 原则,即l(link)ov(visited)e h(hover)a(active)te,顺序写错可能出现点击后hover样式失效。

10. 一般情况下,建议尽量使用class,少用id。

11. css编码风格:多行式和一行式。 多行式:可读性强,但使行数过多,编辑需要来回拖动滚动条,影响开发速度,增大css文件大小。 一行式:可读性稍差,有效减小css文件行数,有利于提高开发速度,同时减小css文件大小。 一行式逐渐成为主流。

12. css sprite:即把多个甚至所有的图标都放在一张图里,然后用背景定位来控制图标的显示。 使用难点:图片如何排列能够紧凑,同时保证不会影响扩展性。 优点:减少http请求数,减小服务器压力。 缺点:影响开发速度,大大降低了可维护性。 是否使用取决于网站流量,对于流量不大的网站来说,css sprite带来的好处并不明显,而付出的代价是巨大的,不划算。

13. 定义有:hover伪类的样式时,多定义一个它的hover类,这样有助于js调用生成current的效果,如定义btn{xxx},btn:hover,btn_hover{xxx}。

14. 低权重原则避免滥用子选择器(即类似#test span这样的选择符)。 css的选择符是有权重的,当不同选择符的样式设置有冲突时,会采用权重高的选择符设置的样式。 规则:html标签的权重是1,class的权重是10,id的权重是100.如“div em”的权重是1+1=2,“strong.demo”的权重是10+1=11,“#test.red”的权重是100+10=110. 如果css选择符权重相同,那么样式会遵循就近原则,哪个选择符最后定义,就采用哪个选择符的样式,与挂class名的先后顺序无关。 为了保证样式容易被覆盖,提供可维护性,css选择符需保证权重尽可能低。

15. 如果不确定模块的上下margin特别稳定,最好不要将它写到模块的类里,而是使用类的组合,单独为上下margin挂用于边距的原子类(例如mt10、mt20)。模块最好不要混用margintop和marginbottom,统一使用margintop或marginbottom。

16. 拆分模块技巧:1.模块与模块之间尽量不要包含相同的部分,如果有相同部分,应将它们提取出来,拆分成一个独立的模块。2.模块应在保证数量尽可能少的原则下,做到尽可能简单,以提高重用性。

17. 触发hasLayout一般情况用zoom:1就行了,但当用dhtml的时候,可能失效,这时用position:relative就行了。
18. 布局最基本的元素:块级元素(常见:div,p,form,ul,ol,li)和行内元素(span,strong,em)等。 块级元素:独占一行,默认情况下,其宽度自动填满父元素宽度(即使设置了宽带也会独占一行)。 行内元素:不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化(没有上下边距,只有左右边距)。 可以用display:inline/block,切换。

19. ie6、7不支持display:inline-block,但行内元素可以用此属性触发hasLayout(是ie浏览器为解析盒模型而设计的一个专有属性,它的设计初衷是用于块级元素的,如果触发行内元素的hasLayout,就会让行内元素拥有一些块级元素的特性),从而模拟出inline-block的效果,然后再用*vertical-align控制文字的垂直对齐。但这样做用hack,所以不推荐。

20. 排列地板砖一样的布局的元素时,尽量用给每个元素用相同的类来实现,如果最左边的元素间距和右边的有区别可以给所有元素套一个父层,然后设置其右边距为负就行了。

21. 如果一个类中有些部分会经常变化,我们可以将这个经常变化的部分抽离出来单独设成一个类,然后用组合来实现最终样式。

22. 可以用(function(){})(),这样的匿名函数来避免全局变量冲突。让js不产生冲突,需要避免全局变量的泛滥,合理使用命名空间以及为代码添加必要的注释。可以定义一个全局对象,然后用其属性来定义全局变量,同时结合命名空间(即类似,GLOBAL.A.xx,和GLOBAL.B.xx之类的)。

四、常见问题
1. ie只有a支持hover,并且注意a里要有href才行。

2. IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法加上display:inline

3. 如果存在文字在层居中的问题,水平方向可以用text-align代替,垂直方向可以用line-height来控制,如果只是控制上边距,就用padding-top。这样可以避免在ie6上的某些不必要的错误。

4. ajax传参数时,汉字一定要用encodeURIComponent(string),编码一下,要不然可能变成乱码中文在ie6里。

5. ie6下select元素会以窗口形式显示的,这是ie6的一个bug,所以当你设置一层为相对或绝对定位时,select仍然会浮在那个层之上。 解决方法,用一个和那个层同样大小的iframe放在test下面,select上面,用iframe遮住select。



最后推荐两本书吧,上面很多技巧都是来自于里面《css权威指南》、《如何编写高质量的代码》,有些是实际工作中自己的一些心得,前辈的指点。还有一句话:“你对所学东西理解深度,决定了你所站的高度。”



本文版权归传智播客web前端开发学院所有,欢迎转载,转载请注明作者出处,谢谢!
作者:传智播客web前端培训学院;
首发:http://www.itcast.cn/web/