写点什么

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:003113

评论

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

去哪儿网MySQL日志分析实践,80%数据丢失都给你救回来!

Qunar技术沙龙

dba

疫情时代如何提高办公效率?

小炮

行业案例| MongoDB在腾讯零售优码中的应用

MongoDB中文社区

mongodb

揭秘百度智能测试在测试自动生成领域的探索

百度Geek说

测试

第1章-Spring的模块与应用场景

码匠

Java Spring Framework

Consul的基本使用与集群搭建

神农写代码

自助洗车加盟都要注意哪些事项

共享电单车厂家

自助洗车加盟 自助洗车机厂家 自助洗车品牌

解决方案| 阿里云数据库MongoDB版助力餐道显著提升运维效率,打造卓越餐饮/零售服务

MongoDB中文社区

mongodb

手把手带你用Zabbix进行操作系统监控

博文视点Broadview

【国产免费】分布式作业批处理ETL平台TASKCTL变量属性设置

敏捷调度TASKCTL

大数据 DevOps 分布式 自动化运维 TASKCTL

墨天轮最受DBA欢迎的数据库技术文档-SQL优化篇

墨天轮

MySQL 数据库 oracle postgresql

购买自助洗车机时都要注意哪些

共享电单车厂家

自助洗车机多少钱 自助洗车机价格 自助洗车加盟 购买自助洗车机

中国联通改造 Apache DolphinScheduler 资源中心,实现计费环境跨集群调用与数据脚本一站式访问

白鲸开源

大数据 开源 Apache DolphinScheduler workflow apache 社区

技术干货| MongoDB如何查询Null或不存在的字段?

MongoDB中文社区

mongodb

全球云服务支出持续攀升,中国云安全市场进入黄金期

行云管家

云计算 网络安全 公有云 云服务 云平台

给大家科普下如何加盟自助洗车

共享电单车厂家

自助洗车加盟 自助洗车怎么加盟 如何加盟自助洗车

文章插图汇总

武师叔

开发板上新抢先知!居然可以用来跑游戏?

HarmonyOS开发者

开发板 HarmonyOS

服务器运维省钱省事省心安全就用行云管家!

行云管家

服务器 行云管家 服务器运维

龙蜥正式开源 SysOM:百万级实战经验打造!一站式运维管理平台 | 龙蜥技术

OpenAnolis小助手

开源 操作系统 龙蜥社区 SysOM 系统运维SIG

网站开发进阶(三十三)中文字符编码问题解决总结

No Silver Bullet

异常 5月月更 中文编码

Redis命令HSCAN踩坑指南

Qunar技术沙龙

dba

区块链系统开发,交易所交易平台搭建

Geek_56201b

如何制作网站的在线帮助中心

小炮

帮助中心

JavaScript class类的基本使用方法你知道吗

CRMEB

实践GoF的23种设计模式:建造者模式

华为云开发者联盟

Go 设计模式 GoF 建造者模式

网站开发进阶(三十六)String.getBytes()方法中的中文编码问题解决总结

No Silver Bullet

编码 5月月更 getBytes

加盟自助洗车需要营业执照吗

共享电单车厂家

自助洗车加盟 加盟自助洗车

开家自助洗车房需要投资多少钱

共享电单车厂家

自助洗车加盟 开自助洗车店多少钱 开家自助洗车房

用上这个 Mock 神器,让你的开发爽上天!

Liam

前端 前端开发 Postman Mock Mock 服务

一个小操作,SQL查询速度翻了1000倍。

TiDB 社区干货传送门

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