這篇文章繼續Angular的學習,帶大家了解一下Angular中的元資料和裝飾器,簡單了解一下他們的用法,希望對大家有所幫助!
作為「為大型前端專案」而設計的前端框架,Angular 其實有許多值得參考和學習的設計,本系列主要用於研究這些設計和功能的實現原理。本文主要圍繞在 Angular 中隨處可見的元數據,來進行介紹。 【相關教學推薦:《angular教學》】
#裝飾器是使用 Angular 進行開發時的核心概念。在 Angular 中,裝飾器用於為類別或屬性附加元數據,來讓自己知道那些類別或屬性的含義,以及該如何處理它們。
不管是裝飾器還是元數據,都不是 Angular 提出的概念。因此,我們先來簡單了解一下。
元資料(Metadata)
在通用的概念中,元資料是描述使用者資料的資料。它總結了有關數據的基本信息,可以使查找和使用特定數據實例更加容易。例如,作者,建立日期,修改日期和文件大小是非常基本的文檔元資料的範例。
在用於類別的場景下,元資料用於裝飾類,來描述類別的定義和行為,以便可以配置類別的預期行為。
裝飾器(Decorator)
#裝飾器是JavaScript 的語言特性,是位於階段2(stage 2)的試驗特性。
裝飾器是定義期間在類,類元素或其他 JavaScript 語法形式上呼叫的函數。
裝飾器有三個主要功能:
可以用具有相同語意的匹配值取代正在修飾的值。 (例如,裝飾器可以將方法替換為另一種方法,將一個字段替換為另一個字段,將一個類替換為另一個類,等等)。
可以將元資料與正在修飾的值相關聯;可以從外部讀取此元數據,並將其用於元程式設計和自我檢查。
可以透過元資料提供對正在修飾的值的存取。對於公共值,他們可以透過值名稱來實現;對於私有值,它們接收存取器函數,然後可以選擇共用它們。
本質上,裝飾器可用於對值進行元編程和向其添加功能,而無需從根本上改變其外部行為。
更多的內容,可以參考 tc39/proposal-decorators 提案。
我們在開發 Angular 應用程式時,不管是元件、指令,或是服務、模組等,都需要透過裝飾器來進行定義和開發。裝飾器會出現在類別定義的緊前方,用來聲明該類別具有指定的類型,並且提供適合該類型的元資料。
例如,我們可以用下列裝飾器來宣告Angular 的類別:@Component()
、@Directive()
、@Pipe()
、@Injectable()
、@NgModule()
。
使用裝飾器和元資料來改變類別的行為
#以@Component()
為例,該裝飾器的作用包括:
將類別標記為Angular 元件。
提供可配置的元數據,用來決定在執行時應如何處理、實例化和使用該元件。
關於@Component()
該如何使用可以參考,這裡不多介紹。讓我們來看看這個裝飾器的定義:
// 提供 Angular 组件的配置元数据接口定义 // Angular 中,组件是指令的子集,始终与模板相关联 export interface Component extends Directive { // changeDetection 用于此组件的变更检测策略 // 实例化组件时,Angular 将创建一个更改检测器,该更改检测器负责传播组件的绑定。 changeDetection?: ChangeDetectionStrategy; // 定义对其视图 DOM 子对象可见的可注入对象的集合 viewProviders?: Provider[]; // 包含组件的模块的模块ID,该组件必须能够解析模板和样式的相对 URL moduleId?: string; ... // 模板和 CSS 样式的封装策略 encapsulation?: ViewEncapsulation; // 覆盖默认的插值起始和终止定界符(`{{`和`}}`) interpolation?: [string, string]; } // 组件装饰器和元数据 export const Component: ComponentDecorator = makeDecorator( 'Component', // 使用默认的 CheckAlways 策略,在该策略中,更改检测是自动进行的,直到明确停用为止。 (c: Component = {}) => ({changeDetection: ChangeDetectionStrategy.Default, ...c}), Directive, undefined, (type: Type<any>, meta: Component) => SWITCH_COMPILE_COMPONENT(type, meta));
以上便是元件裝飾、元件元資料的定義,我們來看看裝飾器的創建過程。
裝飾器的建立過程
我們可以從原始碼中找到,元件和指令的裝飾器都會透過makeDecorator()
來產生:
export function makeDecorator<T>( name: string, props?: (...args: any[]) => any, parentClass?: any, // 装饰器名字和属性 additionalProcessing?: (type: Type<T>) => void, typeFn?: (type: Type<T>, ...args: any[]) => void): {new (...args: any[]): any; (...args: any[]): any; (...args: any[]): (cls: any) => any;} { // noSideEffects 用于确认闭包编译器包装的函数没有副作用 return noSideEffects(() => { const metaCtor = makeMetadataCtor(props); // 装饰器工厂 function DecoratorFactory( this: unknown|typeof DecoratorFactory, ...args: any[]): (cls: Type<T>) => any { if (this instanceof DecoratorFactory) { // 赋值元数据 metaCtor.call(this, ...args); return this as typeof DecoratorFactory; } // 创建装饰器工厂 const annotationInstance = new (DecoratorFactory as any)(...args); return function TypeDecorator(cls: Type<T>) { // 编译类 if (typeFn) typeFn(cls, ...args); // 使用 Object.defineProperty 很重要,因为它会创建不可枚举的属性,从而防止该属性在子类化过程中被复制。 const annotations = cls.hasOwnProperty(ANNOTATIONS) ? (cls as any)[ANNOTATIONS] : Object.defineProperty(cls, ANNOTATIONS, {value: []})[ANNOTATIONS]; annotations.push(annotationInstance); // 特定逻辑的执行 if (additionalProcessing) additionalProcessing(cls); return cls; }; } if (parentClass) { // 继承父类 DecoratorFactory.prototype = Object.create(parentClass.prototype); } DecoratorFactory.prototype.ngMetadataName = name; (DecoratorFactory as any).annotationCls = DecoratorFactory; return DecoratorFactory as any; }); }
在上面的範例中,我們透過makeDecorator()
產生了一個用於定義元件的Component
裝飾器工廠。當使用@Component()
建立元件時,Angular 會根據元資料來編譯元件。
根據裝飾器元資料編譯元件
Angular 會根據該裝飾器元數據,來編譯Angular 元件,然後將產生的元件定義(ɵcmp
)修補到元件類型上:
export function compileComponent(type: Type<any>, metadata: Component): void { // 初始化 ngDevMode (typeof ngDevMode === 'undefined' || ngDevMode) && initNgDevMode(); let ngComponentDef: any = null; // 元数据可能具有需要解析的资源 maybeQueueResolutionOfComponentResources(type, metadata); // 这里使用的功能与指令相同,因为这只是创建 ngFactoryDef 所需的元数据的子集 addDirectiveFactoryDef(type, metadata); Object.defineProperty(type, NG_COMP_DEF, { get: () => { if (ngComponentDef === null) { const compiler = getCompilerFacade(); // 根据元数据解析组件 if (componentNeedsResolution(metadata)) { ... // 异常处理 } ... // 创建编译组件需要的完整元数据 const templateUrl = metadata.templateUrl || `ng:///${type.name}/template.html`; const meta: R3ComponentMetadataFacade = { ...directiveMetadata(type, metadata), typeSourceSpan: compiler.createParseSourceSpan('Component', type.name, templateUrl), template: metadata.template || '', preserveWhitespaces, styles: metadata.styles || EMPTY_ARRAY, animations: metadata.animations, directives: [], changeDetection: metadata.changeDetection, pipes: new Map(), encapsulation, interpolation: metadata.interpolation, viewProviders: metadata.viewProviders || null, }; // 编译过程需要计算深度,以便确认编译是否最终完成 compilationDepth++; try { if (meta.usesInheritance) { addDirectiveDefToUndecoratedParents(type); } // 根据模板、环境和组件需要的元数据,来编译组件 ngComponentDef = compiler.compileComponent(angularCoreEnv, templateUrl, meta); } finally { // 即使编译失败,也请确保减少编译深度 compilationDepth--; } if (compilationDepth === 0) { // 当执行 NgModule 装饰器时,我们将模块定义加入队列,以便仅在所有声明都已解析的情况下才将队列出队,并将其自身作为模块作用域添加到其所有声明中 // 此调用运行检查以查看队列中的任何模块是否可以出队,并将范围添加到它们的声明中 flushModuleScopingQueueAsMuchAsPossible(); } // 如果组件编译是异步的,则声明该组件的 @NgModule 批注可以执行并在组件类型上设置 ngSelectorScope 属性 // 这允许组件在完成编译后,使用模块中的 directiveDefs 对其自身进行修补 if (hasSelectorScope(type)) { const scopes = transitiveScopesFor(type.ngSelectorScope); patchComponentDefWithScope(ngComponentDef, scopes); } } return ngComponentDef; }, ... }); }
编译组件的过程可能是异步的(比如需要解析组件模板或其他资源的 URL)。如果编译不是立即进行的,compileComponent
会将资源解析加入到全局队列中,并且将无法返回ɵcmp
,直到通过调用resolveComponentResources
解决了全局队列为止。
编译过程中的元数据
元数据是有关类的信息,但它不是类的属性。因此,用于配置类的定义和行为的这些数据,不应该存储在该类的实例中,我们还需要在其他地方保存此数据。
在 Angular 中,编译过程产生的元数据,会使用CompileMetadataResolver
来进行管理和维护,这里我们主要看指令(组件)相关的逻辑:
export class CompileMetadataResolver { private _nonNormalizedDirectiveCache = new Map<Type, {annotation: Directive, metadata: cpl.CompileDirectiveMetadata}>(); // 使用 Map 的方式来保存 private _directiveCache = new Map<Type, cpl.CompileDirectiveMetadata>(); private _summaryCache = new Map<Type, cpl.CompileTypeSummary|null>(); private _pipeCache = new Map<Type, cpl.CompilePipeMetadata>(); private _ngModuleCache = new Map<Type, cpl.CompileNgModuleMetadata>(); private _ngModuleOfTypes = new Map<Type, Type>(); private _shallowModuleCache = new Map<Type, cpl.CompileShallowModuleMetadata>(); constructor( private _config: CompilerConfig, private _htmlParser: HtmlParser, private _ngModuleResolver: NgModuleResolver, private _directiveResolver: DirectiveResolver, private _pipeResolver: PipeResolver, private _summaryResolver: SummaryResolver<any>, private _schemaRegistry: ElementSchemaRegistry, private _directiveNormalizer: DirectiveNormalizer, private _console: Console, private _staticSymbolCache: StaticSymbolCache, private _reflector: CompileReflector, private _errorCollector?: ErrorCollector) {} // 清除特定某个指令的元数据 clearCacheFor(type: Type) { const dirMeta = this._directiveCache.get(type); this._directiveCache.delete(type); ... } // 清除所有元数据 clearCache(): void { this._directiveCache.clear(); ... } /** * 加载 NgModule 中,已声明的指令和的管道 */ loadNgModuleDirectiveAndPipeMetadata(moduleType: any, isSync: boolean, throwIfNotFound = true): Promise<any> { const ngModule = this.getNgModuleMetadata(moduleType, throwIfNotFound); const loading: Promise<any>[] = []; if (ngModule) { ngModule.declaredDirectives.forEach((id) => { const promise = this.loadDirectiveMetadata(moduleType, id.reference, isSync); if (promise) { loading.push(promise); } }); ngModule.declaredPipes.forEach((id) => this._loadPipeMetadata(id.reference)); } return Promise.all(loading); } // 加载指令(组件)元数据 loadDirectiveMetadata(ngModuleType: any, directiveType: any, isSync: boolean): SyncAsync<null> { // 若已加载,则直接返回 if (this._directiveCache.has(directiveType)) { return null; } directiveType = resolveForwardRef(directiveType); const {annotation, metadata} = this.getNonNormalizedDirectiveMetadata(directiveType)!; // 创建指令(组件)元数据 const createDirectiveMetadata = (templateMetadata: cpl.CompileTemplateMetadata|null) => { const normalizedDirMeta = new cpl.CompileDirectiveMetadata({ isHost: false, type: metadata.type, isComponent: metadata.isComponent, selector: metadata.selector, exportAs: metadata.exportAs, changeDetection: metadata.changeDetection, inputs: metadata.inputs, outputs: metadata.outputs, hostListeners: metadata.hostListeners, hostProperties: metadata.hostProperties, hostAttributes: metadata.hostAttributes, providers: metadata.providers, viewProviders: metadata.viewProviders, queries: metadata.queries, guards: metadata.guards, viewQueries: metadata.viewQueries, entryComponents: metadata.entryComponents, componentViewType: metadata.componentViewType, rendererType: metadata.rendererType, componentFactory: metadata.componentFactory, template: templateMetadata }); if (templateMetadata) { this.initComponentFactory(metadata.componentFactory!, templateMetadata.ngContentSelectors); } // 存储完整的元数据信息,以及元数据摘要信息 this._directiveCache.set(directiveType, normalizedDirMeta); this._summaryCache.set(directiveType, normalizedDirMeta.toSummary()); return null; }; if (metadata.isComponent) { // 如果是组件,该过程可能为异步过程,则需要等待异步过程结束后的模板返回 const template = metadata.template !; const templateMeta = this._directiveNormalizer.normalizeTemplate({ ngModuleType, componentType: directiveType, moduleUrl: this._reflector.componentModuleUrl(directiveType, annotation), encapsulation: template.encapsulation, template: template.template, templateUrl: template.templateUrl, styles: template.styles, styleUrls: template.styleUrls, animations: template.animations, interpolation: template.interpolation, preserveWhitespaces: template.preserveWhitespaces }); if (isPromise(templateMeta) && isSync) { this._reportError(componentStillLoadingError(directiveType), directiveType); return null; } // 并将元数据进行存储 return SyncAsync.then(templateMeta, createDirectiveMetadata); } else { // 指令,直接存储元数据 createDirectiveMetadata(null); return null; } } // 获取给定指令(组件)的元数据信息 getDirectiveMetadata(directiveType: any): cpl.CompileDirectiveMetadata { const dirMeta = this._directiveCache.get(directiveType)!; ... return dirMeta; } // 获取给定指令(组件)的元数据摘要信息 getDirectiveSummary(dirType: any): cpl.CompileDirectiveSummary { const dirSummary = <cpl.CompileDirectiveSummary>this._loadSummary(dirType, cpl.CompileSummaryKind.Directive); ... return dirSummary; } }
可以看到,在编译过程中,不管是组件、指令、管道,还是模块,这些类在编译过程中的元数据,都使用Map
来存储。
本节我们介绍了 Angular 中的装饰器和元数据,其中元数据用于描述类的定义和行为。
在 Angular 编译过程中,会使用Map
的数据结构来维护和存储装饰器的元数据,并根据这些元数据信息来编译组件、指令、管道和模块等。
更多编程相关知识,请访问:编程教学!!
以上是聊聊Angular中的元資料(Metadata)和裝飾器(Decorator)的詳細內容。更多資訊請關注PHP中文網其他相關文章!