09｜属性编辑器：如何解除Web组件属性与编辑器的耦合？
陈旭
你好，我是陈旭。
今天这一讲，我会带你推开编译器协议层的大门，并在协议层中实现一个功能，这个功能将会解除低代码编辑器和组件之间的耦合。我这里放了一张架构图，当然今天我们会对这个图进行详细讲解，现在你只需要有个大概印象就可以了：
在开始之前，我想请你思考一下这个问题：低代码编译器（指代码生成器）是怎么知道自己应该如何使用一个组件的呢？
这个问题乍一想挺简单的，但是思考越深，你会发现它越难。因为我们人类是通过学习组件 API 的方式来使用组件的，但编译器没有智能，它能像人一样去学习组件的 API 吗？不仅如此，我们还希望编译器除了“学会”内置组件集的用法，还能“学会”外来的其他组件，这可能吗？
教会编译器使用组件
图文是人与人之间传递知识最好的方式，就像这个专栏一样，我把我的知识以图文形式记录下来，你通过图文来学习。但图文对代码（编译器实质就是一串代码）是极不友好的，对代码友好的“教材”至少需要包含这些特征：
是结构化的：与人类相反，代码擅长处理结构化数据；
是指令式的：即这个“教材”必须是指出“怎么做”，而不是“做成啥”这种描述性的。
那如何给编译器提供一份符合这些特征的“教材”呢？
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入探讨了解除Web组件属性与编辑器的耦合的关键问题，并提出了解决方案。通过实现在协议层中的功能以解除编辑器和组件之间的耦合，以及使编译器能够“学会”内置组件集的用法和外来组件的方法，文章展示了如何调整层次架构，使新组件能够被编译器正确使用。此外，还介绍了编译器SDK的重要性，以及如何提取编译器SDK，使业务团队也能参与组件的开发。通过演示代码实例的演进，文章详细说明了如何解除低代码编辑器、代码生成器和组件之间的耦合关系。最终，文章还讨论了哪些功能适合内置到低代码平台作为通用组件来实现，哪些功能适合以插件形式集成到低代码平台中去，并提供了思考题引发读者思考。整体而言，本文对于想要了解如何解除Web组件属性与编辑器的耦合的读者来说具有重要价值。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《说透低代码》，新⼈⾸单¥59
《说透低代码》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(10)
- 最新
- 精选
- 黄健楸请问您假设读者有怎样的能力呢？一方面，读这篇文章起码要熟悉编程，而且最好是node.js；另一方面，又用了“教材”这样模糊的类比。个人觉得两头不讨好。
作者回复: 抱歉让你误解了，这讲里的教材，实际上是一个比喻，指的是给代码生成器用的代码，而不是给读者的真实教材
2022-04-0321 
sheeeeep这一章有点没看懂。请教一下老师，这一章的属性编辑器，是为了实现编辑器能生成组件代码的功能对吗。按这种设计，将一个组件变成一个编辑器可用的物料，是不是对组件内部代码侵入太大？举个例子，业务上通常是先有组件集，后有物料集。大部分情况下，大家都是希望组件集和物料集是独立的，通过npm包的方式让物料集导入组件。 但是这一章介绍的方法，看上去是要直接修改组件代码的，不知道是不是我理解有误，请老师解惑作者回复: 你的留言大部分的理解是正确的，你已经get到我想说啥了。有一点你说的不对，请注意，这讲中的“教材”和组件的实现，是相互独立的，即使物理上你将这两部分放在同一个npm包里，它们依然是相互独立的，必然是先有组合的实现，再有的“教材”，这点你的理解是对的。也就是说，“教材”是独立于组件的实现的，因此，在写“教材”对应代码的时候，不会对组件的功能实现有任何改动。你可以再看看这讲最后的那个依赖关系图，红框也好，绿框也好，里头都有两个部分，其一是组件的功能实现，另一是“教材”
2022-04-022
团子团受益匪浅，感觉思路打开了，老师讲的是核心思想，关键是理解这个思想。这个对成天写业务代码的我来说帮助很大。2022-07-28归属地：陕西11
洛河受益匪浅。。。感谢 1. 为编辑器使用组件提供了协议标准，并对生成器与编辑器进行了解耦 2. 为后续业务组件的接入提供了协议通道，充分体现了协议标准的优越性 后期可以动态加载业务组件。间接解决了平台核心层和业务方的耦合2022-05-171
ifelse
学习打卡2023-02-21归属地：浙江
flow老师讲的属性配置器主要是生成代码层面的. 想问下业务组件如何自定义属性配置器以及如何在视图上呈现/使用属性配置器呢?2022-06-06
Kobe的篮球Type<SVD>这种写法直接报错了，是不是应该是SVD2022-06-01- Kobe的篮球老师，请问SVD的全称是啥啊2022-06-01
- Kobe的篮球老师能写个简单的例子吗？看的差不多能明白，但是写得时候还是有些地方写不对2022-06-01
- 李鑫海这篇我读一遍就理解很透彻了，在于思想的传递，解耦组件和编译器，靠协议规范，基于协议实现扩展机制。2022-04-14
收起评论