跳到主要内容

9种最好的JavaScript框架

JavaScript frameworks
+$(Image credit: Vue / Polymer / React)

最好的JavaScript框架使编码更快更容易,因此您可以专注于设计完美网站布局+$– instead of getting bogged down in code. A number of great ones have popped up on the market in recent years.

+$JavaScript frameworks: Quick links

+$In this article, we'll take a look at the biggest and best JavaScript frameworks around, and explore how to get the best out of them in your projects. For each of the five best JavaScript frameworks, we'll take a closer look at what's on offer and run through a short tutorial so you can get a feel for how it works.

+$We'll look at Vue.js, React, AngularJS, Polymer and Aurelia, then we'll also explore some newer or lesser-known options you might want to look at. Use the boxout opposite, or the drop-down menu at the top, to jump to the section you want to explore first.

+$For more recommendations for your toolbox, take a look at our roundup of the最好的网页设计工具+$, or our guide to the best+$JavaScript APIs

Vue.js

JavaScript frameworks: Vue.js logo

最适合:

  • 初学者
  • 占地面积小的轻量级应用

Vue.js是一个用于构建用户界面的渐进式JavaScript框架。一个开源项目(见GitHub在这里回购),它是初学者的理想选择。主库专注于视图层,所有模板都是有效的HTML,使其易于上传。在以下两个小型教程中,我们将介绍如何使用Vue管理多个数据存储,并加快第一次加载以提高站点的性能。

01.用Vue管理状态

与任何基于组件的库一样,在Vue中管理状态可能很棘手。虽然应用程序很小,但可以通过在值更改时发出事件来保持同步。但是,随着应用程序的增长,这可能变得脆弱并且容易出错,因此最好从更集中的解决方案开始。

如果您熟悉Flux和Redux,Vuex的工作方式大致相同。 State位于一个集中位置,并链接到主Vue应用程序。应用程序中发生的所有事情都会反映在该状态中的某个位置。组件可以选择与它们相关的信息,并在其发生变化时得到通知,就像它是否是其内部状态的一部分一样。

Vuex商店由四件事组成:州,吸气剂,突变和行动。状态是一个对象,它包含整个应用程序的所有必要数据。此对象的结构方式取决于项目,但通常至少为每个视图保留一个值。

Getters像计算属性一样在组件内部工作。它们的值来自状态和传递给它的任何参数。它们可用于过滤列表,而不必在使用该列表的每个组件内复制该逻辑。

无法直接编辑状态。必须通过商店内提供的变异方法执行任何更新。这些通常是简单的操作,一次执行一个更改。每个变异方法都接收状态作为参数,然后使用更改所需的值进行更新。

突变需要是同步的,以便Vuex了解发生了哪些变化。对于异步逻辑 - 如服务器调用 - 可以使用操作。操作可以返回Promises,这使得Vuex知道结果将来会发生变化,并使开发人员能够将操作链接在一起。

要执行变异,必须通过调用将它们提交到商店承诺()并传递所需的变异方法的名称。行动需要以类似的方式发送调度()

将操作提交突变而不是手动提交是一种很好的做法。这样,所有更新逻辑都保存在同一个地方。然后,组件可以直接调度操作,只要它们使用MapActions()Vuex提供的方法。

为了避免过度复杂化,商店也可以分解为单独的模块,这些模块可以处理自己的状态切片。每个模块都可以注册自己的状态,getter,变异和动作。状态在每个模块之间进行组合,并按模块名称进行分组,其方式与CombineReducers()在...内工作Redux.pport

02.探索懒惰的载荷路线

默认情况下,应用程序的全部内容最终都在一个JavaScript文件中,这可能导致页面加载速度变慢。很多内容从未在用户访问的第一个屏幕上使用。相反,它可以从主捆绑中拆分并在需要时加载。

Vue使这个过程非常简单,因为vue-router内置了对延迟加载的支持。

const AsyncAbout =()=> import('./ About.vue'); const router = new VueRouter({routes:[{path:'/ about,component:AsyncAbout}]})

Vue支持使用动态导入来定义组件。这些返回Promises,解析为组件本身。然后,路由器可以使用该组件像正常一样呈现页面。这些工作与内置于Webpack的代码拆分一起工作,这使得可以使用魔术注释等功能来定义组件应如何拆分。

阅读更多:学习如何+$speed up site performance using Vue.js

+$Next Page: ReactJS



翻译字数超限