Angular 其中的一个设计目标是使浏览器与 DOM 独立。DOM 是复杂的，因此使组件与它分离，会让我们的应用程序，更容易测试与重构。另外的好处是，由于这种解耦，使得我们的应用能够运行在其它平台 (比如：Node.js、WebWorkers、NativeScript 等)。
为了能够支持跨平台，Angular 通过抽象层封装了不同平台的差异。比如定义了抽象类 Renderer、Renderer2 、抽象类 RootRenderer 等。此外还定义了以下引用类型：ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。
本文的主要内容是分析 Angular 中 Renderer (渲染器)，不过在进行具体分析前，我们先来介绍一下平台的概念。
平台
什么是平台
平台是应用程序运行的环境。它是一组服务，可以用来访问你的应用程序和 Angular 框架本身的内置功能。由于Angular 主要是一个 UI 框架，平台提供的最重要的功能之一就是页面渲染。
平台和引导应用程序
在我们开始构建一个自定义渲染器之前，我们来看一下如何设置平台，以及引导应用程序。
@NgModule({
imports: [browserModule],bootstrap: [AppCmp]
})
class AppModule {}
platformbrowserDynamic().bootstrapModule(AppModule);
如你所见，引导过程由两部分组成：创建平台和引导模块。在这个例子中，我们导入 browserModule 模块，它是浏览器平台的一部分。应用中只能有一个激活的平台，但是我们可以利用它来引导多个模块，如下所示：
由于应用中只能有一个激活的平台，单例的服务必须在该平台中注册。比如，浏览器只有一个地址栏，对应的服务对象就是单例。此外如何让我们自定义的 UI 界面，能够在浏览器中显示出来呢，这就需要使用 Angular 为我们提供的渲染器。
渲染器
什么是渲染器
渲染器是 Angular 为我们提供的一种内置服务，用于执行 UI 渲染操作。在浏览器中，渲染是将模型映射到视图的过程。模型的值可以是 JavaScript 中的原始数据类型、对象、数组或其它的数据对象。然而视图可以是页面中的段落、表单、按钮等其他元素，这些页面元素内部使用 (Document Object Model) 来表示。
Angular Renderer
需要注意的是在 Angular 4.x+ 版本，我们使用 Renderer2 替代 Renderer。通过观察 Renderer 相关的抽象类 (Renderer、Renderer2)，我们发现抽象类中定义了很多抽象方法，用来创建元素、文本、设置属性、添加样式和设置事件监听等。
渲染器如何工作
在实例化一个组件时，Angular 会调用 renderComponent() 方法并将其获取的渲染器与该组件实例相关联。Angular 将会在渲染组件时通过渲染器执行对应相关的操作，比如，创建元素、设置属性、添加样式和订阅事件等。
使用 Renderer
Exe Component
` }) export class ExeComponent { constructor(private renderer: Renderer2,elRef: ElementRef) { this.renderer.setProperty(elRef.nativeElement,'author','semlinker'); } }以上代码中，我们利用构造注入的方式，注入 Renderer2 和 ElementRef 实例。有些读者可能会问，注入的实例对象是怎么生成的。这里我们只是稍微介绍一下相关知识，并不会详细展开。具体代码如下：
// packages/core/src/view/provider.ts
const RendererV1TokenKey = tokenKey(RendererV1);
const Renderer2TokenKey = tokenKey(Renderer2);
const ElementRefTokenKey = tokenKey(ElementRef);
const ViewContainerRefTokenKey = tokenKey(ViewContainerRef);
const TemplateRefTokenKey = tokenKey(TemplateRef);
const ChangeDetectorRefTokenKey = tokenKey(ChangeDetectorRef);
const InjectorRefTokenKey = tokenKey(Injector);
通过以上代码，我们发现当我们在组件类的构造函数中声明相应的依赖对象时，如 Renderer2 和 ElementRef，Angular 内部会调用 resolveDep() 方法，实例化 Token 对应依赖对象。
在大多数情况下，我们开发的 Angular 应用程序是运行在浏览器平台，接下来我们来了解一下该平台下的默认渲染器 - DefaultDomrenderer2。
DefaultDomrenderer2
在浏览器平台下，我们可以通过调用 DomrendererFactory2 工厂，根据不同的视图封装方案，创建对应渲染器。
constructor(
private eventManager: EventManager,private sharedStylesHost: DomSharedStylesHost) {
// 创建默认的DOM渲染器
this.defaultRenderer = new DefaultDomRenderer2(eventManager);
};
createRenderer(element: any,type: RendererType2|null): Renderer2 {
if (!element || !type) {
return this.defaultRenderer;
}
// 根据不同的视图封装方案，创建不同的渲染器
switch (type.encapsulation) {
// 无 Shadow DOM，但是通过 Angular 提供的样式包装机制来封装组件，
// 使得组件的样式不受外部影响，这是 Angular 的默认设置。
case ViewEncapsulation.Emulated: {
let renderer = this.rendererByCompId.get(type.id);
if (!renderer) {
renderer =
new EmulatedEncapsulationDomRenderer2(this.eventManager,this.sharedStylesHost,type);
this.rendererByCompId.set(type.id,renderer);
}
(
return renderer;
}
// 使用原生的 Shadow DOM 特性
case ViewEncapsulation.Native:
return new ShadowDomRenderer(this.eventManager,element,type);
// 无 Shadow DOM，并且也无样式包装
default: {
// ...
return this.defaultRenderer;
}
}
}
}
上面代码中的 EmulatedEncapsulationDomRenderer2 和 ShadowDomRenderer 类都继承于 DefaultDomRenderer2 类，接下来我们再来看一下 类的内部实现：
createElement(name: string,namespace?: string): any {
if (namespace) {
return document.createElementNS(NAMESPACE_URIS[namespace],name);
}
return document.createElement(name);
}
createComment(value: string): any { return document.createComment(value); }
createText(value: string): any { return document.createTextNode(value); }
addClass(el: any,name: string): void { el.classList.add(name); }
setStyle(el: any,flags: RendererStyleFlags2): void {
if (flags & RendererStyleFlags2.DashCase) {
el.style.setProperty(
style,value,!!(flags & RendererStyleFlags2.Important) ? 'important' : '');
} else {
el.style[style] = value;
}
}
listen(
target: 'window'|'document'|'body'|any,event: string,callback: (event: any) => boolean):
() => void {
checkNoSyntheticProp(event,'listener');
if (typeof target === 'string') {
return <() => void>this.eventManager.addGlobalEventListener(
target,event,decoratePreventDefault(callback));
}
return <() => void>this.eventManager.addEventListener(
target,decoratePreventDefault(callback)) as() => void;
}
}
介绍完 DomrendererFactory2 和 DefaultDomrenderer2 类，最后我们来看一下 Angular 内部如何利用它们。
DomrendererFactory2 内部应用
return createView(
parentView.root,compRenderer,parentView,nodeDef.element !.componentProvider,viewDef);
}
步骤一
当 Angular 在创建组件视图时，会根据 nodeDef.element 对象的 componentRendererType 属性值，来创建组件的渲染器。接下来我们先来看一下 NodeDef 、 ElementDef 和 RendererType2 接口定义：
// 元素的定义
export interface ElementDef {
name: string|null;
attrs: [string,string,string][]|null;
template: ViewDeFinition|null;
componentProvider: NodeDef|null;
// 设置组件渲染器的类型
componentRendererType: RendererType2|null; // nodeDef.element.componentRendererType
componentView: ViewDeFinitionFactory|null;
handleEvent: ElementHandleEventFn|null;
// ...
}
// packages/core/src/render/api.ts
// RendererType2 接口定义
export interface RendererType2 {
id: string;
encapsulation: ViewEncapsulation; // Emulated、Native、None
styles: (string|any[])[];
data: {[kind: string]: any};
}
步骤二
获取 componentRendererType 的属性值后，如果该值为 null 的话，则直接使用 parentView.root 属性值对应的 renderer 对象。若该值不为空，则调用 parentView.root 对象的 rendererFactory() 方法创建 renderer 对象。
通过上面分析，我们发现不管走哪条分支，我们都需要使用 parentView.root 对象，然而该对象是什么特殊对象？我们发现 parentView 的数据类型是 ViewData ，该数据接口定义如下：
通过 ViewData 的接口定义，我们终于发现了 parentView.root 的属性类型，即 RootData：
那好，现在问题来了：
- 什么时候创建
RootData对象？ - 怎么创建
RootData对象？
什么时候创建 RootData 对象？
当创建根视图的时候会创建 RootData，在开发环境会调用 debugCreateRootView() 方法创建 RootView，而在生产环境会调用 createProdRootView() 方法创建 RootView。简单起见，我们只分析 createProdRootView() 方法：
return createRootView(
createRootData(elInjector,ngModule,rendererFactory,projectableNodes,rootSelectorOrNode),def,context);
}
// 创建根视图
export function createRootView(root: RootData,context?: any): ViewData {
// 创建ViewData对象
const view = createView(root,root.renderer,null,def);
initView(view,context,context);
createViewNodes(view);
return view;
}
上面代码中，当创建 RootView 的时候，会调用 createRootData() 方法创建 RootData 对象。最后一步就是分析 createRootData() 方法。
怎么创建 RootData 对象？
通过上面分析，我们知道通过 createRootData() 方法，来创建 RootData 对象。createRootData() 方法具体实现如下：
此时浏览器平台下， Renderer 渲染器的相关基础知识已介绍完毕。接下来，我们做一个简单总结：
- Angular 应用程序启动时会创建 RootView (生产环境下通过调用 createProdRootView() 方法)
- 创建 RootView 的过程中，会创建 RootData 对象，该对象可以通过 ViewData 的 root 属性访问到。基于 RootData 对象，我们可以通过
renderer访问到默认的渲染器，即 DefaultDomrenderer2 实例，此外也可以通过rendererFactory访问到RendererFactory2实例。 - 在创建组件视图 (ViewData) 时，会根据
componentRendererType的属性值，来设置组件关联的renderer渲染器。 - 当渲染组件视图的时候，Angular 会利用该组件关联的
renderer提供的 API，创建该视图中的节点或执行视图的相关操作，比如创建元素 (createElement)、创建文本 (createText)、设置样式 (setStyle) 和 设置事件监听 (listen) 等。
后面如果有时间的话，我们会介绍如何自定义渲染器，有兴趣的读者，可以先查阅 "参考资源" 中的链接。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文地址：https://www.jb51.cc/js/32542.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
