新闻中心> 文章详情

南京Web前端培训分享Web前端开发的一些技巧

2017年03月17日

  Web前端开发实践其实就是一个学习的过程。每个做前端开发的朋友都或多或少有一些个人的开发经验。这里面包括代码方面的,技巧方面的,甚至是页面布局样式方面的,今天,南京万和Web前端培训和大家分享一些Web前端开发的技巧,希望有对大家有所帮助。


  一.关于编辑器


  推荐webstorm,绝对的神器。不要用Dreamweaver了,个人觉得它所谓的所见即所得其实没什么用,因为根本就不准,代码提示也不人性话,不方便。而Webstorm至少有以下几个好处:


  1.可以分屏,左右同时编辑两个文件,比如左边编辑html,右边编辑它的css/js。


  2.代码提示很人性话,分级结构也很清晰。


  3.方便查找,如ctrl+点击类名,就可自动定位到该css样式。


  4.支持自定义模版,这样可以快速完成一些经常用到的代码。


  5.支持个性化主题,字体等。


  6.非常强大的插件库,任由自已选择。


  7.ctrl+/,注释所选区域。


  另外sublime编辑器也不错,简单灵活轻量级,支持代码自动完成、代码高亮、快速生成,以及更多好用的插件,也可以配置scss。


  二.关于布局


  提到布局最头疼就是浏览器兼容性,现在才发现其实很多兼容性是很容易避免的,只要做到你对自己的每一句代码都知道它的意义和作用,还有避免用一些有兼容性的样式属性就行了,很多情况都可以不用hack,一样能实现多浏览器兼容。


  1.不要用hack,一定有更好的解决办法。很多情况都是因为代码结构不够好才会出现兼容性问题。


  2.思考如何用最少的标签及属性实现页面。


  3.理解结构,表现,行为分离的意义。


  4.布局前一定要先分析页面结构,磨刀不误砍柴工,分析怎么用更好的办法实现,理清思路后,再切图写代码。


  5.深刻理解类的概念,注重归类元素,多总结,保持代码风格(包括前后代码的空格位置、多少,以及命名风格)严格一致并且尽量简洁。


  6.多用组合,少用继承。


  7.命名空间:驼峰命名法用于区别不同单词,划线用于表明从属关系。


  8.低权重原则------避免滥用子选择器(即类似#testspan这样的选择符)。


  三.关于技巧


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


  2.组织css。推荐使用base、common、page三层,base可以分为两大部分:cssreset(覆盖掉浏览器提供的默认样式)和通用原子类。


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


  4.jquery编程习惯可以参考:1.把所有用$()选中的元素保存在前缀为$的js变量里。2.每个函数结束都要用return false结束掉函数。


  5.布局前,先构思好整个页面的结构,一个好的结构要便于维护,加载更快,布局时也更容易。布局时,一步步弄好后(既没有用hack,也没有兼容性问题了),再布局下一个板块。布局一个带js效果的页面,要先把效果图上的页面效果,完整布局好后,再考虑加动作的事情。


  6.jquery代码一般要用$(document).ready(function(){}确保页面dom准备好了再进行js操作。


  7. 用jquery写的代码一定要注意代码的可移植性、通用性。


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


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


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


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


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


  13.低权重原则避免滥用子选择器(即类似#testspan这样的选择符)。css的选择符是有权重的,当不同选择符的样式设置有冲突时,会采用权重高的选择符设置的样式。为了保证样式容易被覆盖,提供可维护性,css选择符需保证权重尽可能低。


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


  15.触发hasLayout一般情况用zoom:1就行了,但当用dhtml的时候,可能失效,这时用position:relative就行了。


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


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


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


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


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


  以上20个技巧是南京万和Web前端培训分享的一些总结,想学Web前端的小伙伴,欢迎前来免费试听哦!

上一篇下一篇
按时发顺丰

技术交流群

Java大数据交流群560819979    加入
Python技术交流群595083299    加入
Oracle技术交流群595119011    加入
Web前端技术交流群604697610    加入
Huawei技术交流群482919361    加入
Redhat技术交流群587875348    加入
UI设计技术交流群511649801    加入
Cisco技术交流群596886705    加入
IT运维技术交流群605888381    加入