前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载导读ExecutionContext.isOdd是 microsoft/fast-element 中 repeat 指令运行时上下文的属性之一用于判断当前渲染项在 repeat 集合中的索引是否为奇数从而让模板在遍历列表时能按奇偶位置差异化渲染例如斑马纹、交替布局。本文以官方 API 文档为基础结合packages/fast-element/src/templating/view.ts与packages/fast-element/src/templating/repeat.ts的源码实现、以及view.pw.spec.ts的 Playwright 测试用例系统讲解该属性的语义、计算规则、启用前提与实战写法。属性签名与官方语义在官方 API 文档 fast-element.executioncontext.isodd.md 中该属性的签名定义如下get isOdd(): boolean;其官方描述为Indicates whether the current item within a repeat context has an odd index.即指示 repeat 上下文中的当前项是否拥有奇数索引。该属性属于ExecutionContext类详见 fast-element.executioncontext.md是一个只读的布尔型 getter只能在 repeat 渲染上下文中被访问直接作用于当前列表项的模板求值。同类上下文属性一览ExecutionContext还提供了一组与 repeat 集合位置相关的兄弟属性便于在模板中组合判断属性类型说明indexnumber当前项在 repeat 集合中的索引lengthnumberrepeat 集合的总长度isEvenboolean当前项索引是否为偶数isOddboolean当前项索引是否为奇数isFirstboolean当前项是否为集合中第一项isLastboolean当前项是否为集合中最后一项isInMiddleboolean当前项是否位于集合中间既非首项也非末项parentTParentrepeat 上下文中的父数据对象parentContextExecutionContextTGrandparent嵌套上下文场景下的父执行上下文eventEvent事件处理器中的当前事件这些属性均为只读 getter其中isOdd与isEven、isFirst、isInMiddle、isLast共同构成了完整的位置描述集合。源码实现isOdd 的计算规则isOdd的底层实现在 view.ts 的DefaultExecutionContext类中源码如下export class DefaultExecutionContextTParent implements ExecutionContextTParent { public index: number 0; public length: number 0; public get isEven(): boolean { return this.index % 2 0; } public get isOdd(): boolean { return this.index % 2 ! 0; } public get isFirst(): boolean { return this.index 0; } public get isInMiddle(): boolean { return !this.isFirst !this.isLast; } public get isLast(): boolean { return this.index this.length - 1; } }从源码结构可以得出几个关键事实计算逻辑为取模运算isOdd使用this.index % 2 ! 0判断。由于 repeat 索引从0开始因此索引0、2、4…对应isEven true、isOdd false索引1、3、5…对应isOdd true。注意这里判断的是“索引为奇数”而非“项在列表中的第奇数个”二者恰好相反第 1 项索引为 0属于偶数索引。依赖index属性isOdd的值完全由index决定而index默认初始化为0。只有在 repeat 指令设置了定位positioning功能并执行绑定时index才会被赋予真实遍历位置。只读派生属性isOdd是纯函数式的派生 getter内部不维护任何额外状态也不触发依赖追踪之外的操作因此求值成本极低可放心在模板中大量使用。启用前提repeat 的 positioning 选项isOdd依赖的index、length并非默认填充。在 repeat.ts 中repeat 指令的选项定义如下export interface RepeatOptions { /** * Enables index, length, and dependent positioning updates in item templates. */ positioning?: boolean; } const defaultRepeatOptions: RepeatOptions Object.freeze({ positioning: false, recycle: true, });默认情况下positioning: false。绑定视图时的两条路径揭示了差异repeat.ts未启用 positioningbindWithoutPositioning只设置parent与parentContext不更新index和length此时isOdd恒为index初始值0的判断结果false。启用 positioningbindWithPositioning会先执行view.context.length items.length与view.context.index index再绑定当前项数据此时isOdd才会返回真实结果。此外在 repeat.ts 的刷新流程中当positioning开启时每次集合变化后都会统一回写每个视图的length与indexif (this.directive.options.positioning) { for (let i 0, viewsLength views.length; i viewsLength; i) { const context views[i].context; context.length viewsLength; context.index i; } }因此必须在创建 repeat 指令时显式开启positioningisOdd才有实际意义。实战用法在模板中使用 isOddisOdd的典型场景是配合 repeat 模板实现交替样式。以下写法基于 examples/csr/todo-app 中展示的 repeat 模板风格import { repeat, html } from microsoft/fast-element; // 开启 positioning 以填充 index / length const positionAwareRepeat repeat({ positioning: true, template: html div class${(x, c) c.context.isOdd ? row-odd : row-even} ${(x, c) x.name} /div , }); // 模板中也可以直接使用上下文表达式 htmlPerson ul ${repeat( (x) x.people, htmlPerson, PersonContext li class${(x, c) (c.context.isOdd ? alt : normal)} ${(x) x.name} /li , { positioning: true } // 关键启用定位 )} /ul ;要点说明模板表达式中的第二个参数c即ExecutionContext通过c.context在部分版本为c.context或直接c的上下文属性访问isOdd由于isOdd是响应式可观察属性index在 view.ts 中通过Observable.defineProperty定义为可观察属性集合顺序或内容变化时依赖它的样式绑定会自动更新在嵌套 repeat 场景中若要访问外层上下文可通过parentContext向上回溯详见 fast-element.executioncontext.parentcontext.md。测试验证测试用例对 isOdd 的覆盖isOdd的正确性在 view.pw.spec.ts 的 “item context” 测试场景中有系统覆盖测试通过构造index与length组合来断言各位置属性场景indexlengthisEvenisOddisFirstisLasteven is first042truefalsetruefalseodd in middle742falsetruefalsefalseeven in middle842truefalsefalsefalseodd at end4142falsetruefalsetrueeven at end—42truefalsefalsetrue测试对每个场景断言isEven、isOdd、isFirst、isMiddle、isLast与期望值完全一致view.pw.spec.ts。边界情况值得注意index 0第一项时isOdd为falseindex 41末项偶数索引时isOdd同样为false这与“第 1 个元素”的直觉相反印证了isOdd严格基于零基索引取模的语义。相关参考API 文档ExecutionContext 类、index 属性、isEven 属性源码view.tsDefaultExecutionContext定义、repeat.tspositioning与上下文填充测试view.pw.spec.tsitem context 场景快速开始与模板绑定总览fast-element README、template-bindings.md赞分享前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载相关推荐FAST Element 中的 ExecutionContext.isEvenrepeat 列表项偶索引判断的源码级解析FAST Element 中的 ExecutionContext.isEvenrepeat 列表项偶索引判断的源码级解析 导读 本文聚焦 microsoft前端UI组件Fast-Element 的 ExecutionContext 执行上下文repeat 循环、事件处理与嵌套绑定中的上下文数据microsoft/fast-element 1.x API 详解Fast Element 的 ExecutionContext 执行上下文repeat 循环、事件处理与嵌套绑定中的上下文数据microsoft/fast前端UI组件Fast Element 的 ExecutionContext.lengthrepeat 渲染上下文中集合长度属性全解析Fast Element 的 ExecutionContext.lengthrepeat 渲染上下文中集合长度属性全解析 本篇指南围绕 microsoft/前端UI组件上一篇Turbo框架性能监控如何使用PageObserver分析页面性能下一篇StarRocks BE 模块边界解析ConnectorMySQL 的依赖约束、源码结构与扫描实现创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考