In the micro channel small program, it is necessary to Confirm through the custom pop-up Confirm. How to effectively simplify the code implementation logic and enhance the readability of the code?

demand

Confirm with a custom pop-up Confirm and proceed to the next step

<! -- van-dialog dialog pop-up https://vant-contrib.gitee.io/vant-weapp/#/dialog -->
<! -- uI-addr custom address component -->
<van-dialog
  use-slot
  title="Confirm mailing Address"
  show="{{ visibleConfirmPostal }}"
  show-cancel-button
  bind:close="onConfirmPostalClose"
>
  <ui-addr type="preview" src="{{ addrSrc }}" arrow-icon="{{ false }}"></ui-addr>
</van-dialog>
Copy the code

General solution

// => page.js
const { makeDialogConfirm } = require('util.js');

Page({
  data: {
    // Whether to display the mailing address confirmation popup
    visibleConfirmPostal: false
  },
  onSubmit() {
    this.setData({
      visibleConfirmPostal: true})},// Custom confirm popover event callback
  onConfirmPostalClose({ detail }) {
    if (detail === 'confirm') {
      this.setData({
        visibleConfirmPostal: false
      })
      this.doNext()
    } else {
      reject(new Error('cancel cancel'))
      this.setData({
        visibleConfirmPostal: false})}},doNext() {
    // do next}})Copy the code

My optimization plan

The idea is to re-register the acknowledgement popup event callback to get the resolve and reject arguments of the Promise before arousing it

The idea is relatively novel and unique, which plays an important role in solving the problem

// => page.js
const { makeDialogConfirm } = require('util.js');

Page({
  data: {
    // Whether to display the mailing address confirmation popup
    visibleConfirmPostal: false
  },
  // Custom confirm popover event callback
  onConfirmPostalClose() {},
  // Confirm the popover method
  confrimPostal() {
    // The method can extend the confirmation popover by conditionally evoking the popover. For example, the confirmation is required only when the mailing address is required, but not otherwise
    return makeDialogConfirm({ vm: this.visibleName: 'visibleConfirmPostal'.callbackName: 'onConfirmPostalClose'})},onSubmit() {
    this.confrimPostal().then(() = > {
      this.doNext()
    })
  },
  doNext() {
    // do next}})Copy the code
// => util.js
/** * Confirm method for generating a custom popover, suitable for customizing a popover via van-dialog *@param {object} param
 * @param {context} Param. vm this is usually only for the current page or component *@param {string} Param. visibleName Data name that defines whether to display popover *@param {string} Param. callbackName Method name, the name of the callback method to be redefined *@returns {Promise}* /
const makeDialogConfirm = param= > {
  const { vm, visibleName, callbackName } = param
  return new Promise((resolve, reject) = > {
    // Evoke the confirmation pop-up window to re-register the pop-up callback event
    vm[callbackName] = ({ detail }) = > {
      // You can get the resolve and reject arguments in the callback function
      if (detail === 'confirm') {
        resolve(true)
        vm.setData({
          [visibleName]: false})}else {
        reject(new Error('cancel cancel'))
        vm.setData({
          [visibleName]: false
        })
      }
    }

    vm.setData({
      [visibleName]: true})})}module.exports = { makeDialogConfirm }
Copy the code

advantage

  • Validation logic is more readable
  • Mailing address confirmation popover confirmation requirements are very minimally invasive to normal business
  • It’s more reusable
  • Better scalability

Welcome to my wechat official account: Coder