前言
我们为什么会去做组件开发，组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程，有多种属性、状态反映其内部特性。在这个领域中人员水平参差不齐，技术也不成熟，而且在使用传统代码开发时，往往一个bug就会出现全局需修改的局面。而组件化，将一个功能化的模块作为一个单独的个体去看待，我们可以在任何的地方去单独调用，它的功能和样式是可以复用的。我们可以使用一块块的组件去构建出想要的应用，而且它们拥有自己单独可控的区域，不必像传统代码那样将所有东西挤在一起，极大提高了开发人员的开发效率。同时避免了重复造轮子的尴尬，用集成的代码也提高了代码质量，降低了维护成本。
今天的主题是WeUI ActionSheet组件的设计和实现，ActionSheet组件是WeUI的一个弹出式菜单，它用于(不局限于)微信小程序中点击触发按钮后会弹出一个选择菜单的事件。接下来，请跟随我一起来看看ActionSheet组件的开发过程中是怎样把它的样式和功能实现的。
Iofod——低代码开发平台
不再需要具有编码经验即可继续开发网站和Web应用程序。这是因为有一些创新和用户友好的网站和Web应用程序开发工具。Iofod就是这样一个平台的完美例子。Iofod提供了可视化界面和低代码体验，任何人都可以使用它来构建网站和应用程序。
设计思路
在设计之前，我查看了旧代码是使用了超过四十多行的客户端代码去实现它，在iofod不必这样使用繁琐的代码，它拥有可视化编辑区，我们即刻就能将心中所设想的样式展现出来，即所思即所得。
- 使用一个大容器将其包裹
- 留出空间简单设置菜单标题
- 设置好菜单body，并使用copy模型
- 插入退出按钮
在此我们有两个交互触发目标，第一，触发按钮；第二，主体本身。Iofod的特点在于能够通过数据驱动搭配动效去控制每个组件的交互行为。
Iofod的实现方案大致如图：
原理分析
触发按钮原理
触发按钮在点击后，会修改主体render模型的值为true，使得它在配合iofod中选择合适的进场动效和作用时间后，就能让ActionSheet弹出，cancel按钮同理。
菜单选项的选择原理
菜单选项是通过copy模型去控制每个组件的样式一致的，如果想要区别，需要使用到子状态的功能，有二点情况：1.如果是单个区分的话，只需添加$defaulu:N(N表示你要控制的组件索引值)：2.如果是要通过某个事件去判断触发的对象，需要用到数据驱动的功能。
现在细说第二种情况，首先设置active模型去控制激活的个体，通过点击（touchstrat）去获取index的值，赋值到active模型中。前面说到通过子状态的功能去控制样式，添加i == $active，只需设置好样式，其他通过交给iofod来实现。
预览
\
结语
到这里我们已经成功实现了ActionSheet组件，主要通过了数据驱动的功能去控制交互事件中各组件的变化。我们只要明白通过设置模型变量，每个部分组件通过$active(模型名)，就能实现各部分组件相互联系了，每个组件的实现其实是大同小异的。本文介绍了ActionSheet的实现，最后小提一下本期操作平台iofod，是一个十分方便高效的web端、pc端、移动端的低代码搭建平台，如果需要会在往后推出iofod的文档说明。
相关链接：
