Web前端开发如何编写高质量代码

这篇文章将为大家详细讲解有关Web前端开发如何编写高质量代码，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

(P4)
Web标准由一系列标准组合而成，其核心理念是将网页的结构、样式和行为分离开来，所以它可以分为三大部分：结构标准、样式标准和行为标准。
样式标准 —— XML标准、XHTML标准、HTML标准；
样式标准 —— CSS标准；
行为标准 —— DOM标准和 ECMAscript 标准；

(P23)CSS布局也就是俗称的 Div + CSS 布局，或者是 (X)HTML + CSS 布局。其核心思想就是用 CSS 来控制网页中元素的样式，包括位置、大小、颜色等；

(P26)
CSS布局只是Web标准的一部分。在HTML、CSS、Javascript 这三大元素中，HTML才是最重要的，结构才是重点，样式是用来修饰结构的；

先确定 HTML ，确定语义的标准，再来选用合适的 CSS；

(P27) 浏览器会根据标签的语义给定一个默认的样式；

(P29) Web Developer —— 网页调试插件

(P43) 在语义不明显，既可以用 <P> 也可以用 <div> 的地方，尽量用 <P> ，因为 <P> 默认情况下有上下间隔，去样式后的可读性更好，对兼容特殊终端有利；

(P46)
如果漏写 DTD 声明， Firefox 仍然会按照标准样式来解析网页，但在 IE 中（包括 IE6、IE7、IE8）就会触发怪异模式；

一种组织 CSS 的方法 &mdash;&mdash; base.css + common.css + page.css

(P58) 模块与模块之间尽量不要包含相同的部分，如果有相同部分，应将它们提取出来，拆成一个独立的模块；

(P60) 模块应在保证数量尽可能少的原则下，做到尽可能简单，以提高重用性；

(P71) HTML 标准的 class 属性和 id 属性不同，id 只能挂一个，而 class 可以挂多个，用空格分隔；

(P81) 如果不确定模块的上下 margin 特别稳定，最好不要将它写到模块的类里，而是使用类的组合，单独为上下 margin 挂用于边框的原子类；

(P81) 权重的规则是这样的 &mdash;&mdash; HTML标签的权重是1，class 的权重是10，id 权重是100；

(P82) 如果 CSS 选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式 &mdash;&mdash; “就近原则”指的是选择符定义的先后顺序，而不是 class 名的先后顺序；

(P84) 为了保证样式容易被覆盖，提高可维护性，CSS选择符需保证权重尽可能低；

(P85) 少使用子选择器，就需要多添加 class ；

(P87) CSS Sprite “图片翻转技术” &mdash;&mdash; 将多张图片合并为一张，然后利用 background-position 属性来展示需要的部分；

(P88) 是否使用 CSS Sprite 主要取决于网站流量；

(P89) 一般情况下，建议尽量使用 class ，少用 id ；

(P93)
CSS hack &mdash;&mdash;
1. IE条件注释法 <!-- [if IE]> ...... <![endif]>
2. 选择符前缀法 *html *+html
3. 样式属性前缀法 "_" "*"

(P94) <a> 标签的四种状态排序问题 &mdash;&mdash; Love Hate 原则 &mdash;&mdash; L(link)ov(Visible)e， H(Hover)a(Active)te；

(P95)
块级元素： div、p、form、ul、ol、li

行内元素： span、strong、em

块级元素会独占一行，默认情况下，其宽度自动填满其父元素宽度；

行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化；

(P95)
块级元素可以设置 width、height 属性；
行内元素设置 width、height 属性无效；

(P96) 块级元素可以设置 margin 和 padding 属性。行内元素只有水平方向的 margin 和 padding 产生边距效果；

(P97) 块级元素和行内元素的 CSS 相关属性是 display ，其中块级元素对应于 display : block ，行内元素对应于 display : inline。 可以通过修改 display 属性来切换块级元素和行内元素；

(P103)
position : relate 和 position : absolute 都可以改变元素在文档中的位置。设置 position : relative 和 position : absolute 都可以让元素激活 left、top、right、bottom 和 z-index 属性（默认情况下，这些属性未激活，设置了也无效）；

默认情况下，所有元素都是在 z-index : 0 这一层；

设置 position : relative 或 position : absolute 会让元素“浮”起来；

position : relative &mdash;&mdash; 会保留自己在 z-index : 0 层的占位；

position : absolute &mdash;&mdash; 会完全脱离文档流，不再在 z-index : 0 层保持占位符，其 left、top、right、bottom 值是相对于自己最近的一个设置了 position : relative 或 position : absolute 的祖先元素的，如果祖先元素全部没有设置 position : realtive 或 position : absolute ，那么就相对于 body 元素；

(P104)
float 元素属性不会让元素“上浮”到另一个 z-index 层，它仍然让元素在 z-index : 0 层排列， float 不能通过 left、top、right、bottom 属性精确地控制元素的坐标，它只能通过 float : left 和 float : right 来控制元素在同层里“左浮”和“右浮”。flaot 会改变正常的文档流排列，影响到周围元素；

只要设置了 position : absolute 、float : left 或 float : right 中任意一个，都会让元素以 display : inline-block 的方式显示 &mdash;&mdash; 可以设置长宽、默认宽度并不占满父元素，就算显式地设置 display : inline 或者 display : block 也仍然无效；

值得注意的是， position : relative 却不会隐式改变 display 的类型；

(P104)
行内元素水平居中 &mdash;&mdash; text-align : center
块级元素水平居中 (确定宽度) &mdash;&mdash; margin-left : auto 和 margin-right : auto

(P111)
CSS中有一个用于竖直居中的属性 vertical-align ，但只有当父元素为 <td> 或 <th> 时，这个 vertial-align 属性才会生效；

<td> 标签默认情况下就隐式地设置了 vertical-align 的值为 middle ；

(P114) 注意： main 的内容比起 sidebar 更重要，无论 sidebar 和 main 在样式上谁左谁右，在HTML标签上要保证 main 的标签在 sidebar 之前被加载；

(P136) 用匿名函数将脚本包起来，可以有效地控制全局变量，避免冲突隐患；

(P147)
添加必要的注释，可以大大提高代码的可维护性，对于团队合作来说，更是十分有必要的；

让JS不产生冲突，需要避免全局变量的泛滥，合理使用命名空间以及为代码添加必要的注释；

(P153) window 对象会在网页内元素全部加载完毕以后出发 onload 事件；

(P153) DOMReady 只判断页面内所有的 DOM 节点，是否已经全部生成，至于子节点的内容是否加载完成，它并不关心。 DOMReady 触发的速度比 window.onload 更快；

(P159) CSS 放在页头，Javascript 放在页尾；

(P174) attachEvent 是 IE 支持的方法，而 addEventListener 是 Firefox 支持的方法，attachEvent 和 addEventListener 方法支持监听处理函数的叠加，而不是覆盖；

(P185) 很多开源的 Javascript 库可以为我们提供强大的 base 层和 common 层，最常见的 Javascript 库有 jQuery 和 YUI 等；

(P186)
jQuery 本身分成两大部分： jQuery 核心文件 和 jQuery UI 文件。 jQuery UI 文件依赖 jQuery 核心文件；

jQuery 核心文件提供了 base 层功能，还提供了部分 common 层功能， jQuery UI 文件提供了 common 层功能；

(P194)
因为一个页面内，相同的 id 只能出现一次，所以它不适合来获取一组有“相似功能”的 DOM 节点；

用标签名来获得 DOM 节点，让程序和 HTML 结构耦合太紧；

(P196) 同一页面里 id 只能出现一次，所以如果你的程序需要被多处复用，就一定不能使用 id 作为 Javascript 获得 DOM 节点的挂钩；

(P198) 组件需要指定一个根节点，以保持每个组件之间的独立性；

(P205) 如果一个函数内某个因素很不稳定，我们可以将它从函数内部分离出来，以参数的形式传入，从而将不稳定因素和函数解耦；

(P223)
面向对象英文全称叫做 Object Oriented ，简称 OO 。OO 其实包括 OOA (Object Oriented Analysis，面向对象分析)、OOD (Object Oriented Design，面向对象分析) 和 OOP (Object Oriented Programming，面向对象的程序设计)。面向对象的语法只对应 OOP ，只是 OO 的一部分；

OOA 和 OOD 是面向对象编程的思想，和具体语言无关，而 OOP 是面向对象编程工具，和选用语言相关；

OOA 和 OOD 与具体要求语言无关，一般情况下可以轻易跨语言重用；

(P224) 从大局上决定程序品质的，不是 OOP ，而是 OOA 和 OOD；

(P225) 函数在 Javascript 中既可以当做普通函数使用，也可以用作类来使用，在充当类的时候，它本身又担负着构造函数的责任；

(P228) 用 this xxx 定义的属性是公有的， 而用 var xxx 定义的属性是私有的；

(P230) 原型中的行为一定是公有的，而且无法访问私有属性；

(P231) 放在构造函数里的私有行为，实现真正的似有；

(P253) 无论在类的构造函数中还是在原型中，this 都指向实例化的对象；

(P239) 作为函数的 function ,其 this 指向的是 window 对象，而作为类构造函数的 function ，其 this 指向的是实例化对象；

(P259) 对于常规属性，统一使用 node.xxx 的方式读取，对于自定义属性，统一使用 node.getAttribute("xxx")读取；

关于“Web前端开发如何编写高质量代码”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。