JavaScript|Ant design mobile Actionsheet 组件的思考和改进 ant|design|Actionsheet|享元模式|蚂

【JavaScript|Ant design mobile Actionsheet 组件的思考和改进】使用蚂蚁金服的 ant-design UI 组件库的移动端组件时，最近遇到一个问题。
官方的模板是这样的

showActionSheet = () => { const BUTTONS = ['Operation1', 'Operation2', 'Operation2', 'Delete', 'Cancel']; ActionSheet.showActionSheetWithOptions({ options: BUTTONS, cancelButtonIndex: BUTTONS.length - 1, destructiveButtonIndex: BUTTONS.length - 2, message: 'I am description, description, description', maskClosable: true, }, (buttonIndex) => { this.setState({ clicked: BUTTONS[buttonIndex] }); }); }

如果一个菜单是动态的（不同情况，会创建不同的菜单，菜单的个数和内容不同），那么回调函数中，返回的 buttonIndex 所执行的函数就很难处理。下面想了两个结局按方案
思路一：使用享元模式，优化多重的IF循环
这样需要引入新的变量
实际的代码如下

showActionSheet = () => { let buttons = [{ dom : {t('Rename')}, value: 'rename', }]; // In different situations, push special object(contain dom and value) into buttonArray if (!isNameColumn) { buttons.push({ dom: {t('test')}, value: 'test', }); } // This is real buttons array (ActionSheet use it) let optionButtons = []; for (let i = 0; i < buttons.length; i++) { optionButtons.push(buttons[i].dom); } ActionSheet.showActionSheetWithOptions({ options: optionButtons, maskClosable: true }, (buttonIndex) => { this.setState({ isMenuShow: false }); const value = https://www.it610.com/article/optionButtons[buttonIndex]; this.onActionSheetClick(value); }); }onActionSheetClick = (value) => { switch(value) { case 'rename': this.onRename(); break; case 'test': this.onHideColumn(); break; } }

这样的优点是：每一个情况对应一个字符串，把index转换成字符串，然后根据字符串进行回调函数处理。
不足：需要新增加一个数组，存储字符串变量。
思路二：直接对每一个菜单元素，监听onClick事件
这样的缺点是，每一个都需要设置回调函数，和原生的 ActionSheet 的回调函数无关，特殊情况下，无法控制点击事件（按钮不能点击）

if (sortColumnOptions.includes(columnType)) { buttons.push( this.modifySort(SORT_TYPE.UP, e)}>{t('Sort_Ascending')}, this.modifySort(SORT_TYPE.DOWN, e)}>{t('Sort_Descending')} ); }

综合这两种方法，我个人更认同第一种做法
当然，还可以基于第三方 ant design mobile 组件，自己再写一个适合自己项目的组件。