Angular 中的 SPA 架构选型：集中式 vs 分布式-JavaScript中文网-JavaScript教程资源分享门户

Angular 中的 SPA 架构选型：集中式 vs 分布式

前言：

在开发单页应用程序（SPA）时，SPA的架构设计是至关重要的一方面。尤其在Angular中，这个架构的设计方式可能会在未来直接关系到应用程序的性能和可扩展性。本文将讨论两种最流行的SPA架构设计方式：集中式和分布式，并且为您提供根据应用程序需求进行选择的建议。

区分集中式和分布式架构

集中式SPA架构依赖于一个"核心"模块，负责管理应用程序的路由，状态等，并在这个模块中把所有相关的代码逻辑集中在一起。所有其它模块，则依赖于这个核心模块，并通过该模块进行交互。

分布式SPA架构，与集中式架构不同，不依赖于一个“核心”模块，而是把所有功能，组件和服务分散在整个应用程序中，每个组件和服务都能够独立地运行且不依赖于一个“核心”模块来控制。

我们将深入讨论这两种架构设计的优点和缺点，并根据应用程序的性能和可扩展性特点提供不同的建议。

集中式SPA架构

集中式SPA的优点

容易维护：因为设计集中于一个“核心”模块，这使得整个应用程序的开发者可以更好地维护和拓展应用程序。整个应用程序的开发者可以更好地了解代码逻辑关系，从而更容易进行调试和测试。
更安全：由于设计经过了更集中的控制，在应用程序开发期间，可以更好地遵循安全性最佳实践。这种架构可以防止恶意代码的侵入。
更好的性能管理：在应用程序中集中单个核心模块可以在最初的加载中控制并缓存状态，从而实现更好的性能管理。
更好的开发者经验：此设计的优点包括一种更复杂的开发经验，因为应用程序代码会更具有组织结构，更容易阅读和理解。

集中式SPA的缺点

可拓展性差：当实现的功能变得越来越多，且应用程序更具可扩展性时，集中式SPA设计很难扩充特定模块而不影响其它模块。这需要由该模块所在的核心模块的开发者来调整。
开发限制：集中式SPA设计会限制开发者使用最新的技术和方法来推进整个应用程序的开发进程。这是因为所有的代码必须在核心模块中定义，而不是在其它模块中。

示例代码

// 核心模块包含所有的路由、状态，和整个应用程序的顶级组件。

import {NgModule} from '@angular/core'; import {RouterModule} from '@angular/router'; import {BrowserModule} from '@angular/platform-browser';

import {AppComponent} from './app.component'; import {NewsComponent} from './news.component'; import {AboutComponent} from './about.component';

@NgModule({ imports: [BrowserModule, RouterModule.forRoot([ {path: '', redirectTo: '/news', pathMatch: 'full'}, {path: 'news', component: NewsComponent}, {path: 'about', component: AboutComponent} ])], declarations: [AppComponent, NewsComponent, AboutComponent], bootstrap: [AppComponent] }) export class AppModule {}

// 新闻组件。

import {Component} from '@angular/core';

@Component({ selector: 'news', template: `

<h1>News Section</h1>
<p>Some news about Angular.</p>

` }) export class NewsComponent {}

// 关于页面组件。

import {Component} from '@angular/core';

@Component({ selector: 'about', template: `

<h1>About</h1>
<p>This is the about page.</p>

` }) export class AboutComponent {}

分布式SPA架构

分布式SPA的优点

更好的可扩展性：因为应用程序模块无需依赖于一个“核心”模块，这使得分布式SPA设计可以更容易地进行各模块间的分散开发。而不像集中式设计那样，被限制在一个前端框架的封闭系统中。
开发更具自由性：在分布式SPA设计下，开发者可以自由地在应用程序中添加新的功能，组件和服务，而不必考虑与原来代码的兼容性。这样可以使用任何技术和方法，使开发者更自由地推进整个应用程序开发进程。
更好的代码管理：应用程序的代码可以根据功能和逻辑活动的区域来分割成独立的代码库，这使得应用程序代码更容易管理和维护。
更好的学习成长：在分布式SPA设计下，应用程序代码可以更容易地理解和学习，由于每个组件和服务都可以独立工作，开发者可以更快地掌握代码组织和逻辑。

分布式SPA的缺点

缺乏组织结构：由于模块分散在应用程序中，这可能导致应用程序难以维护和管理。因此，在分布式SPA设计下，根据每个模块之间的关系以及其之间的通信，需要有一定的大局观。
缺乏安全性：分布式架构有可能导致代码分散，可能会出现未知的漏洞或安全问题，因为不能保证所有代码都被访问和审查。
性能管理：“分散”设计往往需要更多的代码管理和更多的服务器和资源来支持它，这可能会导致性能方面的瓶颈和其它效能问题。

示例代码

// 基础组件。

import {Component} from '@angular/core'; import {Router} from '@angular/router';

@Component({ selector: 'base', template: <h1>Base Component</h1> }) export class BaseComponent {

constructor(private router: Router) {}

navigateTo(target: string): void { this.router.navigateByUrl(target); }

}

// 新闻组件。

import {Component} from '@angular/core'; import {BaseComponent} from './base.component';

@Component({ selector: 'news', template: `

<base></base>

<h2>News Page</h2>
<p>Here's some news about Angular</p>

<button (click)="navigateTo('/about')">About</button>

` }) export class NewsComponent extends BaseComponent {}

// 关于页面组件。

import {Component} from '@angular/core'; import {BaseComponent} from './base.component';

@Component({ selector: 'about', template: `

<base></base>

<h2>About Page</h2>
<p>This is just the about page.</p>

<button (click)="navigateTo('/news')">News</button>

` }) export class AboutComponent extends BaseComponent {}

总结

在本文中，我们讨论了两种SPA架构设计：集中式和分布式。在应用程序的设计和执行方面，它们具有相同和不同的优点和缺点。集中式架构适用于相对简单的应用程序，而分布式架构适用于复杂或大型应用程序。我们建议如果应用程序需要更好的可扩性，您应该选择分布式架构；如果应用程序的主要需求是可管理性，那么您应该选择集中式架构。在实践中，最好还是根据实际应用程序的需求来决定使用哪种框架。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64851a3a48841e989440995f