2017年值得关注的3个JavaScript库

10年服务1亿Tian开发工程师

唷,2016结束了! 这一年对于世界和JavaScript领域来说都是疯狂的一年。 无数新的令人印象深刻的库和框架涌现, 展示了一些模式,提出了使用 JavaScript 的一些问题,和引起了业内牛人的一些骚动和响应,像 Jeremy Keith 和 Christian Heilmann ,NoLan总把这些讨论结成了。我开始认为用”疯狂”用来描述这一年有点儿低调了,2016是发神经了。

这一年也包括JavaScript疲劳。许多开发人员正在经历JavaScript的生态系统疲劳,因为需要大量的工具和配置来设置一个“现代化”的JavaScript项目。关于这一点,许多开发人员分享了他们的想法,更多”JavaScript很累很累”类似的文章出现。

为了帮助你和我能在晚上睡个安稳觉,我整理了一个Tian开发列表,包含的3个有前途的通用库/框架。

Vue.js

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

No,先不要着急跑开!

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的更多信息,请查看或其。如果你有兴趣,一定要查看和。

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实现的 压缩后为3.6kb。为了让大家有点儿概念,仅React加ReactDOM,没有任何应用的代码,压缩后就大约45kb。

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

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

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

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

有关Svelte的更多信息,请查看其或其。

Conditioner.js

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

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

Conditioner.js不向全局暴露变量,并建议使用诸如之类的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更多信息,请查看 或。

结论

作者的更多文章:

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

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

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

英文原文: (翻译到一半,发现已经有了,所以剩下的就直接拷贝过来了)

赞(0) 打赏
未经允许不得转载:WEBTian开发 » 2017年值得关注的3个JavaScript库

评论 3

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    javascript发展好快现在

    2年前 (2017-03-13)回复
  2. #-48

    收藏下了,突然感觉自己落伍了

    2年前 (2017-03-15)回复

Tian开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏