盘点常用的Web前端开发技巧

樵夫2021-12-15 16:14

  Web前端开发实践实际上是一个学习过程。每个做前端开发的朋友或多或少都有一些个人开发经验。这包括代码、技能,甚至页面布局风格。今天,小编列出以下总结,希望对您有所帮助。

盘点常用的Web前端开发技巧

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

  2、组织css。建议使用base、common、page三层,base可分为cssreset(覆盖浏览器提供的默认样式)和通用原子两部分。

  3、当将多个按钮放在一张图片中定位时,最好在两个按钮之间隔一个像素,否则某些版本的chrome可能不准确。

  4、jquery编程习惯可以参考:1、将所有用$()选择的元素保存在前缀为$的js变量中。2、每个函数的结尾都应该用returnfalse结束。

  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、cssprite:将多个甚至所有图标放在一张图片中,然后用背景定位控制图标的显示。使用难点:如何安排图片可以紧凑,同时保证不影响可扩展性。优点:减少http请求数,减少服务器压力。缺点:影响开发速度,大大降低可维护性。是否使用取决于网站流量。对于流量小的网站来说,cssprite带来的好处并不明显,成本巨大,不划算。

  12、定义如下:当hover伪类的样式时,多定义一个hover类,有助于js调用生成curent的效果,如定义btn{xx}、btn:hover、btn_hover{xx}。

  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,行内元素会有一些块级元素的特性),从而模拟ine-block的效果,然后用*vertical-align来控制文本的垂直对齐。但是这样做是hack,所以不推荐。

  18、在排列与地砖相同布局的元素时,尽量使用相同类别的每个元素。如果最左边的元素间距与右边的元素间距不同,可以将所有元素设置为父层,然后将其右边的距离设置为负。

  19、如果一个类的某些部分经常发生变化,我们可以将这个经常发生变化的部分分离并单独设置为一个类,然后通过组合实现最终风格。

  20、可以使用(function(){}()等匿名函数来避免全局变量冲突。为了防止js冲突,有必要避免全局变量的泛滥,合理利用命名空间,为代码添加必要的注释。可以定义一个全局对象,然后用其属性定义全局变量,结合命名空间(类似GLOBAL、A、xx、GLOBAL、B、xx等)。

  点击图片免费领取课程!

盘点常用的Web前端开发技巧

  以上就是小编为大家整理发布的“盘点常用的Web前端开发技巧”一文,更多相关内容尽在开课吧广场Web教程频道。

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享