本文转载自：众成翻译

译者：郭培

链接：http://www.zcfy.cc/article/2301

原文：https://www.sitepoint.com/3-javascript-libraries-2017/

2017年值得关注的3个Javascript库得到 Aurelio de Rosa 和 Vildan Softic的同行校审。非常感谢SitePoint的各位审稿人，是他们保证了SitePoint的内容尽可能做到最好。

呜啦，2016结束了！对于世界和JavaScript领域来说，这是一个疯狂的一年。无数新的让人印象深刻的库和框架涌现，你也许不需要JavaScript向我们展示了一些模式，提出了使用javascript的一些问题，一张Nolan Lawson谈前端的幻灯片引起了一些骚动和响应，其中不乏一些业内的大牛，像Jeremy Keith和Christian Heilmann，被NoLan总结成了一个帖子。我开始在想也许"疯狂"用来描述这一年有点儿轻描淡写了，2016是疯了。

这一年还包括JavaScript的疲劳，许多开发人员经历了对JavaScript生态系统的疲劳，因为当开发人员在创建一个"现代化"的项目时，需要很多工具，还要做很多的配置。关于这一点，许多开发者分享了他们的想法，更多"JavaScript很累很累"的文章出现。

为了有助于你我的睡眠，我梳理了一个面向前端开发的列表，这个列表包括三个有前途的通用库/框架。

Vue.js

如果到目前为止你还没有关注到Vue.js，那现在你要注意了。Vue.js是一个轻量级的JavaScript框架。

No,先不要着急跑开！

Vue.js似乎主要关注视图，并且提供了极少数的工具来规范视图的数据。Vue.js没有在框架中塞满程序设计模式和各种限制，它采用自底向上的增量开发的设计，这是一个很好的改变。

Vue.js有两种版本：一种是包含模板编译器的独立版本，另一种是不包含模板编译器的运行时版本。几乎所有情况下，你都需要Webpack或Browserify来预编译模板，只有在客户端使用时才需要加载运行版本包。查看Vue.js安装页了解详细信息。

为了证实Vue.js的使用非常简单，下面我们实现一个展示信息的组件，该组件有个按钮，点击按钮可以翻转信息内容。

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

import Vue from 'vue'

new Vue({
  el: '#app',
  data: {
    message: 'Hello World!',
  },
  methods: {
    reverseMessage: function () {
      const reversedMessage = this.message
        .split('')
        .reverse()
        .join('');

      this.message = reversedMessage;
    },
  },
});

会错过其他库中那些真正喜欢的功能么？awesome-vue 集合了来自社区贡献的数以千计的插件和库，使用和开发Vue插件提供了可用的指南。

如果你想提高开发效率，一定要试用一下这个框架。它的扩展性良好，可以随着项目的增长而扩展。值得一提的是,Vue.js这个框架是由一个人在大量的贡献者和赞助者的帮助下维护的。

无论选择独立版本还是采用运行时构建，Vue.js默认支持所有兼容ECMAScript5的浏览器 。虽然没有记录，不过我相信你可以通过手动添加ES6 shim增加支持的浏览器的范围。

有关Vue.js的更多信息，请查看Vue.js官网或其GitHub仓库。如果你有兴趣，一定要查看Nilson Jacques关于Vue.js的文章和Jack Franklin对Vue.js 2.0的介绍。

Svelte

Svelte仅在2016年11月中旬发布，所以它挺新的。Svelte是一个类似于Vue.js的Javascript框架，'传统'的框架需要运行时代码（译者注：当前的框架，无论是React,还是VueJS,无论你怎么编译，在使用时都必然需要引入框架本身，这就是运行时代码）来定义和执行模块，保持状态，更新视图并且还要运行这些框架。Svelte完全溶入JavaScript中。就好像没有引用这个框架，这种方式主要有益于文件大小。

该框架实际上是一个工具，可以将您的源代码编译为没有依赖关系的纯JavaScript。你可以使用Webpack，Browserify，Rollup或Gulp编译源代码，Svelte提供了相应的插件。查看各编译器可用工具的仓库 。

为了比较，我使用Svelte重新创建了刚才的Vue.js示例：

<p>{{ message }}</p>
<button on:click="reverseMessage()">Reverse Message</button>

<script>
export default {
  data () {
    return {
      message: 'Hello World!',
    }
  },
  methods: {
    reverseMessage () {
      const reversedMessage = this.get('message')
          .split('')
          .reverse()
          .join('');

      this.set({
        message: reversedMessage,
      });
    }
  }
};
</script>

同一个模块，Vue.js生成了一个7Kb的bundle，而svelte仅生成了个2Kb的文件。

Svelte实现的TodoMVC 压缩后为3.6kb。为了让大家有点儿概念，仅React加ReactDOM，没有任何应用的代码，压缩后就大约45kb。

js框架基准 测试证明Svelte在性能方面与Inferno是竞争对手。 如果你关心应用程序的资源占用，你一定要试试Svelte。

如果你正在考虑在生产中使用这个，我建议你再等等。 该框架真的挺新的而且没有公布未来的计划，除了文档中的待办事项提到要补充文档本身和开发相关插件外。 尽管Svelte是超级新的，而且没有经过实战检验，但是我预计明年它将获得垂青，有可能会影响库和（或）框架未来。

在文章写作时，Svelte要么没有其插件系统的记录，要么根本就没有插件。待办事项中指出Svelte将支持插件，并可能提供API使插件挂载到框架中。

编译代码的兼容性取决于你构建的工作流堆栈，因此很难说它的默认兼容性是什么。 在技术上，你应该能够通过包括ES5 shim实现ES5之前的支持。

有关Svelte的更多信息，请查看其官网或其GitHub仓库。

Conditioner.js

Conditioner.js放在最后，但并非表示它最不重要。使用Conditioner.js你可以有条件的加载和调用模块。与其他模块加载器相比，Conditioner.js允许定义加载和(或)显示模块的条件。这样你可以减少加载时间并节省带宽。

对于已经有的一些功能组件，想使用渐进增强去构建时，Conditioner.js建议可以通过给定的JavaScript模块来增强这些功能组件。如何定义这些JavaScript模块完全由你决定，甚至可以从你最喜欢的框架加载模块。

Conditioner.js不向全局暴露变量，并建议使用诸如RequireJS之类的AMD加载器。它与Browserify, Webpack, Rollup 还有其他AMD打包软件兼容，但你会希望创建尽量小的包，所以Conditioner.js只会加载页面需要的模块。

您可以通过npm安装：npm install conditioner-js。更多信息，可以在项目的主页上找到。

这个示例与之前的不同，只是为了更好的说明Conditioner.js的功能。想象一下，我们希望展示一个活动的剩余时间。这个模块可能如下所示：

import moment from 'moment';

export default class RelativeTime {
  /**
   * Enhance given element to show relative time.
   * @param {HTMLElement} element - The element to enhance.
   */
  constructor(element) {
    this.startTime = moment(element.datetime);

    // Update every second
    setInterval(() => this.update(), 1000);
    this.update();
  }

  /**
   * Update displayed relative time.
   */
  update() {
    element.innerHTML = this.startDate.toNow();
  }
}

初始化这个模块非常简单：

`<time datetime="2017-01-01" data-module="ui/RelativeTime">2017</time>`

然后，Conditioner会在DOM中的该位置加载ui/RelativeTime模块。需要注意的是，在这里相应的日期已经存在，并且是可接受的格式，而加载的模块只是用来增加这一点。

如果您希望模块仅在用户可见时初始化，您可以使用以下条件进行初始化：

<!-- Show RelativeTime only if it is visible to the user -->
<time datetime="2017-01-01" data-module="ui/RelativeTime" data-conditions="element:{visible}">2017</time>
<!-- Keep showing RelativeTime after it was visible to the user -->
<time datetime="2017-01-01" data-module="ui/RelativeTime" data-conditions="element:{was visible}">2017</time>

Conditioner.js有相当广泛的监视器列表，您可以使用它来定义条件。 不要担心！ 你只需要包括你需要的，防止包含不必要的代码。

你还可以将选项指定为JSON字符串，或稍微更易读的JSON变量。

<!-- JSON variant -->
<div data-module="ui/RelativeTime" data-options='unit:"seconds"'>...</div>
<!-- Or good old JSON -->
<div data-module="ui/RelativeTime" data-options='{"unit":"seconds"}'>...</div>

使用或避免使用Conditioner.js的原因类似于Svelte：如果你关心应用的资源占用，你一定要考虑使用这个库。另一方面，该库的未来并不明朗，因为它也没有公布未来计划。Conditioner.js允许你自定义兼视器，这样可以使其适用于所有复杂的模块加载。

默认情况下，Conditioner.js与支持ES5的浏览器兼容。与Vue.js和Svelte非常相似，可以使用特定的ES5 Shim 实现更好的兼容性。

有关Conditioner更多信息，请查看其官网 或其GitHub仓库。

结论

作者的更多文章：

• Yarn 与 npm: 你需要知道的一切
• HTML5输入元素的状态

我认为这些框架和库在2017年会更棒。虽然我不是框架的粉丝，但是我相信Vue.js和Svelte在解决当前框架中存在的问题时，正朝着正确的方向努力。这个努力可能会导致行业转向新的构建方式或定义事物新的方式，但任何的改进都是我期待的改变。

在我的印象里，基于组件构建应用程序的方法，被认为是最好的构建应用程序的方法。虽然我不期望Conditioner.js会引起重大的转变，但我相信它确实解决了基于组件构建应用的常见问题，使其成为更复杂加载时不可或缺的库。

你还期望哪些库在2017年更棒？请在评论部分让我们知道你的想法！