JavaScript 踩坑心得— 为了高速（上）

一.前言

不少状况下，产品的设计与开发人员一直想打造一套高品质的解决方案，从而快速、平稳地适应产品迭代。速度是衡量产品适应性的真正且惟一的标准，并且，这并非笔者的一家之言。

「速度是衡量适应能力的真正指标。」 ——艾瑞克·埃利奥特

许多公司选择 JavaScript，就是看中了它灵活、快速的优势。尽管此言非虚，但若是你在构建 JavaScript 系统时考虑得不够周全，灵活与高速的特性反而可能将你带入歧途。

一些值得特别关注的问题包括：

• 代码重复
• 样式或风格不一致
• 没法随意扩展
• 工具与模块选择阻碍了生产力
• 测试程序不可靠或缺失
• 深度继承(猩猩/香蕉问题)

原做者曾在多个侧重 JavaScript 的开发环境中工做了一段时间以后，几乎经历了全部扩展 JavaScript 应用可能致使的问题，客户端与服务器端均不能幸免。如下是对这些问题的总结，但愿能帮助你们少走一些弯路。

二.基础性原则

在探讨与上下文相关的 JavaScript 问题以前，如下是一些与平台相独立的建议，确定能帮助你减轻工做负担。

1.避免经典的面向对象模式

JavaScript 功能很是强大，它为对象组合提供了原型继承与函数式编程功能，使用 JavaScript 的这两大支柱功能，而不执着于经典的面向对象模式，可以有效发挥 JavaScript 的强劲功能。应用的组合度与模块化程度越高，从此就越容易重构与扩展。

2.越懒越好

现而今，NPM 上提供了超过20万个模块。时间就是金钱，你花在代码维护上的时间越多，对雇主而言，你就越昂贵。更况且，许多代码其实不用你亲自编写。

在这里，笔者还建议你使用第三方的运维服务与工具。不必创建本身的分析平台，除非你的应用扩展到很是大的规模，以至于 Google Analytics，Mixpanel，百度统计等 SaaS 营销软件没法知足你的需求。使用这些服务处理相关任务，能促使你专一于真正重要的东西——产品，并且，如今研发的人力成本愈来愈高，使用适当的 APM 软件也能减小开发维护网站的任务量，例如 OneAPM 、NewRelic、APPdynamic 等，这能让工程师专一于生产价值，而不是管理代码质量。

3.保持一致性

致使生产力严重下滑的另外一重要缘由是面对陌生代码时手足无措，四处翻找。采用统一的风格指南，建立可辨明的样式，就能解决这一难题。一样的风格与样式意味着新的项目看起来也更为熟悉。

笔者尤为偏心 Airbnb 的风格指南。该指南的贡献者超过 160 人，每月有16.9万次的下载。此外，它还提供了一个 ESLint 插件，也就是说，若是你不许备覆盖什么的话，无需任何配置就能为你所用。

与成千上万名 JavaScript 工程师共享样式与风格。

此外，使用 linter 以确保团队内部的样式一致。目前，ESLint 是笔者最爱的 linter，由于它不只提供了插件能力，还拥有来自开源社区的持续支持。几乎针对每一种文本编辑器与 IDE，都有 ESLint 插件可用。

Yeoman 也能够帮你建立在新项目中使用的应用模板，实现更为深刻的一致性。有了 Yeoman，你能够在每一个应用中使用相同的基本依赖关系，编码样式以及风格。

4.充分利用丰富的工具

JavaScript 是拥有最完备的工具生态系统的编程语言之一。请必定要利用这一点！iron-node,react devtools 和 redux devtools 都是不容错过的工具。

Electron 与 React Native 提供了访问原始环境的能力，容许你为对种平台建立应用，并且，能有效提升代码重用率。

三.编写过程当中的「坑」

1.尽量保持小巧

将应用分为许多小巧的模块，能真正实现可组合的 JavaScript。遵循 FIRST 原则（Focused 专一，Independent 独立，Reusable 可重用，Small 小巧，Testable 可测试），可以下降应用复杂度，同时提高测试能力与重用率。

「不管是客户端组件仍是服务器端的组件，不管是 Node 模块仍是一段可视化 UI，庞大的组件老是比小巧的组件更复杂，更难以维护。」 ——阿迪·奥斯马尼

请记住，模块的功能越小越好。事实上，模块越小，其重用率就越高。

2.充分利用 ES2015

将其用于 APIs，SPAs，以及二者的全部中间环节。相似 Bable的工具能给你带来极大的优点。在今天，使用 ES2015 的能力意味着你能够用更少、更整洁的代码建立应用。不要由于惧怕供应商锁定或这些工具不容易找到而放弃使用它们。

老实说，如今已经没有理由不适用 Babel 了！Bable 既能够处理普通的 JavaScript，也能够处理任何类型的编译代码。这意味着，你能够随时将模块移回 ES5。

创建能与 JavaScript 无缺扩展的服务并不是易事。应用越大，快速运行并适应新变化就越难。请确保你正在建造的服务是高度可用，且支持自动扩展的。

3.创建支持 JavaScript 应用的基础架构

JavaScript 是一种单线程的语言。这意味着，在没有集群的状况下，你的应用只能使用单个 CPU。笔者喜欢将负载平衡工做留给代理或 NGINX 之类的负载平衡器，而不是交由 Node 的集群模块处理。此外，笔者还偏好使用较小的服务器来运行应用。这样，当须要更多资源时，笔者只需增长服务器的数量就能轻易实现横向扩展。这能帮助笔者最小化当前的运营成本。

4.集装箱化！集装箱化！集装箱化！

如下是部分缘由：

1. 集装箱化会迫使你听从应用开发12大原则。
2. 经过集装箱化，能够实现开发、阶段、测试以及生产环境的对等。
3. 集装箱很是易于横向扩展。
4. 你能够轻易将应用转移到其余云服务上。（防止供应商锁定，使用其余支出服务。）

实现环境集装箱化的理由还有不少不少，一旦掌握了基本知识，集装箱化就不难实现。若是你想打造在任何平台都能使用的灵活应用，集装箱化是必须掌握的第一步。并且，因为集装箱在外部是无状态的，能够支持无限次复制。

5.打造易于扩展与维护的应用

对于 APIs 与服务，选择 Hapi 做为服务器框架，Joi 用于校验，hapi-swagger 插件用于维护活文档，是至关不错的组合。

Hapi 特别适用于模块化的大型应用，同时也能为简单的应用提供支持。此外，最让它不同凡响的是其提供的封装能力。Hapi 提供了许多经过依赖注入访问服务器的「插件」。这样，你能够将业务逻辑按照紧密程度进行分组。将应用分解到这些插件中，能极大地提升扩展能力。项目的操纵也变得极为直白，缘由是不须要学习自定义的插件架构，而 Hapi 自己又提供了丰富的文档资料。

Joi 是一种验证模块，与 Hapi 出自同一班工程师之手（Walmart Labs）。Joi 的 API 与其卓越的功能使得验证变成小菜一碟。你知道如何创建验证模式，所以建立验证模块也变得很是简单。用于验证 UI 中某个表格的一段代码也能够用来验证一个传入的请求、一个模块，或测试。的确是很是使人惊奇。

将 hapi-swagger 插入服务器后，你能够轻易地将任意路径标记为 API 的一部分，hapi-swagger 会帮你生成活文档。更不用说，hapi-swagger 会读取 Joi 验证，为开发者提供细致的 API 文档，而你不用费吹灰之力。不过，使用 Express 或 Koa 也可能获得相同的效果，但笔者仍旧认为 Hapi 是很是惊人的工具。

四.关于后续

本文主要讲的是关于 JavaScript 使用过程当中的一些基础性的心得体验，不必定适合每个人，可是确实也是做者的「踩坑之得」，你们在阅读以后若是有什么想分享的也能够在讨论区进行回复，闭门造车老是不行的。

本文的下一个姊妹篇，主要讲的内容预计为关于 JavaScript 使用过程当中如何提升用户体验和性能优化这方面的内容，敬请期待~

Browser Insight 是一个基于真实用户的 Web 前端性能监控平台，可以帮你们定位网站性能瓶颈，网站加速效果可视化；支持浏览器、微信、App 浏览 HTML 和 HTML5 页面。想阅读更多技术文章，请访问OneAPM 官方技术博客。

本文转自 OneAPM 官方博客