编写高质量代码--Web前端开发修炼之道笔记

第一章从网站重构说起

打造高质量的前端代码，提高代码的可维护性——精简、重用、有序。

第二章团队合作

精一行，通十行。

增加代码可读性——注释。

重用性需提高，分为公共组件与私有组件，代码模块化。公共组件不能轻易修改，因为影响大，所以一般只提供“读”的权限。

磨刀不误砍柴工——前期的构思很重要。构思的主要内容包括规范的制定、公共组件的设计和复杂功能的技术方案等。一般来说，前期构思占整个项目30%~60%的时间都算是正常的。

第三章高质量的HTML

CSS只是web标准的一部分，在HTML、CSS、JS三大元素中，HTML才是最重要的，结构才是重点，样式是用来修饰结构的。正确的做法是，先确定HTML，确定语义的标签，再来选用合适的CSS。

判断标签语义是否良好的简单方法：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。语义良好的网页去掉样式后结构依然很清晰。

“CSS裸体日”，2006.04.05第一届，从第三届开始改为4月9日。（设立目的就是为了提醒大家用合适的HTML标签的重要性）

一个语义良好的页面，h标签应该是完整有序没有断层的，也就是说要按照h1、h2、h3、h4这样的次序排下来，不要出现类似h1、h3、h4，漏掉h2的情况。

当页面内标签无法满足设计需要时，才会适当添加div和span等五语义标签来辅助实现。

第四章高质量的CSS

组织CSS的方法：base.css+common.css+page.css，在一般情况下任何一个网页的最终表现都是由这三者共同完成的，这三者不是并列结构，而是层叠结构。

base.css一般包括cssreset和通用原子类，比如设置一些常用的清除浮动、宽度、高度等class。可以参考一些前端框架，例如YUI、bootstrap等等。

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

团队开发人员多，可在classname前加前缀。

如果不确定模块的上下margin特别稳定，最好不要将它们写到模块的类里，而是使用类的组合，单独为上下margin挂用于边距的原子类（例如mt10、mb20）。模块最好不用混用margin-top和margin-bottom，统一使用margin-top或margin-bottom。

低权重原则——避免滥用子选择器

普通标签权重1，class权重10，id权重100

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

CSS sprite的最大好处是减少HTTP请求数，减轻服务器的压力，但它却需要付出“降低开发效率”和“增大维护难度”的代价。对于流量并不大的网站来说，CSS sprite带来的好处并不明显，而它付出的代价却很大，其实并不划算。所以是否使用CSS sprite主要取决于网站流量。

编码风格：推荐一行书写，能减少文件大小。（因为调试工具多，所以忽略易读性）Hack：

A标签问题：

Position和float的注意点：

居中问题：P109

用表格

布局：传说中的网格布局——宽度用百分比，content-xx-xxxx这种形式。z-index：

第五章高质量的Javascript

命名冲突，全局变量泛滥解决办法之一：

用匿名函数将脚本包起来，让变量的作用域控制在匿名函数之内。例如：

“（function（）{ }）（）”这种形式很巧妙，先定义一个匿名的function，然后立即执行它。包在这个匿名函数里的变量，作用域就不再是window，而是局限在函数内部。

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

匿名函数之间需要通信，可以设置全局变量，为了控制全局变量的数量，可以使用一个{}对象类型的变量作为全局变量，如果匿名函数间需要多个变量来做通信桥梁，可以将这些变量都做为全局变量的属性。推荐用大写的GLOBAL作为全局变量的变量名。

用命名空间解决全局变量被覆盖问题：

将生成命名空间的功能定义成一个函数：

添加注释：

添加注释：

给程序一个统一入口——window.onload和DOMReady

可以用初始化函数，一般命名为init( )

Js正式发布前做好是压缩一下，命名举例：head.js和head-min.js (留两份，可反压缩) 注意js中最好添加注释。

Javascript的分层概念和javascript库

分层可以让代码组织条理更清晰，减少冗余，提高代码重用率。与css类似，从上到下依次是page层、common层、base层。

事件冒泡：javascript对先触发子容器监听事件，后触发父容器监听事件的现象称为事件的冒泡。

用if(document.all)判断浏览器【IE支持】

构造函数、原型关系：

even对象：