标签 Javascript 下的文章

JSON 已经占领了全世界。当今，任何两个应用程序彼此通过互联网通信时，可以打赌它们在使用 JSON。它已被所有大型企业所采用：十大最受欢迎的 web API 接口列表中（主要由 Google、Facebook 和 Twitter 提供），仅仅只有一个 API 接口是以 XML 的格式开放数据的。 1 这个列表中的 Twitter API 为此做了一个鲜活的注脚：其对 XML 格式的支持到 2013 年结束，其时发布的新版本的 API 取消 XML 格式，转而仅使用 JSON。JSON 也在程序编码级别和文件存储上被广泛采用：在 Stack Overflow（LCTT 译注：一个面向程序员的问答网站）上，现在更多的是关于 JSON 的问题，而不是其他的数据交换格式。 2

XML 仍然在很多地方存在。网络上它被用于 SVG 和 RSS / Atom 信息流。Android 开发者想要获得用户权限许可时，需要在其 APP 的 manifest 文件中声明 —— 此文件是 XML 格式的。XML 的替代品也不仅仅只有 JSON，现在有很多人在使用 YAML 或 Google 的 Protocol Buffers 等技术，但这些技术的受欢迎程度远不如 JSON。目前来看，JSON 是应用程序在网络之间通信的首选协议格式。

考虑到自 2005 年来 Web 编程世界就垂涎于 “异步 JavaScript 和 XML” 而非 “异步 JavaScript 和 JSON” 的技术潜力，你可以发现 JSON 的主导地位是如此的让人惊讶。当然了，这可能与这两种通信格式的受欢迎程度无关，而仅反映出缩写 “AJAX” 似乎比 “AJAJ” 更具吸引力。但是，即使在 2005 年有些人（实际上没有太多人）已经用 JSON 来取代 XML 了，我们不禁要问 XML 的噩运来的如此之快，以至于短短十来年，“异步 JavaScript 和 XML” 这个名称就成为一个很讽刺的误称。那这十来年发生了什么？JSON 怎么会在那么多应用程序中取代了 XML？现在被全世界工程师和系统所使用、依赖的这种数据格式是谁提出的？

JSON 之诞生

2001 年 4 月，首个 JSON 格式的消息被发送出来。此消息是从旧金山湾区某车库的一台计算机发出的，这是计算机历史上重要的的时刻。Douglas Crockford 和 Chip Morningstar 是一家名为 State Software 的技术咨询公司的联合创始人，他们当时聚集在 Morningstar 的车库里测试某个想法，发出了此消息。

在 “AJAX” 这个术语被创造之前，Crockford 和 Morningstar 就已经在尝试构建好用的 AJAX 应用程序了，可是浏览器对其兼容性不好。他们想要在初始页面加载后就将数据传递给应用程序，但其目标要针对所有的浏览器，这就实现不了。

这在今天看来不太可信，但是要记得 2001 年的时候 Internet Explorer（IE）代表了网页浏览器的最前沿技术产品。早在 1999 年的时候，Internet Explorer 5 就支持了原始形式的 XMLHttpRequest，开发者可以使用名为 ActiveX 的框架来访问此对象。Crockford 和 Morningstar 能够使用此技术（在 IE 中）来获取数据，但是在 Netscape 4 中（这是他们想要支持的另一种浏览器）就无法使用这种解决方案。为此 Crockford 和 Morningstar 只得使用一套不同的系统以兼容不同的浏览器。

第一条 JSON 消息如下所示：

<html><head><script>
    document.domain = 'fudco';
    parent.session.receive(
        { to: "session", do: "test",
          text: "Hello world" }
    )
</script></head></html>

消息中只有一小部分类似于今天我们所知的 JSON，本身其实是一个包含有一些 JavaScript 的 HTML 文档。类似于 JSON 的部分只是传递给名为 receive() 的函数的 JavaScript 对象字面量。

Crockford 和 Morningstar 决定滥用 HTML 的帧（<frame>）以发送数据。他们可以让一个帧指向一个返回的上述 HTML 文档的 URL。当接收到 HTML 时，JavaScript 代码段就会运行，就可以把数据对象字面量如实地传递回应用程序。只要小心的回避浏览器保护策略（即子窗口不允许访问父窗口），这种技术就可以正常运行无误。可以看到 Crockford 和 Mornginstar 通过明确地设置文档域这种方法来达到其目的。（这种基于帧的技术，有时称为隐藏帧技术，通常在 90 年代后期，即在广泛使用 XMLHttpRequest 技术之前使用。 3 ）

第一个 JSON 消息的惊人之处在于，它显然不是一种新的数据格式的首次使用。它就是 JavaScript！实际上，以此方式使用 JavaScript 的想法如此简单，Crockford 自己也说过他不是第一个这样做的人。他说 Netscape 公司的某人早在 1996 年就使用 JavaScript 数组字面量来交换信息。 4 因为消息就是 JavaScript，其不需要任何特殊解析工作，JavaScript 解释器就可搞定一切。

最初的 JSON 信息实际上与 JavaScript 解释器发生了冲突。JavaScript 保留了大量的关键字（ECMAScript 6 版本就有 64 个保留字），Crockford 和 Morningstar 无意中在其 JSON 中使用了一个保留字。他们使用了 do 作为了键名，但 do 是解释器中的保留字。因为 JavaScript 使用的保留字太多了，Crockford 做了决定：既然不可避免的要使用到这些保留字，那就要求所有的 JSON 键名都加上引号。被引起来的键名会被 JavaScript 解释器识别成字符串，其意味着那些保留字也可以放心安全的使用。这就为什么今天 JSON 键名都要用引号引起来的原因。

Crockford 和 Morningstar 意识到这技术可以应用于各类应用系统。想给其命名为 “JSML”，即 JavaScript 标记语言 JavaScript Markup Language 的意思，但发现这个缩写已经被一个名为 Java Speech 标记语言的东西所使用了。因此他们决定采用 “JavaScript Object Notation”，缩写为 JSON。他们开始向客户推销，但很快发现客户不愿意冒险使用缺乏官方规范的未知技术。所以 Crockford 决定写一个规范。

2002 年，Crockford 买下了 JSON.org 域名，放上了 JSON 语法及一个解释器的实例例子。该网站仍然在运行，现在已经包含有 2013 年正式批准的 JSON ECMA 标准的显著链接。在该网站建立后，Crockford 并没有过多的推广，但很快发现很多人都在提交各种不同编程语言的 JSON 解析器实现。JSON 的血统显然与 JavaScript 相关联，但很明显 JSON 非常适合于不同语言之间的数据交换。

AJAX 导致的误会

2005 年，JSON 有了一次大爆发。那一年，一位名叫 Jesse James Garrett 的网页设计师和开发者在博客文章中创造了 “AJAX” 一词。他很谨慎地强调：AJAX 并不是新技术，而是 “好几种蓬勃发展的技术以某种强大的新方式汇集在一起。 5 ” AJAX 是 Garrett 给这种正受到青睐的 Web 应用程序的新开发方法的命名。他的博客文章接着描述了开发人员如何利用 JavaScript 和 XMLHttpRequest 构建新型应用程序，这些应用程序比传统的网页更具响应性和状态性。他还以 Gmail 和 Flickr 网站已经使用 AJAX 技术作为了例子。

当然了，“AJAX” 中的 “X” 代表 XML。但在随后的问答帖子中，Garrett 指出，JSON 可以完全替代 XML。他写道：“虽然 XML 是 AJAX 客户端进行数据输入、输出的最完善的技术，但要实现同样的效果，也可以使用像 JavaScript Object Notation（JSON）或任何类似的结构数据方法等技术。 ” 6

开发者确实发现在构建 AJAX 应用程序时可以很容易的使用 JSON，许多人更喜欢它而不是 XML。具有讽刺意味的是，对 AJAX 的兴趣逐渐的导致了 JSON 的普及。大约在这个时候，JSON 引起了博客圈的注意。

2006 年，Dave Winer，一位高产的博主，他也是许多基于 XML 的技术（如 RSS 和 XML-RPC）背后的开发工程师，他抱怨到 JSON 毫无疑问的正在重新发明 XML。尽管人们认为数据交换格式之间的竞争不会导致某一技术的消亡。其写到：

毫无疑问，我可以编写一个例程来解析 JSON，但来看看他们要重新发明一个东西有多大的意义，出于某种原因 XML 本身对他们来说还不够好（我很想听听原因）。谁想干这荒谬之事？查找一棵树然后把节点串起来。可以立马试试。 7

我很理解 Winer 的挫败感。事实上并没有太多人喜欢 XML。甚至 Winer 也说过他不喜欢 XML。 8 但 XML 已被设计成一个可供任何人使用，并且可以用于几乎能想象到的所有事情。归根到底，XML 实际上是一门元语言，允许你为特定应用程序自定义该领域特定的语言。如 Web 信息流技术 RSS 和 SOAP（简单对象访问协议）就是例子。Winer 认为由于通用交换格式所带来的好处，努力达成共识非常重要。XML 的灵活性应该能满足任何人的需求，然而 JSON 格式呢，其并没有比 XML 提供更多东西，除了它抛弃了使 XML 更灵活的那些繁琐的东西。

Crockford 阅读了 Winer 的这篇文章并留下了评论。为了回应 JSON 重新发明 XML 的指责，Crockford 写到：“重造轮子的好处是可以得到一个更好的轮子。” 9

JSON 与 XML 对比

到 2014 年，JSON 已经由 ECMA 标准和 RFC 官方正式认可。它有了自己的 MIME 类型。JSON 已经进入了大联盟时代。

为什么 JSON 比 XML 更受欢迎？

在 JSON.org 网站上，Crockford 总结了一些 JSON 的优势。他写到，JSON 的语法极少，其结构可预测，因此 JSON 更容易被人类和机器理解。 10 其他博主一直关注 XML 的冗长啰嗦及“尖括号负担”。 11 XML 中每个开始标记都必须与结束标记匹配，这意味着 XML 文档包含大量的冗余信息。在未压缩时，XML 文档的体积比同等信息量 JSON 文档的体积大很多，但是，更重要的，这也使 XML 文档更难以阅读。

Crockford 还声称 JSON 的另一个巨大优势是其被设计为数据交换格式。 12 从一开始，它的目的就是在应用程序间传递结构化信息的。而 XML 呢，虽然也可以使用来传递数据，但其最初被设计为文档标记语言。它演变自 SGML（通用标准标记语言），而它又是从被称为 Scribe 的标记语言演变而来，其旨在发展成类似于 LaTeX 一样的文字处理系统。XML 中，一个标签可以包含有所谓的“混合内容”，即带有围绕单词、短语的内嵌标签的文本。这会让人浮现出一副用红蓝笔记录的手稿画面，这是标记语言核心思想的形象比喻。另一方面，JSON 不支持对混合内容模型的清晰构建，但这也意味着它的结构足够简单。一份文档最好的建模就是一棵树，但 JSON 抛弃了这种文档的思想，Crockford 将 JSON 抽象限制为字典和数组，这是所有程序员构建程序时都会使用的最基本的、也最熟悉的元素。

最后，我认为人们不喜欢 XML 是因为它让人困惑。它让人迷惑的地方就是有很多不同的风格。乍一看，XML 本身及其子语言（如 RSS、ATOM、SOAP 或 SVG）之间的界限并不明显。典型的 XML 文档的第一行标识了该 XML 的版本，然后该 XML 文档应该符合特定的子语言。这就有变化需要考虑了，特别是跟 JSON 做比较，JSON 是如此简单，以至于永远不需要编写新版本的 JSON 规范。XML 的设计者试图将 XML 做为唯一的数据交换格式以支配所有格式，就会掉入那个经典的程序员陷阱：过度工程化。XML 非常笼统及概念化，所以很难于简单的使用。

在 2000 年的时候，发起了一场使 HTML 符合 XML 标准的活动，发布了一份符合 XML 标准的 HTML 开发规范，这就此后很出名的 XHTML。虽然一些浏览器厂商立即开始支持这个新标准，但也很明显，大部分基于 HTML 技术的开发者不愿意改变他们的习惯。新标准要求对 XHTML 文档进行严格的验证，而不是基于 HTML 的基准。但大多的网站都是依赖于 HTML 的宽容规则的。到 2009 年的时候，试图编写第二版本的 XHTML 标准的努力已经流产，因为未来已清晰可见，HTML 将会发展为 HTML5（一种不强制要求接受 XML 规则的标准）。

如果 XHTML 的努力取得了成功，那么 XML 可能会成为其设计者所希望的通用数据格式。想象一下，一个 HTML 文档和 API 响应具有完全相同结构的世界。在这样的世界中，JSON 可能不会像现在一样普遍存在。但我把 HTML 的失败看做是 XML 阵营的一种道义上的失败。如果 XML 不是 HTML 的最佳工具，那么对于其他应用程序，也许会有更好的工具出现。在这个世界，我们的世界，很容易看到像 JSON 格式这样的足够简单、量体裁衣的才能获得更大的成功。

如果你喜欢这博文，每两周会更新一次！ 请在 Twitter 上关注 @TwoBitHistory 或订阅 RSS feed，以确保得到更新的通知。

  1. http://www.cs.tufts.edu/comp/150IDS/final_papers/tstras01.1/FinalReport/FinalReport.html#software ↩
  2. https://insights.stackoverflow.com/trends?tags=json%2Cxml%2Cprotocol-buffers%2Cyaml%2Ccsv ↩
  3. Zakas, Nicholas C., et al. “What Is Ajax?” Professional Ajax, 2nd ed., Wiley, 2007. ↩
  4. https://youtu.be/-C-JoyNuQJs?t=32s ↩
  5. http://adaptivepath.org/ideas/ajax-new-approach-web-applications/ ↩
  6. 同上 ↩
  7. http://scripting.com/2006/12/20.html ↩
  8. http://blogoscoped.com/archive/2009-03-05-n15.html ↩
  9. https://scripting.wordpress.com/2006/12/20/scripting-news-for-12202006/#comment-26383 ↩
  10. http://www.json.org/xml.html ↩
  11. https://blog.codinghorror.com/xml-the-angle-bracket-tax ↩
  12. https://youtu.be/-C-JoyNuQJs?t=33m50sgg ↩

via: https://twobithistory.org/2017/09/21/the-rise-and-rise-of-json.html

作者：Two-Bit History 选题：lujun9972 译者：runningwater 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

应用 Align 中，用户主页的控制面板

从构思到部署应用程序的简单分步指南

我在 Grace Hopper Program 为期三个月的编码训练营即将结束，实际上这篇文章的标题有些纰漏 —— 现在我已经构建了 三个 全栈应用：从零开始的电子商店、我个人的 私人黑客马拉松项目，还有这个“三周的结业项目”。这个项目是迄今为止强度最大的 —— 我和另外两名队友共同花费三周的时光 —— 而它也是我在训练营中最引以为豪的成就。这是我目前所构建和涉及的第一款稳定且复杂的应用。

如大多数开发者所知，即使你“知道怎么编写代码”，但真正要制作第一款全栈的应用却是非常困难的。JavaScript 生态系统出奇的大：有包管理器、模块、构建工具、转译器、数据库、库文件，还要对上述所有东西进行选择，难怪如此多的编程新手除了 Codecademy 的教程外，做不了任何东西。这就是为什么我想让你体验这个决策的分布教程，跟着我们队伍的脚印，构建可用的应用。

首先，简单的说两句。Align 是一个 web 应用，它使用直观的时间线界面帮助用户管理时间、设定长期目标。我们的技术栈有：用于后端服务的 Firebase 和用于前端的 React。我和我的队友在这个短视频中解释的更详细。

从第 1 天（我们组建团队的那天）开始，直到最终应用的完成，我们是如何做的？这里是我们采取的步骤纲要：

第 1 步：构思

第一步是弄清楚我们到底要构建什么东西。过去我在 IBM 中当咨询师的时候，我和合作组长一同带领着构思工作组。从那之后，我一直建议小组使用经典的头脑风暴策略，在会议中我们能够提出尽可能多的想法 —— 即使是 “愚蠢的想法” —— 这样每个人的大脑都在思考，没有人因顾虑而不敢发表意见。

在产生了好几个关于应用的想法时，我们把这些想法分类记录下来，以便更好的理解我们大家都感兴趣的主题。在我们这个小组中，我们看到实现想法的清晰趋势，需要自我改进、设定目标、情怀，还有个人发展。我们最后从中决定了具体的想法：做一个用于设置和管理长期目标的控制面板，有保存记忆的元素，可以根据时间将数据可视化。

从此，我们创作出了一系列用户故事（从一个终端用户的视角，对我们想要拥有的功能进行描述），阐明我们到底想要应用实现什么功能。

第 2 步：UX/UI 示意图

接下来，在一块白板上，我们画出了想象中应用的基本视图。结合了用户故事，以便理解在应用基本框架中这些视图将会如何工作。

这些骨架确保我们意见统一，提供了可预见的蓝图，让我们向着计划的方向努力。

第 3 步：选好数据结构和数据库类型

到了设计数据结构的时候。基于我们的示意图和用户故事，我们在 Google doc 中制作了一个清单，它包含我们将会需要的模型和每个模型应该包含的属性。我们知道需要 “目标（goal）” 模型、“用户（user）”模型、“里程碑（milestone）”模型、“记录（checkin）”模型还有最后的“资源（resource）”模型和“上传（upload）”模型，

最初的数据模型结构

在正式确定好这些模型后，我们需要选择某种 类型 的数据库：“关系型的”还是“非关系型的”（也就是“SQL”还是“NoSQL”）。由于基于表的 SQL 数据库需要预定义的格式，而基于文档的 NoSQL 数据库却可以用动态格式描述非结构化数据。

对于我们这个情况，用 SQL 型还是 No-SQL 型的数据库没多大影响，由于下列原因，我们最终选择了 Google 的 NoSQL 云数据库 Firebase：

  1. 它能够把用户上传的图片保存在云端并存储起来
  2. 它包含 WebSocket 功能，能够实时更新
  3. 它能够处理用户验证，并且提供简单的 OAuth 功能。

我们确定了数据库后，就要理解数据模型之间的关系了。由于 Firebase 是 NoSQL 类型，我们无法创建联合表或者设置像 “记录 （Checkins）属于目标（Goals）” 的从属关系。因此我们需要弄清楚 JSON 树是什么样的，对象是怎样嵌套的（或者不是嵌套的关系）。最终，我们构建了像这样的模型：

我们最终为目标（Goal）对象确定的 Firebase 数据格式。注意里程碑（Milestones）和记录（Checkins）对象嵌套在 Goals 中。

（注意: 出于性能考虑，Firebase 更倾向于简单、常规的数据结构, 但对于我们这种情况，需要在数据中进行嵌套，因为我们不会从数据库中获取目标（Goal）却不获取相应的子对象里程碑（Milestones）和记录（Checkins）。）

第 4 步：设置好 Github 和敏捷开发工作流

我们知道，从一开始就保持井然有序、执行敏捷开发对我们有极大好处。我们设置好 Github 上的仓库，我们无法直接将代码合并到主（master）分支，这迫使我们互相审阅代码。

我们还在 Waffle.io 网站上创建了敏捷开发的面板，它是免费的，很容易集成到 Github。我们在 Waffle 面板上罗列出所有用户故事以及需要我们去修复的 bug。之后当我们开始编码时，我们每个人会为自己正在研究的每一个用户故事创建一个 git 分支，在完成工作后合并这一条条的分支。

我们还开始保持晨会的习惯，讨论前一天的工作和每一个人遇到的阻碍。会议常常决定了当天的流程 —— 哪些人要结对编程，哪些人要独自处理问题。

我认为这种类型的工作流程非常好，因为它让我们能够清楚地找到自己的定位，不用顾虑人际矛盾地高效执行工作。

第 5 步： 选择、下载样板文件

由于 JavaScript 的生态系统过于复杂，我们不打算从最底层开始构建应用。把宝贵的时间花在连通 Webpack 构建脚本和加载器，把符号链接指向项目工程这些事情上感觉很没必要。我的团队选择了 Firebones 框架，因为它恰好适用于我们这个情况，当然还有很多可供选择的开源框架。

第 6 步：编写后端 API 路由（或者 Firebase 监听器）

如果我们没有用基于云的数据库，这时就应该开始编写执行数据库查询的后端高速路由了。但是由于我们用的是 Firebase，它本身就是云端的，可以用不同的方式进行代码交互，因此我们只需要设置好一个可用的数据库监听器。

为了确保监听器在工作，我们用代码做出了用于创建目标（Goal）的基本用户表格，实际上当我们完成表格时，就看到数据库执行可更新。数据库就成功连接了！

第 7 步：构建 “概念证明”

接下来是为应用创建 “概念证明”，也可以说是实现起来最复杂的基本功能的原型，证明我们的应用 可以 实现。对我们而言，这意味着要找个前端库来实现时间线的渲染，成功连接到 Firebase，显示数据库中的一些种子数据。

Victory.JS 绘制的简单时间线

我们找到了基于 D3 构建的响应式库 Victory.JS，花了一天时间阅读文档，用 VictoryLine 和 VictoryScatter 组件实现了非常基础的示例，能够可视化地显示数据库中的数据。实际上，这很有用！我们可以开始构建了。

第 8 步：用代码实现功能

最后，是时候构建出应用中那些令人期待的功能了。取决于你要构建的应用，这一重要步骤会有些明显差异。我们根据所用的框架，编码出不同的用户故事并保存在 Waffle 上。常常需要同时接触前端和后端代码（比如，创建一个前端表格同时要连接到数据库）。我们实现了包含以下这些大大小小的功能：

  • 能够创建新目标、里程碑和记录
  • 能够删除目标，里程碑和记录
  • 能够更改时间线的名称，颜色和详细内容
  • 能够缩放时间线
  • 能够为资源添加链接
  • 能够上传视频
  • 在达到相关目标的里程碑和记录时弹出资源和视频
  • 集成富文本编辑器
  • 用户注册、验证、OAuth 验证
  • 弹出查看时间线选项
  • 加载画面

有各种原因，这一步花了我们很多时间 —— 这一阶段是产生最多优质代码的阶段，每当我们实现了一个功能，就会有更多的事情要完善。

第 9 步： 选择并实现设计方案

当我们使用 MVP 架构实现了想要的功能，就可以开始清理，对它进行美化了。像表单，菜单和登陆栏等组件，我的团队用的是 Material-UI，不需要很多深层次的设计知识，它也能确保每个组件看上去都很圆润光滑。

这是我制作的最喜爱功能之一了。它美得令人心旷神怡。

我们花了一点时间来选择颜色方案和编写 CSS ，这让我们在编程中休息了一段美妙的时间。期间我们还设计了 logo 图标，还上传了网站图标。

第 10 步： 找出并减少 bug

我们一开始就应该使用测试驱动开发的模式，但时间有限，我们那点时间只够用来实现功能。这意味着最后的两天时间我们花在了模拟我们能够想到的每一种用户流，并从应用中找出 bug。

这一步是最不具系统性的，但是我们发现了一堆够我们忙乎的 bug，其中一个是在某些情况下加载动画不会结束的 bug，还有一个是资源组件会完全停止运行的 bug。修复 bug 是件令人恼火的事情，但当软件可以运行时，又特别令人满足。

第 11 步：应用上线

最后一步是上线应用，这样才可以让用户使用它！由于我们使用 Firebase 存储数据，因此我们使用了 Firebase Hosting，它很直观也很简单。如果你要选择其它的数据库，你可以使用 Heroku 或者 DigitalOcean。一般来讲，可以在主机网站中查看使用说明。

我们还在 Namecheap.com 上购买了一个便宜的域名，这让我们的应用更加完善，很容易被找到。

好了，这就是全部的过程 —— 我们都是这款实用的全栈应用的合作开发者。如果要继续讲，那么第 12 步将会是对用户进行 A/B 测试，这样我们才能更好地理解：实际用户与这款应用交互的方式和他们想在 V2 版本中看到的新功能。

但是，现在我们感到非常开心，不仅是因为成品，还因为我们从这个过程中获得了难以估量的知识和理解。点击 这里 查看 Align 应用！

Align 团队：Sara Kladky（左），Melanie Mohn（中），还有我自己。

via: https://medium.com/ladies-storm-hackathons/how-we-built-our-first-full-stack-javascript-web-app-in-three-weeks-8a4668dbd67c?imm_mid=0f581a&cmp=em-web-na-na-newsltr_20170816

作者：Sophia Ciocca 译者：BriFuture 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

图表及其它可视化方式让传递数据的信息变得更简单。

对于数据可视化和制作精美网站来说，图表和图形很重要。视觉上的展示让分析大块数据及传递信息变得更简单。JavaScript 图表库能让数据以极好的、易于理解的和交互的方式进行可视化，还能够优化你的网站设计。

本文会带你学习最好的 3 个开源 JavaScript 图表库。

1、 Chart.js

Chart.js 是一个开源的 JavaScript 库，你可以在自己的应用中用它创建生动美丽和交互式的图表。使用它需要遵循 MIT 协议。

使用 Chart.js，你可以创建各种各样令人印象深刻的图表和图形，包括条形图、折线图、范围图、线性标度和散点图。它可以响应各种设备，使用 HTML5 Canvas 元素进行绘制。

示例代码如下，它使用该库绘制了一个条形图。本例中我们使用 Chart.js 的内容分发网络（CDN）来包含这个库。注意这里使用的数据仅用于展示。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>

<body>
   
    <canvas id="bar-chart" width=300" height="150"></canvas>
  
    <script>
     
new Chart(document.getElementById("bar-chart"), {
    type: 'bar',
    data: {
      labels: ["North America", "Latin America", "Europe", "Asia", "Africa"],
      datasets: [
        {
          label: "Number of developers (millions)",
          backgroundColor: ["red", "blue","yellow","green","pink"],
          data: [7,4,6,9,3]
        }
      ]
    },
    options: {
      legend: { display: false },
      title: {
        display: true,
        text: 'Number of Developers in Every Continent'
      },

      scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }

    }

});
    </script>
   
</body>
</html>

如你所见，通过设置 type 和 bar 来构造条形图。你可以把条形体的方向改成其他类型 —— 比如把 type 设置成 horizontalBar。

在 backgroundColor 数组参数中提供颜色类型，就可以设置条形图的颜色。

颜色被分配给关联数组中相同索引的标签和数据。例如，第二个标签 “Latin American”，颜色会是 “蓝色（blue）”（第二个颜色），数值是 4（data 中的第二个数字）。

代码的执行结果如下。

2、 Chartist.js

Chartist.js 是一个简单的 JavaScript 动画库，你能够自制美丽的响应式图表，或者进行其他创作。使用它需要遵循 WTFPL 或者 MIT 协议。

这个库是由一些对现有图表工具不满的开发者进行开发的，它可以为设计师或程序员提供美妙的功能。

在项目中包含 Chartist.js 库后，你可以使用它们来创建各式各样的图表，包括动画，条形图和折线图。它使用 SVG 来动态渲染图表。

这里是使用该库绘制一个饼图的例子。

<!DOCTYPE html>
<html>
<head>
   
    <link href="https//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
   
    <style>
        .ct-series-a .ct-slice-pie {
            fill: hsl(100, 20%, 50%); /* filling pie slices */
            stroke: white; /*giving pie slices outline */          
            stroke-width: 5px;  /* outline width */
          }

          .ct-series-b .ct-slice-pie {
            fill: hsl(10, 40%, 60%);
            stroke: white;
            stroke-width: 5px;
          }

          .ct-series-c .ct-slice-pie {
            fill: hsl(120, 30%, 80%);
            stroke: white;
            stroke-width: 5px;
          }

          .ct-series-d .ct-slice-pie {
            fill: hsl(90, 70%, 30%);
            stroke: white;
            stroke-width: 5px;
          }
          .ct-series-e .ct-slice-pie {
            fill: hsl(60, 140%, 20%);
            stroke: white;
            stroke-width: 5px;
          }

    </style>
     </head>

<body>

    <div class="ct-chart ct-golden-section"></div>

    <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

    <script>
       
      var data = {
            series: [45, 35, 20]
            };

      var sum = function(a, b) { return a + b };

      new Chartist.Pie('.ct-chart', data, {
        labelInterpolationFnc: function(value) {
          return Math.round(value / data.series.reduce(sum) * 100) + '%';
            }
              });
     </script>
</body>
</html>

使用 Chartist JavaScript 库，你可以使用各种预先构建好的 CSS 样式，而不是在项目中指定各种与样式相关的部分。你可以使用这些样式来设置已创建的图表的外观。

比如，预创建的 CSS 类 .ct-chart 是用来构建饼状图的容器。还有 .ct-golden-section 类可用于获取纵横比，它基于响应式设计进行缩放，帮你解决了计算固定尺寸的麻烦。Chartist 还提供了其它类别的比例容器，你可以在自己的项目中使用它们。

为了给各个扇形设置样式，可以使用默认的 .ct-serials-a 类。字母 a 是根据系列的数量变化的（a、b、c，等等），因此它与每个要设置样式的扇形相对应。

Chartist.Pie 方法用来创建一个饼状图。要创建另一种类型的图表，比如折线图，请使用 Chartist.Line。

代码的执行结果如下。

3、 D3.js

D3.js 是另一个好用的开源 JavaScript 图表库。使用它需要遵循 BSD 许可证。D3 的主要用途是，根据提供的数据，处理和添加文档的交互功能，。

借助这个 3D 动画库，你可以通过 HTML5、SVG 和 CSS 来可视化你的数据，并且让你的网站变得更精美。更重要的是，使用 D3，你可以把数据绑定到文档对象模型（DOM）上，然后使用基于数据的函数改变文档。

示例代码如下，它使用该库绘制了一个简单的条形图。

<!DOCTYPE html>
<html>
<head>
     
    <style>
    .chart div {
      font: 15px sans-serif;
      background-color: lightblue;
      text-align: right;
      padding:5px;
      margin:5px;
      color: white;
      font-weight: bold;
    }
       
    </style>
     </head>

<body>

    <div class="chart"></div>
   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>

    <script>

      var data = [342,222,169,259,173];

      d3.select(".chart")
        .selectAll("div")
        .data(data)
          .enter()
          .append("div")
          .style("width", function(d){ return d + "px"; })
          .text(function(d) { return d; });
       
 
    </script>
</body>
</html>

使用 D3 库的主要概念是应用 CSS 样式选择器来定位 DOM 节点，然后对其执行操作，就像其它的 DOM 框架，比如 JQuery。

将数据绑定到文档上后，.enter() 函数会被调用，为即将到来的数据构建新的节点。所有在 .enter() 之后调用的方法会为数据中的每一个项目调用一次。

代码的执行结果如下。

总结

JavaScript 图表库提供了强大的工具，你可以将自己的网络资源进行数据可视化。通过这三个开源库，你可以把自己的网站变得更好看，更容易使用。

你知道其它强大的用于创造 JavaScript 动画效果的前端库吗？请在下方的评论区留言分享。

via: https://opensource.com/article/18/9/open-source-javascript-chart-libraries

作者：Dr.Michael J.Garbade 选题：lujun9972 译者：BriFuture 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

在我的上一篇文章中，我试图解释为什么我认为 Hyperapp 是一个 React 或 Vue 的可用替代品，原因是，我发现它易于起步。许多人批评这篇文章，认为它自以为是，并没有给其它框架一个展示自己的机会。因此，在这篇文章中，我将尽可能客观的通过提供一些最小化的例子来比较这三个框架，以展示它们的能力。

耳熟能详的计时器例子

计时器可能是响应式编程中最常用的例子之一，极其易于理解：

  • 你需要一个变量 count 保持对计数器的追踪。
  • 你需要两个方法来增加或减少 count 变量的值。
  • 你需要一种方法来渲染 count 变量，并将其呈现给用户。
  • 你需要挂载到这两个方法上的两个按钮，以便在用户和它们产生交互时变更 count 变量。

下述代码是上述所有三个框架的实现：

使用 React、Vue 和 Hyperapp 实现的计数器

这里或许会有很多要做的事情，特别是当你并不熟悉其中的一个或多个步骤的时候，因此，我们来一步一步解构这些代码：

  • 这三个框架的顶部都有一些 import 语句
  • React 更推崇面向对象的范式，就是创建一个 Counter 组件的 class。Vue 遵循类似的范式，通过创建一个新的 Vue 类的实例并将信息传递给它来实现。最后，Hyperapp 坚持函数范式，同时完全彼此分离 view、state和action。
  • 就 count 变量而言， React 在组件的构造函数内对其进行实例化，而 Vue 和 Hyperapp 则分别是在它们的 data 和 state 中设置这些属性。
  • 继续看，你可能注意到 React 和 Vue 有相同的方法来与 count 变量进行交互。 React 使用继承自 React.Component 的 setState 方法来修改它的状态，而 Vue 直接修改 this.count。 Hyperapp 使用 ES6 的双箭头语法来实现这个方法，而据我所知，这是唯一一个推荐使用这种语法的框架，React 和 Vue 需要在它们的方法内使用 this。另一方面，Hyperapp 的方法需要将状态作为参数，这意味着可以在不同的上下文中重用它们。
  • 这三个框架的渲染部分实际上是相同的。唯一的细微差别是 Vue 需要一个函数 h 作为参数传递给渲染器，事实上 Hyperapp 使用 onclick 替代 onClick ，以及基于每个框架中实现状态的方式引用 count 变量。
  • 最后，所有的三个框架都被挂载到了 #app 元素上。每个框架都有稍微不同的语法，Vue 则使用了最直接的语法，通过使用元素选择器而不是使用元素来提供最大的通用性。

计数器案例对比意见

同时比较所有的三个框架，Hyperapp 需要最少的代码来实现计数器，并且它是唯一一个使用函数范式的框架。然而，Vue 的代码在绝对长度上似乎更短一些，元素选择器的挂载方式是一个很好的增强。React 的代码看起来最多，但是并不意味着代码不好理解。

使用异步代码

偶尔你可能需要处理异步代码。最常见的异步操作之一是发送请求给一个 API。为了这个例子的目的，我将使用一个[占位 API] 以及一些假数据来渲染一个文章列表。必须做的事情如下：

  • 在状态里保存一个 posts 的数组
  • 使用一个方法和正确的 URL 来调用 fetch() ，等待返回数据，转化为 JSON，并最终使用接收到的数据更新 posts 变量。
  • 渲染一个按钮，这个按钮将调用抓取文章的方法。
  • 渲染有主键的 posts 列表。

从一个 RESTFul API 抓取数据

让我们分解上面的代码，并比较三个框架：

  • 与上面的技术里例子类似，这三个框架之间的存储状态、渲染视图和挂载非常相似。这些差异与上面的讨论相同。
  • 在三个框架中使用 fetch() 抓取数据都非常简单，并且可以像预期一样工作。然而其中的关键在于， Hyperapp 处理异步操作和其它两种框架有些不同。当数据被接收到并转换为 JSON 时，该操作将调用不同的同步动作以取代直接在异步操作中修改状态。
  • 就代码长度而言，Hyperapp 依然只用最少的代码行数实现了相同的结果，但是 Vue 的代码看起来不那么的冗长，同时拥有最少的绝对字符长度。

异步代码对比意见

无论你选择哪种框架，异步操作都非常简单。在应用异步操作时， Hyperapp 可能会迫使你去遵循编写更加函数化和模块化的代码的方式。但是另外两个框架也确实可以做到这一点，并且在这一方面给你提供更多的选择。

To-Do 列表组件案例

在响应式编程中，最出名的例子可能是使用每一个框架里来实现 To-Do 列表。我不打算在这里实现整个部分，我只实现一个无状态的组件，来展示三个框架如何创建更小的可复用的块来协助构建应用程序。

示例 TodoItem 实现

上面的图片展示了每一个框架一个例子，并为 React 提供了一个额外的例子。接下来是我们从它们四个中看到的：

  • React 在编程范式上最为灵活。它支持函数组件，也支持类组件。它还支持你在右下角看到的 Hyperapp 组件，无需任何修改。
  • Hyperapp 还支持 React 的函数组件实现，这意味着两个框架之间还有很多的实验空间。
  • 最后出现的 Vue 有着其合理而又奇怪的语法，即使是对另外两个框架很有经验的人，也不能马上理解其含义。
  • 在长度方面，所有的案例代码长度非常相似，在 React 的一些方法中稍微冗长一些。

To-Do 列表项目对比意见

Vue 需要花费一些时间来熟悉，因为它的模板和其它两个框架有一些不同。React 非常的灵活，支持多种不同的方法来创建组件，而 HyperApp 保持一切简单，并提供与 React 的兼容性，以免你希望在某些时刻进行切换。

生命周期方法比较

另一个关键对比是组件的生命周期事件，每一个框架允许你根据你的需要来订阅和处理事件。下面是我根据各框架的 API 参考手册创建的表格：

生命周期方式比较

  • Vue 提供了最多的生命周期钩子，提供了处理生命周期事件之前或之后发生的任何事件的机会。这能有效帮助管理复杂的组件。
  • React 和 Hyperapp 的生命周期钩子非常类似，React 将 unmount 和 destory 绑定在了一起，而 Hyperapp 则将 create 和 mount 绑定在了一起。两者在处理生命周期事件方面都提供了相当多的控制。
  • Vue 根本没有处理 unmount （据我所理解），而是依赖于 destroy 事件在组件稍后的生命周期进行处理。 React 不处理 destory 事件，而是选择只处理 unmount 事件。最终，HyperApp 不处理 create 事件，取而代之的是只依赖 mount 事件。

生命周期对比意见

总的来说，每个框架都提供了生命周期组件，它们帮助你处理组件生命周期中的许多事情。这三个框架都为它们的生命周期提供了钩子，其之间的细微差别，可能源自于实现和方案上的根本差异。通过提供更细粒度的时间处理，Vue 可以更进一步的允许你在开始或结束之后处理生命周期事件。

性能比较

除了易用性和编码技术以外，性能也是大多数开发人员考虑的关键因素，尤其是在进行更复杂的应用程序时。js-framework-benchmark 是一个很好的用于比较框架的工具，所以让我们看看每一组测评数据数组都说了些什么：

测评操作表

  • 与三个框架的有主键操作相比，无主键操作更快。
  • 无主键的 React 在所有六种对比中拥有最强的性能，它在所有测试上都有令人深刻的表现。
  • 有主键的 Vue 只比有主键的 React 性能稍强，而无主键的 Vue 要比无主键的 React 性能明显差。
  • Vue 和 Hyperapp 在进行局部更新的性能测试时遇见了一些问题，与此同时，React 似乎对该问题进行很好的优化。

启动测试

  • Hyperapp 是三个框架中最轻量的，而 React 和 Vue 有非常小的大小差异。
  • Hyperapp 具有最快的启动时间，这得益于它极小的大小和极简的 API
  • Vue 在启动上比 React 好一些，但是差异非常小。

内存分配测试

  • Hyperapp 是三者中对资源依赖最小的一个，与其它两者相比，任何一个操作都需要更少的内存。
  • 资源消耗不是非常高，三者都应该在现代硬件上进行类似的操作。

性能对比意见

如果性能是一个问题，你应该考虑你正在使用什么样的应用程序以及你的需求是什么。看起来 Vue 和 React 用于更复杂的应用程序更好，而 Hyperapp 更适合于更小的应用程序、更少的数据处理和需要快速启动的应用程序，以及需要在低端硬件上工作的应用程序。

但是，要记住，这些测试远不能代表一般场景，所以在现实场景中可能会看到不同的结果。

额外备注

比较 React、Vue 和 Hyperapp 可能像在许多方面比较苹果、橘子。关于这些框架还有一些其它的考虑，它们可以帮助你决定使用另一个框架。

  • React 通过引入片段，避免了相邻的 JSX 元素必须封装在父元素中的问题，这些元素允许你将子元素列表分组，而无需向 DOM 添加额外的节点。
  • React 还为你提供更高级别的组件，而 VUE 为你提供重用组件功能的 MIXIN。
  • Vue 允许使用模板来分离结构和功能，从而更好的分离关注点。
  • 与其它两个相比，Hyperapp 感觉像是一个较低级别的 API，它的代码短得多，如果你愿意调整它并学习它的工作原理，那么它可以提供更多的通用性。

结论

我认为如果你已经阅读了这么多，你已经知道哪种工具更适合你的需求。毕竟，这不是讨论哪一个更好，而是讨论哪一个更适合每种情况。总而言之:

  • React 是一个非常强大的工具，围绕它有大规模的开发者社区，可能会帮助你找到一个工作。入门并不难，但是掌握它肯定需要很多时间。然而，这是非常值得去花费你的时间全面掌握的。
  • 如果你过去曾使用过另外的 JavaScript 框架，Vue 可能看起来有点奇怪，但它也是一个非常有趣的工具。如果 React 不是你所喜欢的，那么它可能是一个可行的、值得学习的选择。它有一些非常酷的内置功能，其社区也在增长中，甚至可能要比 React 增长还要快。
  • 最后，Hyperapp 是一个为小型项目而生的很酷的小框架，也是初学者入门的好地方。它提供比 React 或 Vue 更少的工具，但是它能帮助你快速构建原型并理解许多基本原理。你为它编写的许多代码和其它两个框架兼容，要么立即能用，或者是稍做更改就行，你可以在对它们中另外一个有信心时切换框架。

作者简介：

喜欢编码的 Web 开发者，“30 秒编码” （ https://30secondsofcode.org/）和mini.css框架（http://minicss.org ） 的创建者。

via: https://hackernoon.com/javascript-framework-comparison-with-examples-react-vue-hyperapp-97f064fb468d

作者：Angelos Chalaris
译者：Bestony
校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

如果你是一位想要深入机器学习的 JavaScript 程序员或想成为一位使用 JavaScript 的机器学习专家，那么这些开源框架也许会吸引你。

开源工具的涌现使得开发者能够更加轻松地开发应用，这一点使机器学习领域本身获得了极大增长。（例如，AndreyBu，他来自德国，在机器学习领域拥有五年以上的经验，他一直在使用各种各样的开源框架来创造富有魅力的机器学习项目。）

虽然 Python 是绝大多数的机器学习框架所采用的语言，但是 JavaScript 也并没有被抛下。JavaScript 开发者可以在浏览器中使用各种框架来训练和部署机器学习模型。

下面是 JavaScript 中最热门五个机器学习框架

1、 TensorFlow.js

TensorFlow.js 是一个开源库，它使你能在浏览器中完整地运行机器学习程序，它是 Deeplearn.js 的继承者，Deeplearn.js 不再更新了。TensorFlow.js 在 Deeplearn.js 功能的基础上进行了改善，使你能够充分利用浏览器，得到更加深入的机器学习经验。

通过这个开源库，你可以在浏览器中使用有各种功能的、直观的 API 来定义、训练和部署模型。除此之外，它自动提供 WebGL 和 Node.js 的支持。

如果您有了一个已经训练过的模型，你想要导入到浏览器中。TensorFlow.js 可以让你做到这一点，你也可以在不离开浏览器的情况下重新训练已有的模型。

2、 机器学习工具库

现在有很多在浏览器中提供广泛的机器学习功能的资源型开源工具，这个机器学习工具库就是这些开源工具的集合。这个工具库为好几种机器学习算法提供支持，包括非监督式学习、监督式学习、数据处理、人工神经网络（ANN）、数学和回归。

如果你以前使用 Python，现在想找类似于 Scikit-learn 的，能在浏览器中使用 JavaScript 进行机器学习的工具，这套工具会满足你的要求。

3、 Keras.js

Keras.js 是另外一个热门的开源框架，它使你能够在浏览器中运行机器学习模型，它使用 WebGL 来提供 GPU 模式的支持。如果你有使用 Node.js 的模型，你就只能在 GPU 模式下运行它。Keras.js 还为使用任意后端框架的模型训练提供支持，例如 Microsoft Cognitive Toolkit (CNTK) 。

一些 Keras 模型可以部署在客户端浏览器上，包括 Inception v3 (训练在 ImageNet 上)，50 层冗余网络(训练在 ImageNet 上)，和卷积变化自动编码器(训练在 MNIST 上)。

4、 Brain.js

机器学习里的概念非常重要，它可能会使刚开始进入这个领域的人们气馁，这个领域里的学术用语和专业词汇可能会使初学者感到崩溃，而解决以上问题的能力就是 Brain.js 的优势所在。它是开源的，基于 JavaScript 的框架，简化了定义、训练和运行神经网络的流程。

如果你是一个 JavaScript 开发者，并且在机器学习领域是完全的新手，Brain.js 能减低你学习的难度曲线。它可以和 Node.js 一起使用，或者运行在客户端浏览器里来训练机器学习模型。Brain.js 支持部分类型的神经网络，包括前馈式网络、Ellman 网络，和门循环单元网络。

5、 STDLib

STDLib 是一个基于 JavaScript 和 Node.js 应用的开源库，如果您正在寻找一种在浏览器中运行，支持科学和数字化的基于 web 的机器学习应用，STDLib 能满足你的需要。

这个库能提供全面而先进的数学和统计学上的功能，来帮助你构建高性能的机器学习模型。你同样也可以使用它丰富的功能来构建应用程序和其他的库。除此之外，如果你想要一个数据可视化和探索性数据分析的框架 —— STDLib，你，值得拥有。

总结

如果你是一个 JavaScript 开发者，并且打算深入研究令人兴奋的机器学习世界，或者说，你是一个机器学习方面的专家，打算开始尝试使用 JavaScript ，那么上述的开源框架会激起您的兴趣。

你有知道其他的，提供在浏览器里运行机器学习功能的开源库吗？请在下面的评论区里告诉我们。

via: https://opensource.com/article/18/5/machine-learning-javascript-frameworks

作者：Dr.Michael J.Garbade 选题：lujun9972 译者：hopefully2333 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

我喜欢 Vue。当我在 2016 年第一次接触它时，也许那时我已经对 JavaScript 框架感到疲劳了，因为我已经具有Backbone、Angular、React 等框架的经验，没有太多的热情去尝试一个新的框架。直到我在 Hacker News 上读到一份评论，其描述 Vue 是类似于“新 jQuery” 的 JavaScript 框架，从而激发了我的好奇心。在那之前，我已经相当满意 React 这个框架，它是一个很好的框架，建立于可靠的设计原则之上，围绕着视图模板、虚拟 DOM 和状态响应等技术。而 Vue 也提供了这些重要的内容。

在这篇文章中，我旨在解释为什么 Vue 适合我，为什么在上文中那些我尝试过的框架中选择它。也许你将同意我的一些观点，但至少我希望能够给大家使用 Vue 开发现代 JavaScript 应用一些灵感。

1、 极少的模板语法

Vue 默认提供的视图模板语法是极小的、简洁的和可扩展的。像其他 Vue 部分一样，可以很简单的使用类似 JSX 一样语法，而不使用标准的模板语法（甚至有官方文档说明了如何做），但是我觉得没必要这么做。JSX 有好的方面，也有一些有依据的批评，如混淆了 JavaScript 和 HTML，使得很容易导致在模板中出现复杂的代码，而本来应该分开写在不同的地方的。

Vue 没有使用标准的 HTML 来编写视图模板，而是使用极少的模板语法来处理简单的事情，如基于视图数据迭代创建元素。

<template>
  <div id="app">
    <ul>
      <li v-for='number in numbers' :key='number'>{{ number }}</li>
    </ul>
    <form @submit.prevent='addNumber'>
      <input type='text' v-model='newNumber'>
      <button type='submit'>Add another number</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
    addNumber() {
      const num = +this.newNumber;
      if (typeof num === 'number' && !isNaN(num)) {
        this.numbers.push(num);
      }
    }
  },
  data() {
    return {
      newNumber: null,
      numbers: [1, 23, 52, 46]
    };
  }
}
</script>

<style lang="scss">
ul {
  padding: 0;
  li {
    list-style-type: none;
    color: blue;
  }
}
</style>

我也喜欢 Vue 提供的简短绑定语法，: 用于在模板中绑定数据变量，@ 用于绑定事件。这是一个细节，但写起来很爽而且能够让你的组件代码简洁。

2、 单文件组件

大多数人使用 Vue，都使用“单文件组件”。本质上就是一个 .vue 文件对应一个组件，其中包含三部分（CSS、HTML和JavaScript）。

这种技术结合是对的。它让人很容易在一个单独的地方了解每个组件，同时也非常好的鼓励了大家保持每个组件代码的简短。如果你的组件中 JavaScript、CSS 和 HTML 代码占了很多行，那么就到了进一步模块化的时刻了。

在使用 Vue 组件中的 <style> 标签时，我们可以添加 scoped 属性。这会让整个样式完全的封装到当前组件，意思是在组件中如果我们写了 .name 的 css 选择器，它不会把样式应用到其他组件中。我非常喜欢这种方式来应用样式而不是像其他主要框架流行在 JS 中编写 CSS 的方式。

关于单文件组件另一个好处是 .vue 文件实际上是一个有效的 HTML 5 文件。<template>、 <script>、 <style> 都是 w3c 官方规范的标签。这就表示很多如 linters （LCTT 译注：一种代码检查工具插件）这样我们用于开发过程中的工具能够开箱即用或者添加一些适配后使用。

3、 Vue “新的 jQuery”

事实上，这两个库不相似而且用于做不同的事。让我提供给你一个很精辟的类比（我实际上非常喜欢描述 Vue 和 jQuery 之间的关系）：披头士乐队和齐柏林飞船乐队（LCTT 译注：两个都是英国著名的乐队）。披头士乐队不需要介绍，他们是 20 世纪 60 年代最大的和最有影响力的乐队。但很难说披头士乐队是 20 世纪 70 年代最大的乐队，因为有时这个荣耀属于是齐柏林飞船乐队。你可以说两个乐队之间有着微妙的音乐联系或者说他们的音乐是明显不同的，但两者一些先前的艺术和影响力是不可否认的。也许 21 世纪初 JavaScript 的世界就像 20 世纪 70 年代的音乐世界一样，随着 Vue 获得更多关注使用，只会吸引更多粉丝。

一些使 jQuery 牛逼的哲学理念在 Vue 中也有呈现：非常容易的学习曲线但却具有基于现代 web 标准构建牛逼 web 应用所有你需要的功能。Vue 的核心本质上就是在 JavaScript 对象上包装了一层。

4、 极易扩展

正如前述，Vue 默认使用标准的 HTML、JS 和 CSS 构建组件，但可以很容易插入其他技术。如果我们想使用pug（LCTT译注：一款功能丰富的模板引擎，专门为 Node.js 平台开发）替换 HTML 或者使用 Typescript（LCTT译注：一种由微软开发的编程语言，是 JavaScript 的一个超集）替换 js 或者 Sass （LCTT 译注：一种 CSS 扩展语言）替换 CSS，只需要安装相关的 node 模块和在我们的单文件组件中添加一个属性到相关的标签即可。你甚至可以在一个项目中混合搭配使用 —— 如一些组件使用 HTML 其他使用 pug ——然而我不太确定这么做是最好的做法。

5、 虚拟 DOM

虚拟 DOM 是很好的技术，被用于现如今很多框架。其意味着这些框架能够做到根据我们状态的改变来高效的完成 DOM 更新，减少重新渲染，从而优化我们应用的性能。现如今每个框架都有虚拟 DOM 技术，所以虽然它不是什么独特的东西，但它仍然很出色。

6、 Vuex 很棒

对于大多数应用，管理状态成为一个棘手的问题，单独使用一个视图库不能解决这个问题。Vue 使用 Vuex 库来解决这个问题。Vuex 很容易构建而且和 Vue 集成的很好。熟悉 redux（另一个管理状态的库）的人学习 Vuex 会觉得轻车熟路，但是我发现 Vue 和 Vuex 集成起来更加简洁。最新 JavaScript 草案中（LCTT 译注：应该是指 ES7）提供了对象展开运算符（LCTT 译注：符号为 ...），允许我们在状态或函数中进行合并，以操纵从 Vuex 到需要它的 Vue 组件中的状态。

7、 Vue 的命令行界面（CLI）

Vue 提供的命令行界面非常不错，很容易用 Vue 搭建一个基于 Webpack（LCTT 译注：一个前端资源加载/打包工具）的项目。单文件组件支持、babel（LCTT 译注：js 语法转换器）、linting（LCTT译注：代码检查工具）、测试工具支持，以及合理的项目结构，都可以在终端中一行命令创建。

然而有一个命令，我在 CLI 中没有找到，那就是 vue build。

如：

echo '<template><h1>Hello World!</h1></template>' > Hello.vue && vue build Hello.vue -o

vue build 命令构建和运行组件并在浏览器中测试看起来非常简单。很不幸这个命令后来在 Vue 中删除了，现在推荐使用 Poi。Poi 本质上是在 Webpack 工具上封装了一层，但我不认我它像推特上说的那样简单。

8、 重新渲染优化

使用 Vue，你不必手动声明 DOM 的哪部分应该被重新渲染。我从来都不喜欢操纵 React 组件的渲染，像在shouldComponentUpdate 方法中停止整个 DOM 树重新渲染这种。Vue 在这方面非常巧妙。

9、 容易获得帮助

Vue 已经达到了使用这个框架来构建各种各样的应用的一种群聚效应。开发文档非常完善。如果你需要进一步的帮助，有多种渠道可用，每个渠道都有很多活跃开发者：stackoverflow、discord、twitter 等。相对于其他用户量少的框架，这就应该给你更多的信心来使用Vue构建应用。

10、 多机构维护

我认为，一个开源库，在发展方向方面的投票权利没有被单一机构操纵过多，是一个好事。就如同 React 的许可证问题（现已解决），Vue 就不可能涉及到。

总之，作为你接下来要开发的任何 JavaScript 项目，我认为 Vue 都是一个极好的选择。Vue 可用的生态圈比我博客中涉及到的其他库都要大。如果想要更全面的产品，你可以关注 Nuxt.js。如果你需要一些可重复使用的样式组件你可以关注类似 Vuetify 的库。

Vue 是 2017 年增长最快的库之一，我预测在 2018 年增长速度不会放缓。

如果你有空闲的 30 分钟，为什么不尝试下 Vue，看它可以给你提供什么呢？

P.S. — 这篇文档很好的展示了 Vue 和其他框架的比较：https://vuejs.org/v2/guide/comparison.html

via: https://medium.com/@dalaidunc/10-things-i-love-about-vue-505886ddaff2

作者：Duncan Grant 译者：yizhuoyan 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9