应实现自定义迭代器而非拦截Generator——通过[Symbol.iterator]返回可控迭代器实例,在next()中注入权限过滤、条件渲染、分组排序等企业级策略,支持状态管理、上下文传入与调试。

直接拦截 Generator 的遍历器接口本身不可行——Generator 函数返回的是一个**已封装好的生成器对象**,其 next() 方法由 JavaScript 引擎内部实现,不可重写或代理。但企业级低代码组件(如 form-generator)真正需要的,不是“拦截 Generator”,而是**在可迭代协议层面接管遍历逻辑**,从而控制表单字段的生成顺序、条件过滤、动态注入或权限裁剪等行为。
让组件成为真正的可迭代对象
低代码表单本质是一组配置驱动的字段(JSON schema 或 Vue 组件描述)。要使其支持 for...of、Array.from()、展开运算符等,必须实现 [Symbol.iterator] 方法:
- 该方法必须返回一个**符合迭代器协议的对象**:拥有
next()方法,每次调用返回{ value, done } - 不依赖 Generator 函数也可实现——手动管理状态(如当前索引、过滤条件、上下文环境)更利于企业级控制
- 例如:
FormSchema类可封装字段数组,并在[Symbol.iterator]()中返回带业务逻辑的迭代器实例
在迭代器中注入企业级策略
自定义迭代器的 next() 方法是策略执行的核心入口。它可动态决定“下一个该返回谁”:
-
权限过滤:检查当前用户角色,跳过
visible: false或auth: ["admin"]不匹配的字段 -
条件渲染:读取表单当前数据(
formData),仅当formData.type === "advanced"时才 yield 高级配置项 -
分组/排序:按
group字段归类,或依据order属性重排遍历顺序 -
懒加载扩展:遇到
type: "dynamic-section"时,异步拉取子字段并合并到后续迭代流中
与低代码平台深度集成的关键点
以 form-generator 为例,需在三个层面打通迭代能力:
-
配置层:在
config.js字段定义中增加iteratorHook字段,接收一个函数,用于在next()执行前介入处理 -
运行时层:右侧面板的属性绑定(
rightpanel.vue)应基于可迭代对象构建,而非硬编码v-for数组——这样能自动响应迭代策略变化 -
导出层:JSON Schema 导出逻辑应调用
FormSchema[Symbol.iterator]()获取最终字段序列,确保导出结果已应用全部业务规则
不推荐用 Generator 替代的原因
虽然 function* 写法简洁,但在企业场景中存在明显短板:
- 无法中途修改状态(如切换权限上下文后重新遍历)——Generator 一旦开始,内部闭包状态不可外部干预
- 难以复用和重置:每次
formSchema[Symbol.iterator]()调用需返回新迭代器实例,而 Generator 函数每次调用虽也新建,但缺乏对上下文参数(如currentUser)的灵活传入机制 - 调试困难:堆栈不可见,错误定位依赖
yield点,不如显式类迭代器清晰可控

















