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

《编写高质量代码--web前端开发修炼之道笔记》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、第一章从网站重构说起打造高质最的前端代码，提高代码的可维护性——精简、重用、有序。第二章团队合作精一行，通卜行。增加代码可读性——注释。重用性需提高，分为公共组件为私有组件，代码模块化。公共组件不能轻易修改，因为影响大，所以一般只提供“读”的权限。磨刀不谋砍柴工——前期的构思很重要。构思的主要内弈包括规范的制定、公共纽•件的设计和复杂功能的技术方案等。一般来说，前期构思占•整个项目3()%〜60%的时间都算是正常的。第三章高质虽:的HTML»3-1标签语义对照表标签名英文金拼中文翻译divdiv

2、ision分隔spanspan范［flolorderedlist排序列段ulunordcredlist不排序列Alilistitem列衣项目dldefinitionlist定义列左dtdefinitionterm定义术谄dddefinitiondescription定义描述deldeleted捌除insinserted插入hl〜・h6header1toheader6杯题1到杯趣6Pparagraph段落hrhorizontalrule水平尺aanchor锚abbrabbreviation缩写词a

3、cronymacronym取首字母的缩耳诃addressaddress地址varvariableprepreformatted険定义格式blockquoteblockquotation区块引用语strongstrongememphasizedbbold粗体iitalic斜体（续）标签名英文全拼中文翻译bigbig空大smallsmall受小supsuperscripted上标subsubscripted下标brbreak换行centercenter居中fontfont字体uunderlined下

4、划线sStrikethrough删除践fieldsctfieldset域集legendlegend图标captioncaption标鬆CSS只是web标准的一部分，在HTML、CSS、JS三人元素屮，HTML才是最重要的，结构才是重点，样式是用來修饰结构的。正确的做法是，先确定HTML,确定语义的标签，再来选用合适的CSSo判断标签语义是否良好的简单方法：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。语义良好的网页去掉样式后结构依然很清晰。“CSS裸体日”，2006.04.05第

5、一届，从第三届开始改为4月9日。（设立FI的就是为了提醍大家用合适的HTML标签的重要性）一个语义良好的页而，h标签应该是完整有序没有断层的，也就是说要按照hl、h2、h3、h4这样的次序排下来，不要出现类似hl、h3、h4,漏掉h2的情况。当页面内标签无法满足设计需要时,才会适当添加div和span等五语义标签來辅助实现。第四章高质量的CSS纽织CSS的方法：base.css+common.css+page.css,在一般情况卜任何一个网页的最终表现都是由这三者共同完成的，这三者不是并列结构，

6、而是层叠结构。1・base层这一层位于三者的最底层，提供CSSreset功能和粒度最小的通用类——原子类。这一层会被所有页面引用，是页面样式所需依赖的最底层。这一层与具体UI无关，无论何种风格的设计都可以引用它，所以base层要力求精简和通用。如果将用CSS控制页面样式比喻为建房子，这一层的核心职能是为房子打好地基（CSSreset）,并将建房用的砖块（原子类）准备充足。因为几乎所有的房子都要打地基，也都需要砖块，所以base层具有高度可移植性，不同设计风格的网站可以使用同一个base层。因为这

7、一层的内容很少，所以可以简单地放在一个文件里，例如base.css-base层相对稳定，基本上不需要维护。2.common层这i层位于中间，提供组件级的css类・提到组件，就不得不提“模块化”.“模块化”可以从样式和行为两个层面来考虫，与common层相关的是样式的模块化•我们可以将页面内的元素拆分成一小块一小块功能和样式相对独立的小“模块”，这些“模块”有些是很少章复的，有些是会大量重复的，我们可以将大量重复的“模块”视为一个组件。我们从页面里尽可能多地将组件提取出来，放在common层里。c

8、ommon层就相当于MVC模式中的M（Model,模型）。为了保证重用性和灵活性，M需要尽可能将内部实现封装，对可能会经常变化的部分提供灵活的接口•关于common层的技巧，详见4.4节。common层就像建房时用到的门窗.不同风格的房子会用到不同样式的门窗，各个房间用到的门窗的数帚和位賈可以不同，但样式相同。门窗有自己的小元件，I:匕如玻璃、门闩、门框、门板.钥匙孔等.门窗可以籟体移动.增减，但门窗本身的构造是相对稳定的。不同风格的房子就好比不同风格的网站，房子选用的门窗就好比这个网站选用的U