《编写高质量代码-Web前端开发修改之道》笔记--第一章 从网站重构说起

本章内容：糟糕的页面实现，头疼的维护工作Web标准--结构、样式和行为的分离前端的现状打造高品质的前端代码，提高代码的可维护性--精简、重用、有序

糟糕的页面实现，头疼的维护工作

工作中最大的考验和最不可回避的问题就是“变化”。我们不仅要实现需求，更重要的是考虑实现代码的可维护性，为未来可能出现的“变化”，提前做好准备。

所有老网页的典型毛病--新手可能会有的问题,中手也可能会有：

div和table布局混用

html标签名有大写、小写

html标签属性有的加了引号，有的没加引号

历史遗留的、被淘汰的属性泛滥

样式组织混乱，有<style>标签内嵌网页的，也有<link>外链的，也有直接写在标签内的

JavaScript有外链的，有写在<script>内的，也有写在html标签里的

JavaScript和CSS的位置凌乱

JavaScript的编码风格很不一致

无论是JavaScript还是CSS代码，看不到任何注释

这些毫无章法，结构（html）、样式（css）、行为（javascript）非常混乱的耦合着，在网页重构这场革命前，大多数网页都有这些毛病，未来的新手和过渡的中手都有很大可能会搞出其中的某些毛病。带来的维护难度之大，成本之高。

Web标准--结构、样式和行为的分离

一个符合标准的网页，标签中的标签名应该是小写的，属性要加上引号，样式和行为不在夹杂在标签中，而应该分别单独存放在样式文件和脚本文件中。理想状态下，网页源码由三部分组成：.html、.css、.js文件。标签中混有样式和行为的写法是不推荐的。（注：个人有点看法，当初接收培训的时候，或看书自学的时候，老师/作者教的步骤就是先在html元素写样式和行为，然后才是在单独文件中写代码，由于前面已经有了习惯，而且认为能实现这个功能就行了，没必要非要弄到单独一个文件中。这就是“懒”的潜意识在作怪了。如果在教的时候完全不给他们知道标签上写样式和行为，只在单独文件中写，这种后期进入工作中写出的“烂”代码也不会出现，还有个table大布局，都是一个道理。如果教的顺序反过来，我想现在的情况应该会好些。只是说些看法，没有任何攻击，毕竟应该真心感谢那些前辈和老师。）

前端的现状

网页维护越来越难的三个层面：

浏览器层面：浏览器的向前兼容使得前端开发中被淘汰的技术、不推荐的方法依然广为流传和应用。除了Firefox Chrome Safari 对IE的挑战之外，ie的 6、7、8这些浏览器版本也在老而不死着，这些浏览器对网页代码的解析存在着不大不小的差异

技术层面：Web标准被重视和普通采用的时间不长，整个大环境对Web标准的理解还停留在概念层面，对“好的实现方案”仍处于摸索阶段。理解不深，则很容易写出可维护差的代码。

团队合作层面：随着网页表现力越来越高导致实现代码越来越复杂，随之给团队合作带来了麻烦。如果团队合作不默契，很可能需要不停打补丁，最后导致满地是“雷”，没人愿意去维护。

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

打造高品质的前端代码,在Web标准思想的指导下，在实现结构、样式和行为分离的基础上，还要做到三点：精简、重用、有序。精简的代码可以让文件变小，并有利于客户端下载；重用可以让代码更易于精简，同时有助于提高开发速度；有序可以让我们更清晰的组织代码，使代码易于维护，有效应对变化。

Web标准的最终目的是让代码更易于维护。在实践中，如果有时候不遵循标准反而能带来更好的维护性，且利大于弊，那么就去做吧，尽信标准不如无标准，过于教条主义很愚蠢不是？