2017年值得關注的3個JavaScript庫

VirgieGomes 7年前發布 | 15K 次閱讀 Vue.js JavaScript開發

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的使用非常簡單，下面我們實現一個展示信息的組件，該組件有個按鈕，點擊按鈕可以翻轉信息內容。

<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。

如果你正在考慮在生產中使用這個，我建議你再等等。該框架真的挺新的而且沒有公布未來的計劃，除了TODO的文檔中，似乎引用文檔本身和插件。盡管Svelte是超級新的，而且沒有經過實戰檢驗，但是我預計明年它將獲得垂青，有可能會影響庫和（或）框架未來。

在文章寫作時，Svelte要么沒有其插件系統的記錄，要么根本就沒有插件。待辦事項中指出Svelte將支持插件，并可能提供API使插件掛載到框架中。

編譯代碼的兼容性取決于你構建的工作流堆棧，因此很難說它的默認兼容性是什么。在技術上，你應該能夠通過包括ES5 shims實現ES5之前的支持。

有關Svelte的更多信息，請查看其官網或其 GitHub倉庫。

Conditioner.js

Conditioner.js 放在最后，但并非表示它最不重要。使用Conditioner.js你可以有條件的加載和調用模塊。與其他模塊加載器相比，Conditioner.js允許定義加載和(或)顯示模塊的條件。這樣你可以減少加載時間并節省帶寬。

對于已經有的一些功能組件，想使用漸進增強去構建時，Conditioner.js建議可以通過給定的JavaScript模塊來增強這些功能組件。如何定義這些JavaScript模塊完全由你決定，甚至可以從你最喜歡的框架加載模塊。

Conditioner.js不向全局暴露變量，并建議使用諸如 RequireJS 之類的AMD加載器。它與Browserify, Webpack, Rollup 還有其他AMD bundlers兼容，但你會希望創建微小的bundler，所以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 Shims 實現更好的兼容性。

有關Conditioner更多信息，請查看其官網或其GitHub倉庫。

結論

作者的更多文章：

Yarn 與 npm: 你需要知道的一切
HTML5輸入元素的狀態

我認為這些框架和庫在2017年會更棒。雖然我不是框架的粉絲，但是我相信Vue.js和Svelte在解決當前框架中存在的問題時，正朝著正確的方向努力。這個努力可能會導致行業轉向新的構建方式或定義事物新的方式，但任何的改進都是我期待的改變。

在我的印象里，基于組件構建應用程序的方法，被認為是最好的構建應用程序的方法。雖然我不期望Conditioner.js會引起重大的轉變，但我相信它確實解決了基于組件構建應用的常見問題，使其成為更復雜加載時不可或缺的庫。

你還期望哪些庫在2017年更棒？請在評論部分讓我們知道你的想法！

來自：http://www.zcfy.cc/article/3-javascript-libraries-to-keep-an-eye-on-in-2017-2301.html

本文由用戶 VirgieGomes 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1486696950273.html

Vue.js JavaScript開發

2017年值得關注的3個JavaScript庫

Vue.js

Svelte

Conditioner.js

結論

相關經驗

相關資訊

相關文檔

目錄