QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

Angular Universal 的三种开发模式

  • 2016-05-12
  • 本文字数:1577 字

    阅读完需:约 5 分钟

虽然 Angular 是一种构建 Web 应用的强大方式,但是长期以来,开发人员都知道它在 SEO 和可访问性方面的限制。当然,Google 的爬虫能够执行 JavaScript,但是它并不是唯一的爬虫方案。例如,在将一个链接提交给 Slack 之后,它的爬虫会抓取一个预览,但是并不会执行 JavaScript,所以原始的 Angular HTML 模板将会显示在预览之中。为了消除这种现象所产生的问题,Jeff Whelpley 和 Patrick Stapleton 开发了 Angular Universal,它允许在服务端进行渲染。

Universal JavaScript(有时会被误称为“isomorphic”)并不是 Angular 特有的技术。Angular Universal 的工作原理是在服务端进行应用的初始化渲染,并将其发送给浏览器,用户就能马上看到了,然后才发送客户端的 JavaScript。这与 Angular 应用的典型顺序是有所区别的,在典型的顺序中会首先发送客户端 JavaScript,_ 然后 _ 初始化 UI 才会在客户端渲染。

Welpley 和 Stapleton 开发 Angular Unversal 已经超过一年了,在这个过程中发现了六个经常遇到的模式。在 2016 ng-conf 的分享中,它们主要关注了其中的三项:

  1. 事件脱节(Gap Event)
  2. 异步(Async)
  3. 依赖(Dependencies)

事件脱节是在服务端渲染所造成的副作用,在这种方式下,渲染会在 JavaScript 客户端脚本发送到浏览器之前执行。根据 JavaScript 发送和执行的速度不同,用户在与 UI 进行交互的时候,可能代码还没有为这些交互做好准备。这种脱节可能会导致用户交互的丢失。

针对该问题的解决方案就是记录用户的事件,并在客户端 JS 加载完成之后进行重放。如下的样例展现这种代码会是什么样子的:

复制代码
var myEvents = [];
var myInputValue;
// 记录客户端视图 myInput 的所有 keyup 事件
function recordEvents() {
var $myInput = document.querySelector('.myInput')
$myInput.addEventListener('keyup', function (event) {
myEvents.push(event);
myInputValue = event.target.value;
});
}
// 在服务器视图 myInput 上回放所有的 keyup 事件
function replayEvents() {
var $myInput = document.querySelector('.myInput');
myEvents.forEach(function (event) {
$myInput.dispatchEvent(event);
});
$myInput.value = myInputValue;
$myInput.focus();
}
// 在 window 加载完成之后,马上就开始记录
window.addEventListener('load', recordEvents);

Angular Universal 使用一种名为 preboot 过程来处理这项任务,而不是要求开发人员手动地做这些事情,可以通过如下的标记启用该功能:

preboot: trueJavaScript 在本质上是异步的,在服务端渲染 Angular 的时候,这就会产生问题。通常的解决方案是使用链(chaining)或回调,但要求开发人员重写他们的代码来解决这个问题显然不是好的可选方案。“我们不能这样做,而是必须要找到一种方式来处理这些不同的异步事件,并调整它们何时将响应发送回来”,Whelpley 这样说到。

Angular Universal 使用另外一个标记来解决这个问题,只需一行就可以了:

async: true将这个标记打开之后,将会使用 Angular 新的 Zones 特性,“跟踪所有的异步调用,并且能够知道它们何时完成。”

在服务端渲染 Angular 代码的第三个主要的问题在于使用平台特定的依赖。例如,localStorage是浏览器的特性,在服务器端根本不存在。Whelpley 和 Stapleton 指出,可以使用依赖注入(Dependency Injection,DI)作为解决方案。他们建议根据代码所执行的上下文,借助 DI 来替换实现,而不是使用平台具体的特性。

对于测试过他们功能的开发人员来说,这应该不足为奇。Whelpley 指出,Angular 所运行的测试和其他平台已经证明了这项技术在 Angular 2 的代码中将会非常普遍。“平台相关的依赖基本上已经被我们消除掉了。这个模式是我今天所讨论的最强大的模式”,Whelpley 说道。

他们 ng-conf 分享的完整视频已经可以观看了。

查看英文原文 3 Development Patterns of Angular Universal

2016-05-12 19:003077

评论

发布
暂无评论
发现更多内容

CleanMyMac2024专业Mac清理软件下载

茶色酒

CleanMyMac2024

运维进阶训练营 -W10H

b1a2e1u1u

运维

模块五作业

Ryan

构架

【web 开发基础】PHP类的构造方法和析构方法(59 )

迷彩

面向对象 PHP基础 构造方法 析构方法

模块4

KING

云端高性能计算,华为云ECS助力企业数字化转型

秃头也爱科技

架构训练营-模块二作业

Sam

架构实战营

好评爆棚的华为弹性云服务器,究竟有哪些亮点?

秃头也爱科技

华为云弹性服务器ECS,如何入局新能源产业?

秃头也爱科技

【JVM故障问题排查心得】「内存诊断系列」Xmx和Xms的大小是小于Docker容器以及Pod的大小的,为啥还是会出现OOMKilled?

码界西柚

jdk JVM 12 月 PK 榜 OOMKilled

OpenTelemetry系列 (五)| OpenTelemetry Java Instrumentation二次开发指南

骑牛上青山

Java 调用链 OpenTelemetry 微服务调用链 agent

反编译APK获取代码&资源

芯动大师

Android Studio APK 反编译

2022-12-31:以下go语言代码输出什么?A:1 1;B:-1 1;C:-1 -1;D:编译错误。 package main import “fmt“ func main() { a

福大大架构师每日一题

golang 福大大 选择题

弹性公网IP支持多产品灵活绑定或解绑,能为企业提供独立公网IP资源!

秃头也爱科技

AI-002-十分钟理解ChatGPT的技术逻辑及演进(前世、今生)

非典型产品经理笔记

NLP 大模型 人工智能’ ChatGPT

CleanMyMac2024一款超好用的Mac清理优化工具

茶色酒

CleanMyMac CleanMyMac X CleanMyMac X2023

校招前端面试题集锦

loveX001

JavaScript

【web 开发基础】PHP中的访问方法(60)

迷彩

PHP基础 property 访问方法 类的封装 封装性

【web 开发基础】PHP面向对象中类的继承(61)

迷彩

面向对象 extends PHP基础 类的继承 类的实例化

音与影的魔法红线:双Vivid标准带来的超高清之变

脑极体

架构训练营模块二作业

gigifrog

架构训练营

针对Web应用的攻击模式

穿过生命散发芬芳

HTTP 1月月更

以华为云ECS为例,解读中小企业为何纷纷转投弹性云服务器

秃头也爱科技

老周的 2022 年终总结

老周聊架构

年终总结 12月月更

AI-001-火爆全网的聊天机器人ChatGPT能做什么

非典型产品经理笔记

nlp 人工智能’ ChatGPT

2022年度总结-个人成长视角

非典型产品经理笔记

个人成长 网络安全 年终总结

架构设计模块三作业

附加信息

架构训练营

从这两道题重新理解,JS的this、作用域、闭包、对象

loveX001

JavaScript

从输入URL到渲染的过程中到底发生了什么?

loveX001

JavaScript

华为云ECS弹性云服务器,赋能企业加速数字化发展

秃头也爱科技

2023-01-01:remix-ide是浏览器的ide,官方已经提供地址,但是需要连接外网。如果是内网,需要自己在服务器里搭建remix-ide;另一种方式是用remix-ide的桌面版。这里只讨论

福大大架构师每日一题

云原生 k8s k3s 福大大 remix-ide

Angular Universal的三种开发模式_JavaScript_David Iffland_InfoQ精选文章