跳到主要内容

来套 Web 重构装备

本篇主要从语言入门、规范、工具、构建、库、框架、版本控制等各方面展开，篇幅会有点长，涉及到的工具类，会另开博文详细介绍。

另外说明 Web 重构是 Web 前端的开始，主要侧重 Web 页面，如实现布局与兼容，符合 W3C 标准规范，组件化框架化，实现页面视觉效果，提升代码的可维护性、可读性和性能优化。

三生万物​

HTML、CSS、JavaScript 是 Web 开发三基石。

人类社会的工作，各方面各环节都是林林总总，Web 开发亦是如此，具体的可以查阅 Web Developer Roadmap、Frontend Knowledge Structure，看看 Web 开发技能树，各“分支”涉及知识点非常广；而对于 Web 重构工作，最初、最终、最重要的还是三基石。

打好基础是持久战，理论和实践相结合，不急于求成。不建议看“七天入门/学会”、“从入门到精通”之类视频、帖子和书籍作为教程，甚至都不建议将其作为辅助指导！前期不建议报培训班。

一门学科和技术，还是需要一个系统的学习过程，这也是本系列文章没有相关基础知识的原因，基础知识是要花时间去“啃”的。

入门学习路线：HTML → CSS → JavaScript

HTML​

HTML，很多时候仅仅是作为标签标记使用，但它不仅仅就是十几个标签，像 Local Storage、SVG、Canvas、Web Workers 等部分，必须要结合 JavaScript、几何学、线程等知识才能讲解的下去，没法单纯的独立的全面展开，这已经不是一本书就能解释清楚的了。目前已有的书籍，像 Mark Pilgrim 的《HTML5 揭秘》，知识点如蜻蜓点水，留下太多扩展阅读链接；而像 Adam Freeman 的《HTML5 权威指南》，太臃肿了，某些章节写了进来，但又不够全面和详细，如第 4、5 章及第 16 章节之后的样式与脚本部分；另外第 3、6-15 章即使它对了解基本的 HTML 有帮助，但又被翻译弄得比较尴尬，如 'Void Elements' 翻译为'虚元素'。因此，HTML 这块我不推荐阅读书籍，建议先阅读 MDN “开始 HTML”，之后在 RUNOOB: HTML 教程系统学习，然后再阅读 MDN “元素参考、属性参考、行内元素、块级元素、元素内容模型”等内容，作为总结和回顾。

很多 Web 开发初学者多是去 www.w3school.com.cn，我不建议参考这个网站的内容，其部分内容过时和有问题。可以阅读 www.w3schools.com。

CSS​

CSS 学习推荐 Lea Verou 的《CSS 揭秘》和 Eric A. Meyer 的 《CSS 权威指南》，顺序是：《CSS 权威指南》第 1-4 章先看几遍，再跟着《CSS 揭秘》全书动手做，再回到《CSS 权威指南》剩下章节。熟悉之后可以去 W3Help 查看一些兼容性问题；最后再去了解和学习 样式预处理。

JavaScript​

JavaScript 学习推荐 Nicholas C.Zakas 的《JavaScript 高级程序设计(第3版)》，循序渐进的学习路线：先 A 部分 (第 1-7 章) 必知必会；深入了解 B 部分 (第 10-14 章)；接着深入了解 C 部分 (第 20、21 章)；再接着深入 D 部分 (第 8、23 章)；再了解 E 部分 (第 9、17、22、24 章，附录 A)；最后读一下 F 部分 (第 18、19、15、16、25 章，附录 B、C、D)。其中 B、C、D 部分实际工作中会运用到第三方库。F 部分附录章节，由于第 3 版成书年代较早，许多新技术未收录，这里了解一下即可，第 4 版今年(2018 年) 7 月底才发售，里面会有 ES6 之后的相关技术介绍；David Flanagan 的《JavaScript 权威指南》适合做字典。

经过上面的语言学习，或多或少知道一个 HTML 文档是怎么个情况了，源代码直接到浏览器运行，很方便。这时应该思考它肯定不会这么简单，抛出各种问题，如：多重样式权重优先级是怎样的呢？ !important 为什么要少用不用？ HTML、CSS、JavaScript 可以写在一个文档中实现效果，可为什么要采用外部样式、脚本引入呢？为什么要合理运用 h1~h6 之类的 HTML 标签，为什么要合理命名 CSS 类？样式面向设计稿书写，连简单的调整颜色和字体都是体力活替换，有没有什么方法让它具备可编程性？多个页面模块相同怎么处理？脚本全局变量冲突不好控制，业务繁多功能复杂代码越来越臃肿？团队和技术现状如何选择一个合适的库/框架呢？大公司里怎样开发和部署前端代码？ 太多太多问题… 打好语言基础，然后多去发掘问题、关注问题、分析问题、释然解决问题。

入门巩固学习推荐张容铭的《JavaScript 设计模式》、Douglas Crockford 的《JavaScript 语言精粹》

JavaScript 具体的部分不在本系列中讨论，已经有《JavaScript 高级程序设计》、《ES6 标准入门》、《JavaScript 设计模式》、JavaScript 模块化之旅等资源，可以辅助深入学习和应用。

规所以正圆，矩所以正方​

编程规范 (约束) 部分，像代码命名风格、Tab/Space 缩进之类，差不多是程序员的一种价值观，算是编程领域的圣战导火索。建议有了语言基础之后，读 Nicholas Zakas 的《编写可维护的 JavaScript》，然后编码遵守 HTML/CSS Style Guide、JavaScript Style Guide (Airbnb、Standard)，不建议自己搞一套“规范”出来，建议接受大厂已有的成熟的“潜规则”；调教 IDE/编辑器，使“格式化文档”与编码风格规则一致；了解变量名、方法名中 UpperCamelCase、lowerCamelCase、lower_snake_case、UPPER_SNAKE_CASE、kebab-case、Camel_Snake_Case 等命名风格，方便查阅和沟通。

代码需要校验，编辑器或构建工具中添加 JSLint、JSHint、JSCS、ESLint、stylelint、HTMLHint 这类工具，可以在代码编写时候或构建命令中，进行代码检验。

JavaScript 校验工具这块：

  • JSLint，古老，不可配置，不可扩展，不可禁用许多特性的校验，Douglas Crockford 之作
  • JSHint，可配置的 JSLint 版本
  • JSCS，代码样式检查，只捕获与代码格式化相关的问题，而不是潜在的 bug 或错误。已经与 ESLint 合并
  • ESLint，易于扩展，可自定义规则，可以插件形式安装更多的规则，Nicholas C. Zakas 之作

一个 linting 工具是解决问题的一个很好的步骤，但是它基于一定的规则发现错误，具有一定的局限性。

工以利器为助​

开发工具、构建工具依赖开发环境，建议根据操作系统安装和配置好各环境平台，如：.NET Framework、Microsoft Visual C++ Redistributable Package、Nodejs、JDK、Python、Ruby。

开发工具也是编程领域的圣战导火索，如编辑器之神 Vim和神的编辑器 Emacs。

开发工具只要是紧贴当下技术更新的就可以了，然后按预算、硬件和调教精力筛选，无所谓哪一个 IDE 或编辑器。

预算足，微软家的 Visual Studio(没有之一)，Jetbrain 家的 IDE，Adobe 家的最新版 Dreamweaver；预算不多可以考虑 Sublime Text，没预算可以考虑 Visual Studio Code、Github Atom、Adobe Brackets。不建议使用 Hbuilder。

构建工具同样选择紧贴当下技术更新的就可以了，如当下结合使用 Gulp、Webpack、Rollup、Babel；

调试工具推荐 Chrome Developer Tools；

计算机硬件固态硬盘和 8G 以上内存。

枪，兵工厂​

Web 重构中，并非是“九层之台，起于垒土”。

Web 重构，有旧项目的改造和完善，涉及到架构的变动、业务功能的增删；也有新项目的建造，或大，或小；这里无论新旧，多是基于各种库和框架，很少全部原生 CSS、脚本一砖一瓦式建之筑之。

库的作用主要是提供 API，便捷操作 DOM、AJAX 和兼容各宿主环境事件 (Event)，如 jQuery、Zepto、axios，以及实现函数式编程来处理数据和事件，如 Underscore、Lodash。还有许多库其功能仅仅专注某一事务，如 Cookie 操作、Local Storage、切换交互、视觉差交互、代码着色、宿主环境侦测、延迟加载、图表报表、游戏引擎等。

MVC、MVP、MVVM 等框架，加以数据接口规范，主要作用是提供一套完整的、规模化的、跨平台的解决方案，复杂业务项目采用它的机制和工作流，可解耦数据、业务逻辑与视觉呈现，使项目得以按一定粒度拆分隔离，清晰化控制、调用、传递等关联环节，降低耦合，减少冗余混乱污染，减轻团队协作任务依赖带来的制约，统一实现风格，提高项目可伸缩性、可维护性，侧重底层驱动。当然，也提高了 Web 开发难度和成本。这些框架主要有 Angular、React、Vue、Backbone、Ember、Meteor、Knockout、Polymer。一部分框架，还提供了 UI 层，如 YUI、ExtJS、Dojo。

另一部分则是 UI 库，提供了一整套丰富的客户端组件和资源，UI 库有独立设计不依赖其它库和框架，或为其它一种或多种库和框架设计。无依赖项的有 Semantic UI、Foundation、Pure、Bulma 等；有依赖项的有 Bootstrap、EasyUI、Ant Design、iView、Element、WeUI、Onsen UI 等。

还有另一类使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生应用程序的软件开发框架，如 React Native、Electron、Weex、PhoneGap/Cordova、Titanium、NativeScript、Ionic。

各框架在模块规范、加载器机制、应用性能、用户体验、技术门槛、开发部署等方面存在差异，至于选择哪种框架，一要看其功能、文档、活跃度，二要结合项目实际情况、团队技术水准；没有好不好，只有合不合适。

凡是过去，皆为序曲​

无论工程大小，无论个人还是团队，都需要采用版本控制系统，以便工程文件的协作、追踪、维护、备份和版本存储。

版本控制系统主要有以下几类：

提供项目托管服务的有 Bitbucket、Coding、GitHub、SourceForge 等 SaaS 平台。

在线托管服务注意仓库的 Public/Private 属性，可以私有部署。

语言有了，规范有了，工具有了，架子有了，仓库有了，装备齐了，可以做了。

更新日志：

  • 2015-07-12
最后由 xianghongai 于 更新