关于前端:目前前端流行的框架总结

前端框架个别指用于简化网页设计的框架，应用宽泛的前端开发套件，比方，jquery，extjs，bootstrap 等等，这些框架封装了一些性能，比方 html 文档操作，丑陋的各种控件（按钮，表单等等），应用前端框架能够帮忙疾速地搭建网站。

框架是提供一套残缺的解决方案，依照规定好的代码构造来做编排，应用前端框架能够升高界面开发周期和进步界面的好看性。

随着 Web 越来越标准和规范的对立，Web 组件化技术一直变革，挪动端开发一直升华，前端框架层出不穷。

咱们总说, 前端三大框架是一家, 你抄我, 我抄他, 节操被野兽蹂躏, Google, 大神和 Meta

三大框架 别离是:

尤雨溪团队的 Vue
Meta（原 Facebook）团队的 React
Google 团队的 Angular

但前端又不止这些框架，上面，简略介绍一下比拟风行的几个前端框架。

更多具体内容，请 微信搜寻“前端爱好者 “， 戳我查看。

官网：https://cn.vuejs.org/

Vue.js 是由华人开发者尤雨溪于 2014 年 2 月首次公布的。在它的前身 vue.js 0.x 版本中，尤雨溪还是在 Google 工作，起初辞职成为开发者。Vue.js 在 2015 年正式公布了 1.0 版本，随着社区的疾速倒退，当初曾经成为一个风行的前端框架。

完满的中文配套文档, 超低的退学门槛, 一度被人说是 “ 傻瓜式框架 ”, 易学易用，褒贬不一的双向数据绑定以及超级容易上手的渐进式框架模式，都是深受咱们喜爱的点。

长处：

简略易学：Vue 的外围库十分精简，学习曲线绝对较低，开发者能够疾速上手应用。
双向数据绑定：Vue 反对双向数据绑定，能够使得 UI 和数据同步更新，防止了手动操作 DOM 的繁琐。
组件化开发：Vue 也采纳组件化开发的思维，能够让开发者更好地组织和复用代码。
虚构 DOM：Vue 也应用虚构 DOM 技术，能够优化页面性能，进步渲染效率。
社区沉闷：Vue 有着宏大而沉闷的社区，开发者能够轻松获取各种资源和插件，这些资源和插件能够进步开发效率。

毛病：

依赖第三方库：Vue 须要应用第三方库来实现一些性能，如 Vuex 治理状态、Vue Router 实现路由等，这使得开发者须要学习和应用更多的工具和库。
不足严格的标准：Vue 不足严格的标准，开发者可能会应用不同的命名规定、组件构造等，这可能会导致我的项目的可维护性升高。
市场占有率绝对较低：相比于 React 和 Angular，Vue 的市场占有率绝对较低，这可能会影响一些开发者的抉择。

官网: https://react.dev/

React 是由 Meta（原 Facebook）开发的一个用于构建用户界面的 JavaScript 库。React 的第一个版本公布于 2013 年 5 月，然而在 2015 年，React 的体系结构产生了重大变动，从而推出了 React 16。React 在社区和商业畛域都领有宽泛的利用。

React 的组件化开发模式, 虚构 DOM 渲染, 能够与其余框架库进行联合应用, 以及 “ 好玩又有意思 ” 的 JSX 语法深受大家青睐

长处：

高效的虚构 DOM：React 采纳虚构 DOM 技术，能够缩小页面重绘的次数，进步页面渲染效率。
组件化开发：React 采纳组件化开发的思维，能够让开发者更好地组织和复用代码。
单向数据流：React 采纳单向数据流的架构，使得利用的状态变得可控和可预测。
生态系统丰盛：React 领有宏大的生态系统，包含 Redux 状态治理、React Router 实现路由等等，能够帮忙开发者更好地开发和保护利用。
跨平台反对：React 还反对跨平台开发，能够用于构建 Web 利用、挪动利用、桌面利用等多种平台。

毛病：

学习老本高：React 采纳 JSX 语法，开发者须要把握这种语法以及相干的工具和库，学习老本较高。
生态系统庞杂：尽管 React 的生态系统丰盛，但也存在一些庞杂的库和组件，抉择适合的库和组件须要肯定的技术水平和教训。
组件化开发的限度：React 的组件化开发思维尽管进步了代码的复用性和可维护性，但也存在一些限度，如组件之间的通信、状态治理等，须要开发者破费肯定的精力去解决。

官网：Angular

Angular 是 Google 在 2010 年公布的 AngularJS 的升级版，也称为 Angular 2。AngularJS 是由 Misko Hevery 和 Adam Abrons 在 2009 年创立的，最后被称为 “GetAngular”，并于 2010 年更名为 AngularJS。

随着 AngularJS 的胜利，Google 开始全面重构该框架，并于 2016 年公布了 Angular 2。目前，Angular 也是十分风行的前端框架之一。

长处：

残缺的 MVC 框架：Angular 提供了一个残缺的 MVC 框架，包含数据绑定、路由、依赖注入、指令等，这些性能能够帮忙开发者更加不便地治理和保护代码。
响应式编程：Angular 反对响应式编程，能够轻松解决异步数据流。这种编程形式能够进步代码的可读性、可维护性和可测试性。
TypeScript 反对：Angular 基于 TypeScript，提供了更好的类型查看、代码提醒、重构等性能，能够升高代码出错的危险，同时进步开发效率。
实用于大型利用：Angular 实用于构建大型、简单的 Web 利用，能够帮忙开发者更好地组织代码和治理模块。

毛病：

学习老本高：因为 Angular 提供了残缺的 MVC 框架，学习老本绝对较高，须要把握的知识点较多，对于初学者来说可能会有肯定的难度。
性能问题：因为 Angular 提供了较多的性能和依赖，有时会导致性能问题。开发者须要审慎应用依赖注入、数据绑定等性能，以防止影响利用的性能。
版本升级问题：Angular 的版本升级较为频繁，降级过程中可能会导致一些兼容性问题。这须要开发者破费肯定的工夫和精力去适应新的版本。

jQuery 是 2006 年推出的最后的前端框架之一。不论它的公布日期如何，让它不同凡响的是它在当今科技生态圈中的重要性。jQuery 不仅易于应用，而且还缩小了编写宽泛的 JavaScript 代码的需要。基本上，jQuery 用于在前端操作 DOM 和 CSS 操作，并加强网站的交互性和性能。

该框架的最新开发容许开发人员应用其基于 HTML5 的 UI 计划 – jQuery Mobile 创立本地挪动应用程序。此外，jQuery 框架对浏览器敌对，并反对您打算应用的浏览器。

一些旧的网站，仍然应用此 jQuery。

官网：https://svelte.dev
中武官网：https://www.sveltejs.cn / https://www.svelte.cn/

Svelte 是一种全新的构建用户界面的办法。传统框架如 React 和 Vue 在浏览器中须要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来解决。

与应用虚构（virtual）DOM 差别比照不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM。

官网：https://alpinejs.dev
中武官网：https://www.alpinejs.cn

Alpine.js 通过很低的老本提供了与 Vue 或 React 这类大型框架相近的响应式和申明式个性。

你能够持续操作 DOM，并在须要的时候应用 Alpine.js。

能够了解为 JavaScript 版本的 Tailwind。

备注：Alpine.js 的语法简直齐全借用自 Vue（并用 Angular 的语法做了些扩大）。在此由衷感谢他们对 Web 世界的奉献。

实例

<div x-data="{open: false}">
    <button @click="open = true">Open Dropdown</button>

    <ul
        x-show="open"
        @click.away="open = false"
    >
        Dropdown Body
    </ul>
</div>

官网：https://preactjs.com

React 的 3kb 轻量化计划，领有同样的 ES6 API。具备体积小、高性能、轻量 & 可嵌入、生态系统兼容等特点。

Preact 是一个 JavaScript 库，它将本人定义为蕴含相似 ES6 API 的 React 的最快 3KB 替代品。Preact 提供了除了 DOM 之外的最小可能的虚构 DOM 形象。

它在稳固的平台个性和性能上与其余可用的前端和 UI 库一起开发。Preact 体积小，但速度不受影响，能够开发简单的动静 Web 应用程序。

实例

import {h, render, Component} from 'preact';

class App extends Component {
  // Initialise our state. For now we only store the input value
  state = {value: ''}

  onInput = ev => {
    // This will schedule a state update. Once updated the component
    // will automatically re-render itself.
    this.setState({value: ev.target.value});
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <form>
          <input type="text" value={this.state.value} onInput={this.onInput} />
          <button type="submit">Update</button>
        </form>
      </div>
    );
  }
}

render(<App />, document.getElementById("app"));

官网：https://lit.dev

LitElement 是一个简略的框架，用于构建疾速、轻量级的 Web 组件。它提供反馈状态、作用域款式和一个玲珑、疾速且富裕表现力的申明性模板零碎。

实例

import {LitElement, html, property, customElement} from 'lit-element';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {@property() name = 'World';

  render() {return html`<p>Hello, ${this.name}!</p>`;
  }
}

<simple-greeting name="Everyone"></simple-greeting>

为什么应用 LitElement

令人欢快的申明: Lit-element 简略，相熟的开发模型使构建 web 组件变得前所未有的简略。以申明的形式表白 UI，作为状态的函数。不必学习 web-components 语言，能够在模版中应用 javascript 的全副性能。element 元素更改时会自动更新
快而轻: 无论是在哪里工作的人，都会观赏 Lit-element 的速度十分快。它应用 lit-html 定义和出现 html 只会从新刷新组件款式动静变更局部
无缝互操作: Lit-element 遵循 web 组件规范。因而组件将实用于任何框架。Lit-element 应用自定义元素轻松蕴含在网页中。应用 shadow DOM 进行封装。

官网：https://stimulus.hotwired.dev

Stimulus 是一个轻量级前端框架。这个框架通过 data-contoller data-target data-action 等属性，把 HTML 元素和 JavaScript 行为绑定，Stimulus 自身不解决 HTML 渲染，而是为已渲染的 HTML 增加行为。

官网：https://emberjs.com

Ember.js 是一个开源的收费 JavaScript 客户端框架，用于开发 Web 应用程序。应用模型 - 视图 - 控制器（MVC）模式。该框架提供通用数据绑定，基于网址驱动的办法用于构建不同利用，重点放在可扩展性上。

Emberjs 是 2011 年开发的基于组件的框架。它出现双向数据绑定，相似于 Angular。它旨在无可挑剔地治理对当代技术一直增长的需要。您能够应用 Ember.js 构建多方面的 Web 和挪动应用程序，并冀望其无效的设计可能解决这些问题。然而，Ember 的学习曲线是它为数不多的缺点之一。因为其传统和刚性的构造，该框架是最具挑战性的 Web UI 框架之一。因为绝对较新且未经摸索，它的开发者社区是微不足道的。任何人只有不拘泥于花工夫学习它的常识，就能够学习它。

当然，还有很多框架，比方：Semantic-UI、Backbone.js、Foundation 等等。

谈到最好的前端框架，咱们能够确定市场是多种多样的。更重要的是，UI 开发人员有机会从顶级创新者中进行抉择。

Angular、Vue.js 和 React 等前端框架曾经在市场上占据了最高地位。

这些框架失去了社区的大力支持，并因其独特的灵活性和个性而被选中。

参考文档

https://baijiahao.baidu.com/s?id=1719221861793933665&wfr=spid…
https://zhuanlan.zhihu.com/p/76463271
https://baijiahao.baidu.com/s?id=1728185890869092949&wfr=spid…

框架

前端框架

罕用的前端框架

Vue

React

Angular

jQuery

Svelte

Alpine

Preact

LitElement

Stimulus

Ember

最好的前端框架