无废话网页重构系列——（2）来套Web重构装备

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

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

三生万物

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

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

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

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

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

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

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，不建议自己搞一套规范出来，建议接受大厂已有的成熟的“潜规则”；调教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。

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

凡是过去，皆为序曲

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

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

• 本地版本控制系统，如RCS；
• 集中式的版本控制系统，如CVS、SVN、TFS，工具主要有VisualSVN Server、TortoiseSVN、QSvn、RapidSVN、SmartSVN、Versions、Cornerstone；集中式版本系统可以为每个开发者分配访问权限；
• 分布式版本控制系统，如Git、Mercurial、Bazaar，工具主要有GitLab、Gogs、Gitblit、Sourcetree、Git、Tower、TortoiseGit、TortoiseHg。

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

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

---

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

（本篇结束）

许可协议：自由转载-保持署名-非商业性使用-禁止演绎 (CC BY-NC-ND 4.0)

By 小可 from https://xinlu.ink/tech/pro-web-reconstruction-2-getting-started.html