架构

后端架构

后端架构通常指用作精简页面内部结构设计的架构，采用广为的后端合作开发模块，比如说，jquery，extjs，bootstrap之类，那些架构PCB了许多机能，比如说html文件格式操作方式，很漂亮的各式各样命令行（按键，表单之类），采用后端架构能协助加速地构筑中文网站。

架构是提供更多两套完备的软件系统，依照明确规定好的标识符内部结构来做选曲，采用后端架构能减少介面合作开发阶段和提升介面的耐用性。

随著Web 愈来愈规范化和国际标准的国际标准化，Web模块化控制技术急速控制技术革新，终端端合作开发急速结晶，后端架构不断涌现。

他们晶灵,后端五大架构是一间, 你抄我, 我抄他, 素来被恶魔漠视, Google, 天神和Meta

五大架构依次是:

• 尤雨溪项目组的 Vue

• Meta（原Facebook）项目组的 React

• Google 项目组的 Angular

但后端又闻所未闻那些架构，上面，单纯如是说呵呵较为盛行的两个后端架构。

更多详尽文本，请QQ搜寻“后端发烧友“， 戳我查阅 。

常见的后端架构

Vue

官方中文网站：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 需要采用第三方库来实现许多机能，如 Vuex 管理状态、Vue Router 实现路由等，这使得合作开发人员需要学习和采用更多的工具和库。

• 缺乏严格的规范化：Vue 缺乏严格的规范化，合作开发人员可能会使用不同的命名规则、模块内部结构等，这可能会导致项目的可维护性减少。

• 市场占有率相对较低：相比于 React 和 Angular，Vue 的市场占有率相对较低，这可能会影响许多合作开发人员的选择。

React

官方中文网站: 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

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

jQuery是 2006 年推出的最初的后端架构之一。不管它的正式发布日期如何，让它与众不同的是它在当今科技生态圈中的重要性。jQuery 不仅易于采用，而且还减少了编写广为的 JavaScript 标识符的需求。基本上，jQuery 用作在后端操作方式DOM 和 CSS 操作方式，并增强中文网站的交互性和机能。

该架构的最新合作开发允许合作开发人员采用其基于 HTML5 的 UI 方案 – jQuery Mobile 创建本地终端应用程序。此外，jQuery 架构对浏览器友好，并支持您打算采用的浏览器。

许多旧的中文网站，依然采用此jQuery。

Svelte

官方中文网站：https://svelte.dev 中文官方中文网站：https://www.sveltejs.cn / https://www.svelte.cn/

Svelte 是一种全新的构建用户介面的方法。传统架构如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将那些工作放到构建应用程序的编译阶段来处理。

与采用虚拟（virtual）DOM 差异对比不同。Svelte 编写的标识符在应用程序的状态更改时就能像做外科手术一样更新 DOM。

Alpine

官方中文网站：https://alpinejs.dev 中文官方中文网站：https://www.alpinejs.cn

Alpine.js 通过很低的成本提供更多了与 Vue 或 React 这类大型架构相近的响应式和声明式特性。

你能继续操作方式 DOM，并在需要的时候采用 Alpine.js。

能理解为 JavaScript 版的 Tailwind。

备注：Alpine.js 的语法几乎完全借用自 Vue （并用 Angular 的语法做了些扩展）。在此由衷感谢他们对 Web 世界的贡献。

实例

Open Dropdown

x-show=”open”

@click.away=”open = false”

Dropdown Body

</div>

Preact

官方中文网站：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 (

Hello, world!

Update

);

}

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

LitElement

官方中文网站：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`

Hello, ${this.name}!

}

}<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进行PCB。

Stimulus

官方中文网站：https://stimulus.hotwired.dev

Stimulus 是一个轻量级后端架构。这个架构通过 data-contoller data-target data-action 等属性，把 HTML 元素和 JavaScript 行为绑定，Stimulus 本身不处理 HTML 渲染，而是为已渲染的 HTML 添加行为。

Ember

官方中文网站：https://emberjs.com

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

Emberjs是 2011 年合作开发的基于模块的架构。它呈现双向数据绑定，类似于 Angular。它旨在无可挑剔地管理对当代控制技术急速增长的需求。您能使用 Ember.js 构建多方面的 Web 和终端应用程序，并期望其有效的内部结构设计能够处理那些问题。然而，Ember 的学习曲线是它为数不多的缺陷之一。由于其传统和刚性的内部结构，该架构是最具挑战性的 Web UI 架构之一。由于相对较新且未经探索，它的合作开发人员社区是微不足道的。任何人只要不拘泥于花时间学习它的知识，就能学习它。