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

第一章

　　1.Web标准由一系列标准组合而成，核心理念是将网页的结构，样式和行为分离，所以分为三大部分：结构标准，样式标准和行为标准。结构标准包括XML标准，XHTML标准，HTML标准；样式标准指CSS标准；行为标准主要包括DOM标准和ECMAScript标准。

第二章

　　1.注释增加代码的可读性；提高重用性--公共组件和私有组件的维护；冗余or精简；前期的构思；制定规范；团队合作

第三章

　　1.语义化标签

　　2.table布局的缺点：代码量大，结构混乱；标签语义不明确，对搜索引擎不友好。

　　3.CSS布局：div+css布局  or  (X)HTML+css布局；代码量少；语义清晰。

　　4.判断标签语义是否良好：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。  CSS裸体日。   FireFox插件-Web Developer

　　5.表格标题要用caption，表头要用thead包围，主体部分用tbody包围，尾部要用tfoot包围，表头和一般单元格要区分开，表头用th，一般单元格用td。

　　6.语义化标签应该注意：尽可能少地使用无语义标签div和span；   在语义不明显，既可以使用p也可以用div的地方，尽量用p，因为p默认情况下有上下间距，去样式后的可读性更好，对兼容特殊终端有利；   不要使用纯样式标签，例如b，font，和u等，改用css设置，语义上需要强调的文本可以包在strong或em标签里，strong和em有“强调”的语意，其中strong的默认样式是加粗，而em的默认样式是斜体。

第四章

　　1.怪异模式：为了确保向后兼容，模拟老式浏览器的行为以防止老站点无法工作；IE对盒模型的解析在怪异模式中，width本身就包括了padding和border的宽度，margin-left（right）：auto在怪异模式下也无法正常工作。

　　2.触发怪异模式：DTD文档类型定义

　　3.组织CSS的方法：base.css(被所有页面引用，与具体UI无关，力求精简和通用，具有高度可移植性，不同风格的网站可以使用同一个base，相对稳定，不需要维护)+common.css（提供组件级的css类，尽可能将内部实现封装，对尽可能会经常变化的部分提供灵活的接口，最好一人负责，统一管理）+page.css（高度重用的模块，每个页面都有自己的page）

　　4.推荐的base.css

/*css reset*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}

table{border-collapse: collapse;border-spacing: 0;}

fieldset,img{border:0}

address,caption,cite,code,dfn,em,strong,th,var{font-style: normal;font-weight: normal}

ol,ul{list-style: none}

caption,th{text-align: left}

h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal}

q:before,q:after{content: ''}

abbr,acronym{border:0}



/*文字排版*/

.f12{font-size: 12px}

.f13{font-size: 13px}

.f14{font-size: 14px}

.f16{font-size: 16px}

.f20{font-size: 20px}

.fb{font-weight: bold}

.fn{font-weight: normal}

.t2{text-indent: 2em}

.lh150{line-height: 150%}

.lh180{line-height: 180%}

.lh200{line-height: 200%}

.unl{text-decoration: underline;}

.no_unl{text-decoration: none;}



/*定位*/

.tl{text-align: left}

.tc{text-align: center}

.tr{text-align: right}

.bc{margin-left: auto;margin-right: auto;}

.fl{float: left;display: inline}

.fr{float: right;display: inline}

.cb{clear: both}

.cl{clear: left}

.cr{clear: right}

.clearfix:after {content: “.”;display:block;height:0;clear:both;visibility:hidden;} 

.clearfix {display: inline-block;}* html .clearfix {height: 1%;} 

.clearfix {display: block;}

.vm{vertical-align: middle}

.pr{position: relative}

.pa{position: absolute}

.abs-right{position: absolute;right: 0}

.zoom{zoom:1}

.hidden{visibility: hidden}

.none{display: none}



/*长度高度*/

.w10{width:10px}

.w20{width:20px}

.w30{width:30px}

.w40{width:40px}

.w50{width:50px}

.w60{width:60px}

.w70{width:70px}

.w80{width:80px}

.w90{width:90px}

.w100{width:100px}

.w200{width:200px}

.w250{width:250px}

.w300{width:300px}

.w400{width:400px}

.w500{width:500px}

.w600{width:600px}

.w700{width:700px}

.w800{width:800px}

.w{width: 100%}

.h50{height: 50px}

.h80{height: 80px}

.h100{height: 100px}

.h200{height: 200px}

.h{height: 100%}



/*边距*/

.m10{margin:10px}

.m15{margin:15px}

.m30{margin:30px}

.mt5{margin-top:5px}

.mt10{margin-top:10px}

.mt15{margin-top:15px}

.mt20{margin-top:20px}

.mt30{margin-top:30px}

.mt50{margin-top:50px}

.mt100{margin-top:100px}

.mb5{margin-bottom:5px}

.mb10{margin-bottom:10px}

.mb15{margin-bottom:15px}

.mb20{margin-bottom:20px}

.mb30{margin-bottom:30px}

.mb50{margin-bottom:50px}

.mb100{margin-bottom:100px}

.ml5{margin-left:5px}

.ml10{margin-left:10px}

.ml15{margin-left:15px}

.ml20{margin-left:20px}

.ml30{margin-left:30px}

.ml50{margin-left:50px}

.ml100{margin-left:100px}

.mr5{margin-right:5px}

.mr10{margin-right:10px}

.mr15{margin-right:15px}

.mr20{margin-right:20px}

.mr30{margin-right:30px}

.mr50{margin-right:5px}

.mr100{margin-right:100px}

.p10{padding:10px;}

.p15{padding:15px;}

.p30{padding:30px;}

.pt5{padding-top:5px}

.pt10{padding-top:10px}

.pt15{padding-top:15px}

.pt20{padding-top:20px}

.pt30{padding-top:30px}

.pt50{padding-top:50px}

.pb5{padding-bottom:5px}

.pb10{padding-bottom:10px}

.pb15{padding-bottom:15px}

.pb20{padding-bottom:20px}

.pb30{padding-bottom:30px}

.pb50{padding-bottom:50px}

.pb100{padding-bottom:100px}

.pl5{padding-left:5px}

.pl10{padding-left:10px}

.pl15{padding-left:15px}

.pl20{padding-left:20px}

.pl30{padding-left:30px}

.pl50{padding-left:50px}

.pl100{padding-left:100px}

.pr5{padding-right:5px}

.pr10{padding-right:10px}

.pr15{padding-right:15px}

.pr20{padding-right:20px}

.pr30{padding-right:30px}

.pr50{padding-right:50px}

.pr100{padding-right:100px}

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

　　6.CSS命名：骆驼命名法用于区别不同单词，划线用于表明从属关系。

　　7.多用组合，少用继承

　　8.id只能挂一个，class可以挂多个，用空格分隔

　　9.上下margin会重合，左右不会

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

　　11.当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。

　　12.HTML标签权重是1，class的权重是10，id的权重是100。

　　13.如果CSS选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式。

　　14.为了保证样式容易被覆盖，提高可维护性，CSS选择符需保证权重尽可能低。少用自选择器，多添加class。

　　15.CSS sprite：图片翻转技术将多张图片合并为一张，然后利用background-position属性来展示我们需要的部分。

　　16.CSS编码风格：推荐一行式的编码风格，可读性稍差，但有效减少CSS文件的行数，提高开发速度，减小CSS文件大小。

　　17.CSS hack-IE条件注释；选择符前缀法；样式属性前缀法。

　　18.解决超链接访问后hover样式不出现的问题：love hate原则，即l（link）ov（visited）e h（hover）a（active）te。

　　19.haslayout：IE浏览器专有的属性，用于CSS的解析引擎，在IE下一些复杂的CSS设置解析起来会出现bug，其原因可能与haslayout没有被自动触发有关；haslayout触发方法：设置width，height的值，设置position为relative，但是会有副作用；更好的解决方法：使用“zoom：1”.

　　20.块级元素和行内元素是布局最基本的两种元素，常见的块级元素有div,p,form,ul,ol,li等，常见的行内元素有span,strong,em等。

　　21.块级元素可以设置width,height属性。行内元素设置width，height属性无效。

　　22.块级元素可以设置margin和padding属性。行内元素水平方向会产生边距，但竖直方向不会。

　　23.块级元素对英语display：block，行内元素对应于display：inline。可以通过修改display属性来切换块级元素和行内元素。

　　24.display：inline-block  行内的块级元素，拥有块级元素的特点，可以设置长宽，可以设置margin和padding的值，却不独占一行，宽度并不沾满父元素。IE6和IE7不支持，可以通过触发行内元素的halayout实现。

　　25.行内元素的水平居中  text-align：center

　　26.确定宽度的块级元素的水平居中   {margin-left：auto；margin-right：auto}

　　27.不确定宽度的块级元素水平居中：将ul包含在table标签内，对table设置margin-left：auto和margin-right：auto；改变块级元素的display为inline类型，然后使用text-align：center；给父元素设置float，然后父元素设置position：relative 和left：50%，子元素设置position：relative和left：-50%。

　　28.父元素高度不确定的文本，图片，块级元素的竖直居中：通过给父容器设置相同上下边距实现。

　　29.父元素高度确定的单行文本的竖直居中：通过给父元素设置line-height来实现，line-height值和父元素的高度只相同。

　　30.父元素高度确定的多行文本，图片，块级元素的竖直居中：当父元素为td或th时，可以设置vertical-align属性；对支持display：table-cell的IE8H和Firefox用display：table-cell和vertical-align：middle来实现居中，不支持的IE6和IE7，使用特定格式的hack。

　　31.main的内容比起sidebar更重要，无论sidebar和main的样式上谁左谁右，在html标签上要保证main的标签在sidebar之前被加载。

第五章

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

　　2.添加必要的注释，可以大大提高代码的可维护性，对于团队合作来说，很有必要。

　　3.网页中的JavaScrippt从功能上，分为两大部分-框架部分和应用部分。框架部分提供的是对JavaScript代码的组织应用，包括定义全局变量，定义命名空间方法等，它和具体应用无关，每个页面都需要包括相同的框架，所以框架部分的代码在每个页面都相同。应用部分提供的是页面的功能逻辑，不同页面会有不同的功能，不同页面应用部分的代码也不相同。

　　4.CSS放在页头，JS放在页尾。

　　5.为减小网页大小，缩短网页下载时间，在发布JavaScript之前，先进行压缩。压缩工具有Packer和YUI Compressor。

　　6.为了方便维护，源文件叫做head.js 压缩后的文件叫head.js。

　　7.JavaScript分层：base层（位于底端，封装不同浏览器下JavaScript的差异，提供统一的接口，可以靠它来完成跨浏览器兼容的工作；扩展JavaScript语言底层提供的接口，让它提供更多更为易用的接口。）common层（中间层，依赖base层提供的接口。common层提供可供复用的组件，和页面功能没有直接关系）page层（位于顶端，和页面里的具体功能需求直接相关，完成页面内的功能需求）

　　8.获得DOM节点的三种方法：getElementById，getElementsByTagName，getElementsByClassName。

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

　　10.组件需要指定一个根节点，以保持每个组件之间的独立性。