唷,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年更棒?请在评论部分让我们知道你的想法!
英文原文: (翻译到一半,发现已经有了,所以剩下的就直接拷贝过来了)
javascript发展好快现在
收藏下了,突然感觉自己落伍了