FAST Element 数据绑定的运行时核心：深入解析 BindingBehavior 类-开发者社区

前端
UI组件

【免费下载链接】fast

The adaptive interface system for modern web experiences.

项目地址：https://gitcode.com/gh_mirrors/fa/fast

导读

BindingBehavior是 FAST Element（@microsoft/fast-element）模板引擎中负责把数据绑定（Data Binding）落到真实 DOM 上的核心运行时行为类：它接收一个已配置好的BindingDirective，在视图绑定时求值表达式、把最新值写入目标元素的内容或属性，并在可观察数据变化时同步更新 DOM。本文以sites/website/src/docs/1.x/api/fast-element.bindingbehavior.md的 API 文档为主线，结合仓库中packages/fast-element/src/templating/html-binding-directive.ts、packages/fast-element/src/binding/binding.ts等源码，带你理解BindingBehavior的构造函数参数、bind/unbind生命周期以及它在完整绑定管线中的位置，掌握 FAST 模板${expr}、属性前缀绑定（:prop、?attr、@event等）背后的更新机制。

一、类概览：BindingBehavior 在模板引擎中的定位

BindingBehavior是@microsoft/fast-element1.x API 中一个公开导出的类，其 API 文档给出的官方定位是：

A behavior that updates content and attributes based on a configuredBindingDirective.

它的 TypeScript 签名如下（见 fast-element.bindingbehavior.md）：

export declare class BindingBehavior implements Behavior

Behavior 契约

BindingBehavior实现的是模板引擎中的Behavior接口——在 FAST 的视图体系里，Behavior是附着在特定 DOM 节点上的运行时工作单元，视图的bind()/unbind()会逐个调用每个 behavior 的对应方法。在packages/fast-element/src/templating/html-directive.ts中可以看到与之一脉相承的ViewBehavior接口定义：

export interface ViewBehavior<TSource = any, TParent = any> { bind(controller: ViewController<TSource, TParent>): void; }

ViewBehaviorFactory是模板编写阶段（authoring time）创建的"蓝图"，而BindingBehavior这类ViewBehavior则是每个HTMLView实例创建时实例化的"活对象"。packages/fast-element/DESIGN.md中的行为对照表把这条对应关系描述得非常清楚：

Directive（工厂）	创建的 ViewBehavior	效果
`HTMLBindingDirective`	`BindingBehavior`	求值绑定；更新 DOM 方面（attribute / property / event / content / tokenList）
`when`	`WhenBehavior`	条件插入子视图
`repeat`	`RepeatBehavior`	渲染列表子视图

也就是说：HTMLBindingDirective负责"配置"绑定（记录目标、表达式、aspect 类型），BindingBehavior负责"执行"绑定（绑定到 source、写入 DOM、响应变化），二者共同构成 FAST 数据绑定从模板到 DOM 的最后一段链路。

二、构造函数：七个参数构成的完整绑定上下文

BindingBehavior的构造函数签名与参数说明位于 fast-element.bindingbehavior.constructor.md：

constructor( target: any, binding: Binding, isBindingVolatile: boolean, bind: typeof normalBind, unbind: typeof normalUnbind, updateTarget: typeof updatePropertyTarget, targetName?: string );

参数	类型	说明
`target`	`any`	数据更新的目标对象（通常就是被绑定的 DOM 节点）。
`binding`	`Binding`	返回每次更新最新值的绑定配置。
`isBindingVolatile`	`boolean`	指示该绑定是否包含易变（volatile）依赖。
`bind`	`typeof normalBind`	执行绑定期间的操作。
`unbind`	`typeof normalUnbind`	执行解绑期间的操作。
`updateTarget`	`typeof updatePropertyTarget`	执行更新时写入目标的操作。
`targetName`	`string`（可选）	要更新的目标属性或 attribute 名称。

各参数背后的设计含义

target与targetName：二者共同回答"把值写到哪"。target指向目标节点，targetName指定具体 aspect（属性名或 attribute 名）。在 FAST 的属性前缀语法中，这个targetName可以来自class、:value（属性）、?disabled（布尔属性）、@click（事件）、:classList（token 列表）等不同 aspect（详见下文第三节）。
binding: Binding：来自packages/fast-element/src/binding/binding.ts的抽象类。它封装了三个关键能力：
- evaluate: Expression—— 求值函数，绑定表达式本体；
- policy?: DOMPolicy—— 关联的 DOM 安全策略；
- isVolatile: boolean—— 是否易变；
- 抽象方法createObserver(subscriber, directive): ExpressionObserver—— 创建观察器，用于在数据变化时通知订阅者。
BindingBehavior正是借助binding.createObserver()拿到ExpressionObserver，并在bind时用observer.bind()完成首次求值与依赖收集。
isBindingVolatile：布尔标志，决定该绑定是否需要在每次求值时重新收集依赖。由绑定表达式是否包含易变依赖（如volatile装饰器标记的 getter）决定，影响观察器的行为路径。
bind/unbind（typeof normalBind/typeof normalUnbind）：构造时注入的两个函数引用，分别对应"绑定到 source"和"从 source 解绑"的标准操作。作为属性暴露后，外部可以通过实例的bind/unbind直接触发，或由视图生命周期统一调度。
updateTarget（typeof updatePropertyTarget）：把新值写入目标的操作函数。在packages/fast-element/src/templating/html-binding-directive.ts中可以看到其同类形态UpdateTarget的类型定义，以及按DOMAspect分派的 sink 函数表（sinkLookup）：

const sinkLookup: Record<DOMAspect, UpdateTarget> = { [DOMAspect.attribute]: DOM.setAttribute, [DOMAspect.booleanAttribute]: DOM.setBooleanAttribute, [DOMAspect.property]: (t, a, v) => (t[a] = v), [DOMAspect.content]: updateContent, [DOMAspect.tokenList]: updateTokenList, [DOMAspect.event]: () => void 0, };

这个映射正是BindingBehavior的updateTarget在不同 aspect 类型下的"标准实现"：attribute 走DOM.setAttribute，content 走updateContent（内部处理纯文本与模板组合两种情形），事件则通过addEventListener单独处理。

三、bind / unbind 属性：视图生命周期中的两次握手

BindingBehavior暴露两个公开属性，对应绑定生命周期的两端（见 fast-element.bindingbehavior.bind.md 与 fast-element.bindingbehavior.unbind.md）：

bind: typeof normalBind; // Bind this behavior to the source. unbind: typeof normalUnbind; // Unbinds this behavior from the source.

bind：建立数据连接

bind的作用是把 behavior 绑定到数据源（source）。以HTMLBindingDirective（它在当前源码中直接承担了BindingBehavior的职责，见html-binding-directive.ts的bind(controller)）为参照，绑定过程按 aspect 类型分派：

事件绑定（DOMAspect.event）：把 controller 引用存到目标节点，再target.addEventListener(targetAspect, this, options)——directive 自身作为EventListener，通过handleEvent(event)在事件触发时求值表达式，若表达式返回值不是true则调用event.preventDefault()；
内容绑定（DOMAspect.content）：先注册解绑处理器，随后落入默认分支；
其余绑定（attribute / property / tokenList / content）：通过dataBinding.createObserver(this, this)创建（或复用）ExpressionObserver，调用observer.bind(controller)求值表达式以建立依赖追踪，最后通过updateTarget把值写入 DOM。

unbind：断开数据连接

unbind把 behavior 从 source 上解绑，清理观察器与视图状态。在html-binding-directive.ts的unbind实现中可以看到内容绑定的清理细节：若目标节点上组合了子视图（$fastView且isComposed），则调用view.unbind()并标记needsBindOnly = true，以便后续重新绑定时只做 bind 而不重建视图。

packages/fast-element/DESIGN.md中描述了视图层面的调度：HTMLView.unbind()会逐个调用每个 behavior 的unbind()并清空 source；bind(source, context)则在 source 或 context 身份变化时重新走绑定流程。

四、从 HTMLBindingDirective 到 BindingBehavior：工厂如何产出运行时行为

在 1.x 的 API 体系中，HTMLBindingDirective负责配置绑定，BindingBehavior是它产出的运行时行为。对应的createBehavior()方法在 fast-element.htmlbindingdirective.createbehavior.md 有单独文档；当前源码中的实现逻辑（见 html-binding-directive.tscreateBehavior()）是：

根据aspectType从sinkLookup中选取对应的 sink 函数；
用policy.protect(targetTagName, aspectType, targetAspect, sink)对 sink 做安全策略包装（binding.policy ?? this.policy决定使用哪个策略）；
缓存updateTarget，返回行为对象。

而 aspect 类型本身是在模板编写阶段由HTMLDirective.assignAspect根据属性名前缀判定出来的（见 html-directive.ts）：

标记语法	判定规则	映射为`DOMAspect`	最终写入方式
`attr="${expr}"`	无前缀	`attribute`	`DOM.setAttribute`
`?attr="${expr}"`	`?`前缀	`booleanAttribute`	`DOM.setBooleanAttribute`
`:prop="${expr}"`	`:`前缀	`property`（`:classList`特判为`tokenList`）	`target[prop] = value`
`:classList="${expr}"`	`:classList`	`tokenList`	版本化`classList`更新
`@event="${expr}"`	`@`前缀	`event`	`addEventListener`
文本中`${expr}`	空值	`content`	`textContent`/ 子视图组合

sourceAspect保留标记中的原始写法，targetAspect则是去掉前缀后的实际目标名——这与构造函数中的targetName参数一一对应。

五、响应式更新：数据变化时 BindingBehavior 如何刷新 DOM

BindingBehavior的"持续工作"发生在首次 bind 建立依赖追踪之后。packages/fast-element/docs/template-bindings.md用时序图完整描述了这一响应式更新链路：

首次绑定：dataBinding.createObserver()创建ExpressionObserver，observer.bind(controller)求值表达式并记录求值过程中访问过的可观察属性；
数据变化：可观察属性的 setter 触发Observable通知ExpressionObserver（订阅者）；
回调：observer通知 directive，后者调用handleChange(binding, observer)，重新observer.bind(controller)求值新值；
写入 DOM：通过updateTarget(target, aspect, newValue, controller)把新值推送到 DOM。

handleChange中还有一层重要保护（对应注释中提到的 microsoft/fast#7444 议题）：若 controller 已解绑（!controller.isBound），则直接返回，防止在when等结构性指令拆除子视图后，耦合生命周期观察器仍以空 source 求值导致崩溃。

内容绑定的特殊分支：updateContent

当绑定值本身是一个ContentTemplate（具有create()方法）时，updateContent会组合一个子视图到 DOM 中：清空目标textContent、复用或新建视图、view.bind()后insertBefore(target)，并把视图缓存在target.$fastView、模板缓存在target.$fastTemplate；当值重新变成原始值时，则移除组合视图并回退到target.textContent = value。

批量更新与节流

可观察 setter 与attributeChangedCallback的 DOM 变更会先进入Updates批处理队列（见packages/fast-element/src/observation/update-queue.ts），异步模式下通过requestAnimationFrame每帧最多排空 1024 个任务——因此多个同步属性变更最终只产生一次 DOM 刷新。这一机制是BindingBehavior高效运行的底层保障。

六、结合实战：一条模板绑定从编写到更新的完整旅程

以下代码展示了典型的 FAST 元素模板绑定写法（参考仓库examples/与文档packages/fast-element/docs/template-bindings.md中的语法约定）：

import { html, ref, repeat, when } from "@microsoft/fast-element"; import { TodoItem } from "./todo-item.js"; const template = html<TodoApp>` <div class="header" ?hidden="${x => x.isEmpty}"> <input :value="${x => x.filter}" @input="${(x, c) => x.onInput(c.event)}" /> <span>${x => x.count} items</span> </div> `;

把这段模板套入前文描述的管线，BindingBehavior的参与过程如下：

模板编写：html标签把每个插值包装为HTMLBindingDirective（函数值默认oneWay()，静态值oneTime()，已有Binding实例直接复用），createHTML()返回占位标记，assignAspect依据前缀判定 aspect 类型；
编译：Compiler解析占位标记，把每个 factory 与 DOM 树中的目标节点（结构 ID，如"r.0"）关联；
视图创建：CompilationContext.createView()克隆DocumentFragment，实例化每个 factory 的 behavior（即创建BindingBehavior）；
首次绑定：view.bind(source)→behavior.bind()→ 创建ExpressionObserver、求值、经 sink 写入 DOM；
响应更新：数据变化 →Observable通知 →handleChange重新求值 → sink 更新 DOM。

其中?hidden="${x => x.isEmpty}"走booleanAttribute分支（DOM.setBooleanAttribute），:value走 property 分支（target.value = value），@input走事件分支（directive 自身作为EventListener，c.event通过ExecutionContext暴露给表达式），文本${x => x.count}走 content 分支（textContent）。

SSR / Hydration 场景下的注意点

若启用 hydration（enableHydration()，见 template-bindings.md 与packages/fast-element/src/templating/hydration-view.ts），服务端已渲染出正确的 attribute 值，因此 hydration 过程中attribute/booleanAttribute绑定会跳过首次 DOM 更新（只建立观察），仅保留 content / property / tokenList 的初始化写入——这正是HTMLBindingDirective.bind()中controller._skipAttrUpdates标志的作用。这一点对理解 SSR 页面上的"双写"开销与首屏性能至关重要。

七、阅读路径与进一步探索

类文档（本文主骨架）：fast-element.bindingbehavior.md、构造函数、bind 属性、unbind 属性
顶层 API 索引：fast-element.md；配置端 directive 文档：fast-element.htmlbindingdirective.md、fast-element.htmlbindingdirective.createbehavior.md
运行时实现：html-binding-directive.ts（sink 分派、bind/unbind、handleEvent/handleChange）、html-directive.ts（ViewBehavior契约与assignAspect前缀规则）、binding.ts（Binding抽象类与BindingDirective）
架构与流程总览：DESIGN.md（"Views & Behaviors"一节的行为对照表）、template-bindings.md（五阶段管线、sink 表、SSR hydration 时序图）
可运行示例：examples/csr/todo-app（src/todo-app.template.ts、src/todo-form.template.ts）与 examples/ssr/webui-todo-app 中均包含完整的模板绑定用法。

结语

BindingBehavior虽然只是 API 文档中一个两行描述的类，却是 FAST Element 数据绑定能力从"声明"走向"生效"的关键枢纽：它接收BindingDirective的配置，把target、binding、updateTarget、targetName组装成一次完整的 DOM 写入，并通过bind/unbind与可观察系统协作，保证视图与数据在组件整个生命周期内保持一致。理解它的构造函数契约与运行机制，也就理解了 FAST 模板中每一种绑定语法（${}、:prop、?attr、@event、:classList）最终如何抵达真实 DOM。