【前端篇】微信小程序ActionSheet封装 -- 封装特性，开发只须要关注功能 ...

各人好啊，这次来分享一下小程序开发的一个使用封装。
配景

先来看下什么是ActionSheet，参考下图（来源：豆流便签）

参考原生代码实现：

1. wx.showActionSheet({
2.     itemList: ["action1", "action2"],
3.     success: (res) => {
4.         if (res.tapIndex === 0) {
5.                 // do action 1
6.         }else if (res.tapIndex === 1){
7.                 // do action 2
8.         }
9.     },
10.     fail: (res) => {
11.         console.log(res.errMsg)
12.     }
13. })

复制代码

action sheet的长处：

• 实现简单
  
• 符合微信操作风格
  

但是原生的这种写法是比力繁琐的，我们很容易在wx.showActionSheet方法里放入大量逻辑代码，层级变的很高。
另一个致命题目，则是如果action是动态的，好比须要根据权限决定是否展示删除功能等，原生api方法须要写大量if else，还须要额外判断动态itemList和执行逻辑之间的关系。
所以这次带来一个开箱即用的action sheet代码。
封装实现

先看下封装后的操作代码：

1. let actionMenu = new ActionSheetMenu()
2. if (admin) {
3.     actionMenu.addMenu("删除", () => {
4.         // do del logic
5.     })
6. }
7. actionMenu.addMenu("复制", () => {
8.     // do copy logic
9. })
10. actionMenu.show()

复制代码

可以看到上面的操作，我们不须要关心action sheet的判断逻辑，只须要关注功能关键词和具体实现方法的绑定关系（函数式编程）
好了，末了是封装的代码实现

1. // action sheet menu的封装，保存sheet name和对应的function
2. export class ActionSheetMenu {
3.     menuMap: Map<string, Function>;
4.     menuList: string[];
6.     constructor() {
7.         this.menuMap = new Map()
8.         this.menuList = []
9.     }
11.     addMenu(key: string, func: Function): void {
12.         this.menuMap.set(key, func)
13.         this.menuList.push(key)
14.     }
16.     show() {
17.         wx.showActionSheet({
18.             itemList: this.getMenuList(),
19.             success: (res) => {
20.                 if (res.tapIndex != -1) {
21.                     this.doFunction(res.tapIndex)
22.                 }
23.             },
24.             fail: (res) => {
25.                 console.log(res.errMsg)
26.             }
27.         })
28.     }
30.     getMenuList(): string[] {
31.         return this.menuList
32.     }
34.     doFunction(index: number) {
35.         if (index < 0 || index >= this.menuList.length) {
36.             throw "index out of range"
37.         }
38.         let menuName = this.menuList[index]
39.         let func = this.menuMap.get(menuName)
40.         if (func) {
41.             func()
42.         }
43.     }
44. }

复制代码

有效的话，点个赞吧~

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。