《Web前端开发修炼之道》学习笔记

什么是高质量的代码

糟糕的实现

• div布局和table布局混用
• 标签名有大写，也有小写
• 标签属性有的加引号，有的没有加引号
• 被淘汰的属性泛滥
• 样式组织混乱,有内嵌的，也有外链的，还有直接写在标签内的
• js有内嵌的，外链的，还有写在标签里的
• js和css位置混乱
• js编码风格很不一致
• 没有注释

标准实现

1. 保持结构、样式和行为分离
2. 符合结构标准(XML,XHTML,HTML标准)
3. 符合样式标准(CSS标准)
4. 行为标准(DOM标准和ECMAScript标准)

维护成本

• 浏览器向前兼容，使得过时的技术和不推荐的方法滥用，以及不同的浏览器对网页的解析存在或大或小的差异
• 不同的公司，团队和工程师，对好的实现方案有自己的理解，或深或浅，理解不深，容易写出可维护性差的代码
• 团队合作不好的容易不停的打补丁，使得结构混乱

高品质前端代码的特性

精简 重用 有序

1. 注释－－增加代码可读性
2. 公共组件和私有组件帮助提高重用性
3. 公共组件组织的粒度越大,文件越集中,加载和管理越方便，冗余就多；组织的粒度越小，就越精剪分散，加载管理就越麻烦，需要尽量找到最佳平衡点
4. 前期的构思很重要
5. 制定规范
6. 团队合作最大的难度是人而不是技术。说话方式，工作习惯，性格各异。
7. 能独立决策的问题都是小问题，要与人合作商讨的问题才是大问题，要学会与人相处

对前端工程师的要求

1. css,能兼容主流浏览器或者是更高要求
2. 不仅会使用原生的javascript 还会使用js库
3. 了解并熟悉Ajax
4. 熟悉一种或者多种后台语言(后端工程师是如何输出的，模拟ajax方便调适，大局观认识，利于了解数据传递的流程)

高质量HTML

• 使用语义化标签，(在没有css效果下，仍然具有一定的可读性)

  标签名	语义
  div	分隔
  span	范围
  ol	排序列表
  ul	不排序列表
  li	列表项目
  h1~h6	标题1到标题6
  …	见20页

• 尽量不使用table布局(table布局语义不明确,对搜索引擎不友好;代码量大)

• 推荐使用css+div布局(代码量少，下载快，结构精简，语义清晰,对搜索引擎更友好)

• 搜索引擎对h1~h6很敏感,一个语义良好的页面,h标签应该是完整有序没有断层的

  W3C的官方网站的语义非常优秀，可使用firefox的developor插件查看是否语义化良好

常见模块的标签选择

标题和内容

<div class="h2">标签的语义 <a href="#">更多</a></div>
<div class="p">段落一的内容<span class="strong">根据浏览器的默认样式</span></div>
<div class="p">段落二的内容</div>

只有“分隔”,”范围”等无语义标签,看不出结构的逻辑

<h2>标签的语义</h2>
<a href="#">更多</a>
<p>段落一的内容<strong>根据浏览器的默认样式</strong></p>
<p>段落二的内容</p>

有语义的标签,但是视觉效果很难通过css实现

<div class="title">
    <h2>标签的语义</h2>
    <a href="#">更多</a>
</div>
<div class="content">
    <p>段落一的内容<strong>根据浏览器的默认样式</strong></p>
    <p>段落二的内容</p>
</div>

在保持语义化的同时，可以适当添加div span等无语义标签辅助实现效果

表单

略

表格

<table border="1">
    <caption>几种页面实现的比较</caption>
    <thead>
        <tr>
            <th>实现方式</th>
            <th>代码量</th>
            <th>搜索引擎友好</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>table布局</th>
            <th>多</th>
            <th>差</th>
        </tr>
    </tbody>
</table>

语义化标签注意事项

• 尽可能少使用无语义标签 div span
• 在语义不明显，即可以使用p也可以使用div,尽量使用p,p默认情况下有上下间隔，去样式后可读性更好
• 不要使用纯样式标签 b font和u等，改用css设置

高质量CSS