使用 Angular Universal 进行服务器端渲染的防御性编程思路

举报
汪子熙 发表于 2023/02/25 15:41:06 2023/02/25
【摘要】 如果无法从 Angular 平台注入所需的正确全局值,则可以避免调用浏览器代码,只要不需要在服务器上访问该代码即可。 例如,全局窗口元素的调用通常是为了获取窗口大小或其他一些视觉方面。 但是,在服务器上,没有 screen 的概念,所以很少需要这个功能。开发人员可能会在网上和其他地方阅读到推荐的方法是使用 isPlatformBrowser 或 isPlatformServer,这个指导值得...

如果无法从 Angular 平台注入所需的正确全局值,则可以避免调用浏览器代码,只要不需要在服务器上访问该代码即可。 例如,全局窗口元素的调用通常是为了获取窗口大小或其他一些视觉方面。 但是,在服务器上,没有 screen 的概念,所以很少需要这个功能。

开发人员可能会在网上和其他地方阅读到推荐的方法是使用 isPlatformBrowser 或 isPlatformServer,这个指导值得商榷。

这是因为这样做的话,最终会在应用程序代码中创建特定于平台的代码分支。 这不仅不必要地增加了应用程序的大小,而且还增加了必须维护的复杂性。 通过将代码分离到单独的特定于平台的模块和实现中,基本代码可以保留业务逻辑,并且特定于平台的异常将按应有的方式处理:在个案抽象的基础上。 这可以使用 Angular 的依赖注入 (DI) 来完成,以便在运行时删除有问题的代码并放入替换代码。

下面是一个例子。

为浏览器环境和服务器环境分别创建不同的 service 类:

// window-service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class WindowService {
  getWidth(): number {
    return window.innerWidth;
  }
}
// server-window.service.ts
import { Injectable } from '@angular/core';
import { WindowService } from './window.service';

@Injectable()
export class ServerWindowService extends WindowService {
  getWidth(): number {
    return 0;
  }
}

在服务器端 module 里,使用 Angular 注入框架,注入 ServiceWindowService 实现:

// app-server.module.ts
import {NgModule} from '@angular/core';
import {WindowService} from './window.service';
import {ServerWindowService} from './server-window.service';

@NgModule({
  providers: [{
    provide: WindowService,
    useClass: ServerWindowService,
  }]
})

如果第三方提供的组件不是开箱即用的通用兼容组件,则除了基本应用程序模块之外,您还可以为浏览器和服务器(您应该已经拥有的服务器模块)创建两个单独的模块。 基本应用程序模块将包含所有与平台无关的代码,浏览器模块将包含所有特定于浏览器/服务器不兼容的代码,反之亦然用于服务器模块。 为了避免编辑过多的模板代码,您可以创建一个空操作组件以插入库组件。 这是一个例子:

// example.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'example-component',
  template: `<library-component></library-component>`, // this is provided by a third-party lib
  // that causes issues rendering on Universal
})
export class ExampleComponent {}

app module:

// app.module.ts
import {NgModule} from '@angular/core';
import {ExampleComponent} from './example.component';

@NgModule({
  declarations: [ExampleComponent],
})

浏览器端 module:

// browser-app.module.ts
import {NgModule} from '@angular/core';
import {LibraryModule} from 'some-lib';
import {AppModule} from './app.module';

@NgModule({
  imports: [AppModule, LibraryModule],
})
// library-shim.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'library-component',
  template: '',
})
export class LibraryShimComponent {}

服务器端 module:

// server.app.module.ts
import { NgModule } from '@angular/core';
import { LibraryShimComponent } from './library-shim.component';
import { AppModule } from './app.module';

@NgModule({
  imports: [AppModule],
  declarations: [LibraryShimComponent],
})
export class ServerAppModule {}

shim 是针对特定平台永远不支持的功能的补丁。polyfill 是计划支持或更新版本支持的功能的补丁。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。