2017年值得关注的3个JavaScript库-CSDN博客

Aurelio de Rosa和Vildan Softic对2017年值得关注的 3个JavaScript库进行了同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

指路标可以追溯到2015/2016年，直到2017年

ew，2016年结束了！对于整个世界和JavaScript领域来说，这都是疯狂的一年。出现了无数新的令人印象深刻的库和框架，“ 您可能不需要JavaScript”显示了一些模式，这使许多人质疑它们对JavaScript的使用（一点点），并且Nolan Lawson关于Fronteers的演讲中的一张幻灯片推文引起了诸如此类的震撼和回应杰里米·基思（Jeremy Keith）和克里斯蒂安·海尔曼（Christian Heilmann）都在诺兰（Nolan）的帖子中进行了总结。我开始认为“疯狂”是一种轻描淡写。 2016太疯狂了 。

今年还包括JavaScript疲劳。万一您错过了它，由于建立“现代” JavaScript项目需要大量工具和配置，因此许多开发人员都对JavaScript生态系统感到疲劳。一次，如此多的开发人员分享了他们的想法，“ JavaScript疲劳疲劳”上又出现了几篇文章！

为了帮助您和我晚上入睡，我整理了一个3个有前途的通用库/框架的清单，用于前端开发。

Vue.js

如果您还没有关注Vue.js ，那么绝对应该。 Vue.js是一个很小的JavaScript框架。

不，不要逃跑！

Vue.js似乎主要专注于视图，并且仅提供了少数工具来调节这些视图的数据。 Vue.js的最小方法不会妨碍编写程序设计模式和限制的框架，而这是一个很好的更改。

Vue.js有两种形式：一个包含模板编译器的独立版本，一个不包含模板编译器的运行时版本。在几乎所有情况下，您都希望使用Webpack或Browserify来预编译模板，并且仅在客户端加载运行时程序包。有关更多信息，请参见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;
    },
  },
});

您是否错过了其他图书馆真正喜欢的功能？提供了许多Vue.js插件，还提供了一些使用和编写Vue.js插件的指南。

如果您想快速提高生产力，则绝对应该尝试使用此框架。随着项目的发展，它可以很好地扩展。值得一提的是，这个图书馆是由一个人维护的，并得到了慷慨的捐助者和赞助者的帮助。

无论您选择独立形式还是运行时形式，Vue.js默认都支持符合ES5的浏览器。尽管没有记录，但我相信您可以通过手动添加ES5垫片来增加支持。

有关更多信息，请访问Vue.js网站或其GitHub存储库。如果您有兴趣，请务必查看Nilson Jacques关于Vue.js的社论以及Jack Franklin的Vue.js 2.0简介。

斯维尔特

Svelte才在2016年11月中旬发布， 确实是个新手。这是一个类似于Vue.js的JavaScript框架，但占用的空间较小。 “传统”框架需要运行时代码来定义和执行模块，保持状态，更新视图以及执行框架所做的任何事情。 Svelte分解为干净的JavaScript代码，就好像您根本没有使用任何框架一样。这的主要好处是文件大小。

该框架实际上是一个将源代码编译为不具有依赖项的纯JavaScript的工具。 Svelte具有插件，因此您可以使用Webpack，Browserify，汇总或Gulp编译源代码。查看编译器的存储库，以获取所有可用工具。

为了进行比较，我使用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的捆绑包。 Svelte产生一个2kb的文件。

TodoMVC的Svelte实现压缩为3.6kb。为了进行比较，不带任何应用程序代码的React加ReactDOM压缩后约为45kb。

js框架基准测试证明Svelte在性能方面可与Inferno竞争。如果您关心应用程序的占用空间，则绝对应该尝试一下。

如果您考虑在生产中使用此功能，建议您稍等一下。该框架确实是新的，除了文档中的TODO似乎引用了文档本身和插件之外，没有宣布任何未来的计划。尽管它是超级新手，而且还没有经过严格的测试，但我预计明年它会受到一定的欢迎，并且可能会影响到以后的库和/或框架。

在撰写本文时，Svelte要么没有文档化的插件系统，要么根本没有文档。 TODO表示Svelte将支持插件，并且可能具有连接到框架的API。

编译后代码的兼容性取决于您的构建工作流堆栈，因此很难说出其默认兼容性是什么。从技术上讲，您应该可以通过包含ES5垫片来获得ES5之前的支持。

有关更多信息，请访问Svelte的网站或其GitHub存储库。

Conditioner.js

最后但并非最不重要的是Conditioner.js 。使用Conditioner.js，您可以有条件地加载和调用模块。与其他模块加载器的不同之处在于Conditioner.js允许您定义加载和/或显示模块的条件。这样可以减少加载时间并节省带宽。

Conditioner.js的构建考虑到了渐进增强功能，建议您应该已经有了使用给定JavaScript模块进行了增强的功能组件。这些模块的定义方式完全取决于您。您甚至可以使其从您喜欢的框架中加载模块。

该库不公开全局变量，建议使用AMD加载器，例如RequireJS 。它与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>

然后，调节器将在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垫片可以实现更好的兼容性。

有关更多信息，请访问Conditioner.js的网站或其GitHub存储库。