js使用装饰器实现操作前二次确认询问

作者: 醉月思发布日期: 2020-09-20 分类: 教程分享

引言

相信大家平常在开发过程中，经常会遇到此类需求。危险操作（如删除，退出登录）往往需要弹框提示给用户二次确认一下。本文介绍的是，如何使用js方法装饰器，封装二次确认弹框操作，增加小伙伴的开发效率。

同一个页面里三四个「删除」按钮，每个都复制一段 uni.showModal，改文案要改四处。抽成装饰器后，方法体只留业务逻辑，确认框由注解参数决定。

装饰器介绍

2020-08-03T08:01:10.png

装饰器是对类、函数、属性之类的一种装饰，可以针对其添加一些额外的行为。详细使用，自行百度！

注意：装饰器仍是 Stage 2 提案，uni-app / Vue 2 项目要在 babel 或 tsconfig 里开 experimentalDecorators，否则 @confirm 直接语法错误。TS 写法如下；纯 JS 需去掉类型标注。

常规手段

view

<div class="bg-white flex justify-center">
	<div class="btn-primary" @click="clickMe">点我</div>
</div>

clickMe() {
    uni.showModal({
      title: "点击提示",
      content: "你确定要点我？",
      success: (res) => {
        if (res.confirm) {
          console.log("点我干啥");
        }
      },
    });
 }

效果展示

装饰器点击效果

能跑，但重复代码一眼可见。

装饰器写法

把弹框逻辑收到 confirm.js，方法上用 @confirm(内容, 标题) 标注即可。cancelFn 可接取消后的回调，默认空函数。

confirm.js

function confirm(message: string, title: string, cancelFn = function() {}) {
  return function(target: any, name: string, descriptor: any) {
    const originFn = descriptor.value;

    descriptor.value = function(rest: any) {
      uni.showModal({
        title: title,
        content: message,
        success: (res) => {
          if (res.confirm) {
            originFn.apply(this, rest);
          }
        },
      });
    };
  };
}

main.js

@confirm("你确定要点我？","点击提示")
  clickMe() {
    // uni.showModal({
    //   title: "点击提示",
    //   content: "你确定要点我？",
    //   success: (res) => {
    //     if (res.confirm) {
    //       console.log("点我干啥");
    //     }
    //   },
    // });
    console.log("点我干啥");
  }

效果展示

装饰器点击效果

和手写 modal 效果一样，方法里只剩 console.log。装饰器里用 originFn.apply(this, rest) 保留原函数的 this 和参数；若原方法是 async，要在包装里 await originFn.apply(...) 才能串异步链。

版权声明: 本文首发于指尖魔法屋-js使用装饰器实现操作前二次确认询问（https://blog.thinkmoon.cn/post/900-decorator-guide-js-javascript/）转载或引用必须申明原指尖魔法屋来源及源地址！

js使用装饰器实现操作前二次确认询问

引言

装饰器介绍

常规手段

装饰器写法

相关阅读