<p>2017年值得关注的3个Javascript库得到 <a href="/misc/goto?guid=4959736760082508799" rel="nofollow,noindex">Aurelio de Rosa</a> 和 <a href="/misc/goto?guid=4959736760172788434" rel="nofollow,noindex">Vildan Softic</a> 的同行校审。非常感谢SitePoint的各位审稿人，是他们保证了SitePoint的内容尽可能做到最好。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/537ca46cf20c1c6c489c8a4ed0030254.jpg"></p>    <p>呜啦，2016结束了！对于世界和JavaScript领域来说，这是一个疯狂的一年。无数新的让人印象深刻的库和框架涌现， 你也许不需要JavaScript 向我们展示了一些模式，提出了使用javascript的一些问题， 一张Nolan Lawson谈前端的幻灯片 引起了一些骚动和响应，其中不乏一些业内的大牛，像Jeremy Keith和Christian Heilmann，被NoLan总结成了 一个帖子 。我开始在想也许"疯狂"用来描述这一年有点儿轻描淡写了，2016是疯了。</p>    <p>这一年还包括JavaScript的疲劳，许多开发人员经历了对JavaScript生态系统的疲劳，因为当开发人员在创建一个"现代化"的项目时，需要很多工具，还要做很多的配置。关于这一点，许多开发者分享了他们的想法，更多"JavaScript很累很累"的文章出现。</p>    <p>为了有助于你我的睡眠，我梳理了一个面向前端开发的列表，这个列表包括三个有前途的通用库/框架。</p>    <h2>Vue.js</h2>    <p>如果到目前为止你还没有关注到Vue.js，那现在你要注意了。Vue.js是一个轻量级的JavaScript框架。</p>    <p>No,先不要着急跑开！</p>    <p>Vue.js似乎主要关注视图，并且提供了极少数的工具来规范视图的数据。Vue.js没有在框架中塞满程序设计模式和各种限制，它采用自底向上的增量开发的设计，这是一个很好的改变。</p>    <p>Vue.js有两种版本：一种是包含模板编译器的独立版本，另一种是不包含模板编译器的运行时版本。几乎所有情况下，你都需要Webpack或Browserify来预编译模板，只有在客户端使用时才需要加载运行版本包。</p>    <p>为了证实Vue.js的使用非常简单，下面我们实现一个展示信息的组件，该组件有个按钮，点击按钮可以翻转信息内容。</p>    <pre>  <code class="language-javascript"><div id="app">    <p>{{ message }}</p>    <button v-on:click="reverseMessage">Reverse Message</button>  </div></code></pre>    <pre>  <code class="language-javascript">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;      },    },  });</code></pre>    <p>会错过其他库中那些真正喜欢的功能么？ awesome-vue 集合了来自社区贡献的数以千计的插件和库， 使用和开发Vue插件 提供了可用的指南。</p>    <p>如果你想提高开发效率，一定要试用一下这个框架。它的扩展性良好，可以随着项目的增长而扩展。值得一提的是,Vue.js这个框架是由一个人在大量的贡献者和赞助者的帮助下维护的。</p>    <p>无论选择独立版本还是采用运行时构建，Vue.js默认支持所有 兼容ECMAScript5的浏览器 。虽然没有记录，不过我相信你可以通过手动添加 ES6 shim 增加支持的浏览器的范围。</p>    <p>有关Vue.js的更多信息，请查看 Vue.js官网 或其 GitHub仓库 。如果你有兴趣，一定要查看 <a href="/misc/goto?guid=4959736760261859273" rel="nofollow,noindex">Nilson Jacques关于Vue.js的文章</a> 和 <a href="/misc/goto?guid=4959736760343398810" rel="nofollow,noindex">Jack Franklin对Vue.js 2.0的介绍</a> 。</p>    <h2>Svelte</h2>    <p>Svelte仅在2016年11月中旬发布，所以它挺新的。Svelte是一个类似于Vue.js的Javascript框架，'传统'的框架需要运行时代码（译者注：当前的框架，无论是React,还是VueJS,无论你怎么编译，在使用时都必然需要引入框架本身，这就是运行时代码）来定义和执行模块，保持状态，更新视图并且还要运行这些框架。Svelte完全溶入JavaScript中。就好像没有引用这个框架，这种方式主要有益于文件大小。</p>    <p>该框架实际上是一个工具，可以将您的源代码编译为没有依赖关系的纯JavaScript。你可以使用Webpack，Browserify，Rollup或Gulp编译源代码，Svelte提供了相应的插件。 <a href="/misc/goto?guid=4959736760427266897" rel="nofollow,noindex">查看各编译器可用工具的仓库</a> 。</p>    <p>为了比较，我使用Svelte重新创建了刚才的Vue.js示例：</p>    <pre>  <code class="language-javascript"><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></code></pre>    <p>同一个模块，Vue.js生成了一个7Kb的bundle，而svelte仅生成了个2Kb的文件。</p>    <p>Svelte实现的 TodoMVC 压缩后为3.6kb。为了让大家有点儿概念，仅React加ReactDOM，没有任何应用的代码，压缩后就大约45kb。</p>    <p>js框架基准 测试证明Svelte在性能方面与Inferno是竞争对手。 如果你关心应用程序的资源占用，你一定要试试Svelte。</p>    <p>如果你正在考虑在生产中使用这个，我建议你再等等。 该框架真的挺新的而且没有公布未来的计划，除了TODO的文档中，似乎引用文档本身和插件。 尽管Svelte是超级新的，而且没有经过实战检验，但是我预计明年它将获得垂青，有可能会影响库和（或）框架未来。</p>    <p>在文章写作时，Svelte要么没有其插件系统的记录，要么根本就没有插件。待办事项中指出Svelte将支持插件，并可能提供API使插件挂载到框架中。</p>    <p>编译代码的兼容性取决于你构建的工作流堆栈，因此很难说它的默认兼容性是什么。 在技术上，你应该能够通过包括ES5 shims实现ES5之前的支持。</p>    <p>有关Svelte的更多信息，请查看其 <a href="/misc/goto?guid=4959736760520144665" rel="nofollow,noindex">官网</a> 或其 <a href="/misc/goto?guid=4959736760602666553" rel="nofollow,noindex">GitHub仓库</a> 。</p>    <h2>Conditioner.js</h2>    <p>Conditioner.js 放在最后，但并非表示它最不重要。使用Conditioner.js你可以有条件的加载和调用模块。与其他模块加载器相比，Conditioner.js允许定义加载和(或)显示模块的条件。这样你可以减少加载时间并节省带宽。</p>    <p>对于已经有的一些功能组件，想使用渐进增强去构建时，Conditioner.js建议可以通过给定的JavaScript模块来增强这些功能组件。如何定义这些JavaScript模块完全由你决定，甚至可以从你最喜欢的框架加载模块。</p>    <p>Conditioner.js不向全局暴露变量，并建议使用诸如 RequireJS 之类的AMD加载器。它与Browserify, Webpack, Rollup 还有其他AMD bundlers兼容，但你会希望创建微小的bundler，所以Conditioner.js只会加载页面需要的模块。</p>    <p>您可以通过npm安装： npm install conditioner-js 。更多信息，可以在 项目的主页 上找到。</p>    <p>这个示例与之前的不同，只是为了更好的说明Conditioner.js的功能。想象一下，我们希望展示一个活动的剩余时间。这个模块可能如下所示：</p>    <pre>  <code class="language-javascript">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();    }  }</code></pre>    <p>初始化这个模块非常简单：</p>    <pre>  <code class="language-javascript"><time datetime="2017-01-01" data-module="ui/RelativeTime">2017</time>`</code></pre>    <p>然后，Conditioner会在DOM中的该位置加载 ui/RelativeTime 模块。需要注意的是，在这里相应的日期已经存在，并且是可接受的格式，而加载的模块只是用来增加这一点。</p>    <p>如果您希望模块仅在用户可见时初始化，您可以使用以下条件进行初始化：</p>    <pre>  <code class="language-javascript"><!-- 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></code></pre>    <p>Conditioner.js有相当广泛的监视器列表，您可以使用它来定义条件。 不要担心！ 你只需要包括你需要的，防止包含不必要的代码。</p>    <p>你还可以将选项指定为JSON字符串，或稍微更易读的JSON变量。</p>    <pre>  <code class="language-javascript"><!-- 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></code></pre>    <p>使用或避免使用Conditioner.js的原因类似于Svelte：如果你关心应用的资源占用，你一定要考虑使用这个库。另一方面，该库的未来并不明朗，因为它也没有公布未来计划。Conditioner.js允许你自定义兼视器，这样可以使其适用于所有复杂的模块加载。</p>    <p>默认情况下，Conditioner.js与支持ES5的浏览器兼容。与Vue.js和Svelte非常相似，可以使用特定的ES5 Shims 实现更好的兼容性。</p>    <p>有关Conditioner更多信息，请查看 <a href="/misc/goto?guid=4958867474385340366" rel="nofollow,noindex">其官网</a> 或 <a href="/misc/goto?guid=4958865507889578373" rel="nofollow,noindex">其GitHub仓库</a> 。</p>    <h2>结论</h2>    <p>作者的更多文章：</p>    <ul>     <li><a href="https://www.sitepoint.com/yarn-vs-npm/?utm_source=sitepoint&utm_medium=relatedinline&utm_term=&utm_campaign=relatedauthor" rel="nofollow,noindex">Yarn 与 npm: 你需要知道的一切</a></li>     <li><a href="https://www.sitepoint.com/the-state-of-html5-input-elements/?utm_source=sitepoint&utm_medium=relatedinline&utm_term=&utm_campaign=relatedauthor" rel="nofollow,noindex">HTML5输入元素的状态</a></li>    </ul>    <p>我认为这些框架和库在2017年会更棒。虽然我不是框架的粉丝，但是我相信Vue.js和Svelte在解决当前框架中存在的问题时，正朝着正确的方向努力。这个努力可能会导致行业转向新的构建方式或定义事物新的方式，但任何的改进都是我期待的改变。</p>    <p>在我的印象里，基于组件构建应用程序的方法，被认为是最好的构建应用程序的方法。虽然我不期望Conditioner.js会引起重大的转变，但我相信它确实解决了基于组件构建应用的常见问题，使其成为更复杂加载时不可或缺的库。</p>    <p>你还期望哪些库在2017年更棒？请在评论部分让我们知道你的想法！</p>    <p> </p>    <p>来自：http://www.zcfy.cc/article/3-javascript-libraries-to-keep-an-eye-on-in-2017-2301.html</p>    <p> </p>