《编写高质量代码-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的 六、七、8这些浏览器版本也在老而不死着，这些浏览器对网页代码的解析存在着不大不小的差别
• 技术层面：Web标准被重视和普通采用的时间不长，整个大环境对Web标准的理解还停留在概念层面，对“好的实现方案”仍处于摸索阶段。理解不深，则很容易写出可维护差的代码。
• 团队合做层面：随着网页表现力愈来愈高致使实现代码愈来愈复杂，随之给团队合做带来了麻烦。若是团队合做不默契，极可能须要不停打补丁，最后致使满地是“雷”，没人愿意去维护。

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

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

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