无废话网页重构系列——（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权威指南》，太臃肿了，某些章节写了进来，但又不够全面和详细，如第四、5章及第16章节以后的样式与脚本部分。即便它第三、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部分(第八、23章)；再了解E部分(第九、1七、2二、24章，附录A)；最后读一下F部分(第1八、1九、1五、1六、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