跳到主要内容

来套 Web 重构装备

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

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

三生万物

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

人类社会的工作,各方面各环节都是林林总总,Web 开发亦是如此,具体的可以查阅 Web Developer RoadmapFrontend 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 (AirbnbStandard),不建议自己搞一套“规范”出来,建议接受大厂已有的成熟的“潜规则”;调教 IDE/编辑器,使“格式化文档”与编码风格规则一致;了解变量名、方法名中 UpperCamelCaselowerCamelCaselower_snake_caseUPPER_SNAKE_CASEkebab-caseCamel_Snake_Case 等命名风格,方便查阅和沟通。

代码需要校验,编辑器或构建工具中添加 JSLintJSHintJSCSESLintstylelintHTMLHint 这类工具,可以在代码编写时候或构建命令中,进行代码检验。

JavaScript 校验工具这块:

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

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

工以利器为助

开发工具、构建工具依赖开发环境,建议根据操作系统安装和配置好各环境平台,如:.NET FrameworkMicrosoft Visual C++ Redistributable PackageNodejsJDKPythonRuby

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

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

预算足,微软家的 Visual Studio(没有之一),Jetbrain 家的 IDE,Adobe 家的最新版 Dreamweaver;预算不多可以考虑 Sublime Text,没预算可以考虑 Visual Studio CodeGithub AtomAdobe Brackets。不建议使用 Hbuilder

构建工具同样选择紧贴当下技术更新的就可以了,如当下结合使用 GulpWebpackRollupBabel

调试工具推荐 Chrome Developer Tools

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

枪,兵工厂

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

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

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

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

另一部分则是 UI 库,提供了一整套丰富的客户端组件和资源,UI 库有独立设计不依赖其它库和框架,或为其它一种或多种库和框架设计。无依赖项的有 Semantic UIFoundationPureBulma 等;有依赖项的有 BootstrapEasyUIAnt DesigniViewElementWeUIOnsen UI 等。

还有另一类使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生应用程序的软件开发框架,如 React NativeElectronWeexPhoneGap/CordovaTitaniumNativeScriptIonic

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

凡是过去,皆为序曲

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

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

提供项目托管服务的有 BitbucketCodingGitHubSourceForge 等 SaaS 平台。

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


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


更新日志:

  • 2015-07-12