作为一其中背景表单&表格工程师，常常须要在一个页面中处置惩罚多个弹窗。我本身的项目中，一个庞杂的考核页面中的弹窗数目凌驾了30个，怎样治理大批的弹窗就成为了一个须要斟酌的题目。

大批的弹窗有什么题目

假定你有一个弹窗组件，类似于element-ui的Dialog，假如简朴粗犷的每一个弹窗都写一个dialog，那末会有以下题目：

• 模板太长，且大批冗余
• 定名难题，每一个弹窗须要一个变量去掌握显现，一般每一个弹窗内里也是一个表单，又须要一个变量保留表单数据，每一个弹窗也有本身的逻辑(method)，都要写在这个页面，要挖空心思去取名
• 异常的不文雅，几乎就是Repeat yourself反情势的树模。。。

把每一个弹窗抽成模块

一个很轻易想到的优化要领就是把一个弹窗作为一个组件抽离出去，每一个弹窗的逻辑零丁写在组件中。

如许经由过程组件拆分做很好的处理了模板太长的题目，也基本处理了定名难题的题目，不过照样须要许多的变量去掌握每一个组件的显现。

运用动态Component

第一个方法本质上并没有削减反复的代码和逻辑（弹窗显现/封闭），只是把代码放在了差别的文件当中。

明显，我并不须要写那末多的Dialog，Dialog本身并没有变，作为一个「包裹」组件，变的只是内容。

所以，只须要写一个dialog，合营Vue的动态组件Component，切换差别的组件就好了。

全局Dialog

运用Component，我们做到了一个页面只须要一个Dialog，但实在全部网页，也只须要一个全局的Dialog。

我们在根组件下挂一个Dialog组件，组件内容依旧运用动态component，组件的数据流转，component通报等运用Vuex举行。

运用函数建立组件

作为单个项目的处理方案，全局Dialog加动态Component实在已充足好了，运用一个函数挪用就能够显现弹窗。

this.$dialog({
  title: '我是弹窗',
  component: Test,
  props: { props }, // Test的props经由过程如许通报
})

然则想要作为通用处理方案，还不够：

• 引入不轻易，须要手动在跟组件下引入并写上封装好的弹窗组件
• 必需运用Vuex举行数据流转，而并非每一个Vue项目都运用Vuex的
• 没法监听事宜，只能传入回调
• props的通报体式格局不够文雅，不够声明式

在我心中，一个抱负的弹窗组件，须如果如许的：

• 引入轻易，Vue.use(Dialog)就好了

• 运用简约

    this.$dialog({
      title: '哎呀不错哦',
      component: () => <Test onDone={ this.fetchData } name={ this.name }/>
    })

Let’s go.

运用$mount

Vue作为一个视图层的框架，中心实在就是衬着函数，所以肯定有一个方法，能够把一个Vue组件衬着成一个DOM，这个要领就是$mount。

// 这个Dialog组件就是写好的弹窗组件
import Dialog from './Dialog'

// dialog是一个单例，不须要反复建立
let dialog
export default function createDialog(Vue, { store = {}, router = {} }, options) {
  if (dialog) {
    dialog.options = {
      ...options,
    }

    dialog.$children[0].visible = true
  } else {
    dialog = new Vue({
      name: 'Root-Dialog',
      router,
      store,
      data() {
        return {
          options: { ...options },
        }
      },
      render(h) {
        return h(Dialog, {
          props: this.options,
        })
      },
    })

    // 衬着出DOM并手动插进去到body
    dialog.$mount()
    document.body.appendChild(dialog.$el)
  }

  // 暴露close要领
  return {
    close: () => dialog.$children[0].close(),
  }
}

Dialog组件

基于element-ui的Dialog组件二次封装，在原有的props以外，增加一个component，运用动态Component衬着上去就好了。
思绪很简朴，然则有几个题目须要斟酌。

生命周期题目

假如不做任何处置惩罚，当弹窗消逝的时刻component并不会烧毁；当再次显现弹窗时，会传入一个新的组件，这个时刻，上一个组件才烧毁，这异常不合理。所以我们须要在弹窗消逝的时刻手动烧毁传入的component。

注入事宜

Vue的动态Component组件的is属性吸收的值有3种范例：

• string，在当前组件内注册过的组件的称号
• ComponentDefinition，就是一个组件的选项对象，new Vue时传的谁人对象
• ComponentConstructor，返回一个ComponentDefinition的函数，比方动态import函数

而我们愿望的挪用情势里，component是一个返回jsx的函数，而它会被babel插件babel-plugin-transform-vue-jsx转换为挪用createElement函数的效果，也就是说

() => <Test >

这个函数终究返回的是一个Virtual Node。
而Vue的选项内里,render终究返回的也是一个VNode。
也就是说，() => <Test >这个函数能够作为一个Vue组件的render选项，所以，我们须要组织一个完全的Vue选项对象，然后将这个对象作为动态component的is属性，如许就能够衬着出这个Test组件了。

在这个过程当中，我们能够在这个Vnode内里做一些风趣的事变，比方注入事宜。

为何要注入事宜

起首，这里有一个刚需：弹窗内的组件须要能够封闭弹窗，也就是它的父组件。
一般有两个方法能够做到：

• 经由过程props吸收一个函数，挪用它能够封闭弹窗
• 主动抛出一个事宜，dialog组件监听这个事宜，然后把本身关了

稍微比较一下就能够发明，抛出事宜的要领优于回调函数的方法（一般来讲，「事宜」都优于「回调」）：

• 代码少, $emit(‘complete’)就好了，运用回调须要增加一个props，挪用的时刻还须要推断它是不是存在
• 通用性更好，这个组件能够不仅仅只在弹窗内挪用，它能够在别的任何地方被挪用，运用事宜只须要简朴的抛出一个事宜，示意我完成了，挪用它的组件依据本身的逻辑来举行接下来的事情，如许组件本身做到了低耦合。

然则，抛出事宜的完成却要比传入回调难许多，须要对VNode比较熟习。

在Dialog组件内，我们触及不到组件的模板，所以简朴的在动态component模板上增加 @done 并不能完成事宜监听。由于事宜监听实际上是在render的过程当中举行的，而我们的render是经由过程jsx的体式格局在挪用$dialog函数时传入的，所以只能手动在天生的VNode上增加事宜监听：

在 vNode.componentOptions.listeners中，增加我们须要监听的事宜和事宜处置惩罚函数:

let listeners = vNode.componentOptions.listeners

if (!listeners) {
  listeners = {}
  vNode.componentOptions.listeners = listeners
}

// 增加done
const orginDoneHandler = listeners.done
listeners.done = function () {
  if (orginDoneHandler) orginDoneHandler()
  doneHandler()
}

// 增加cancel
const orginCancelHandler = listeners.cancel
listeners.cancel = function () {
  if (orginCancelHandler) orginCancelHandler()
  cancelHandler()
}

在Dialog中，监听了动态component的done和cancel事宜，在任一事宜触发后都邑封闭Dialog，组件$emit(‘done’)示意完成了本身的营业，$emit(‘cancel)示意取消了本身的营业

主动网络依靠

到这里，另有一个题目没有处理：这个组件还不是相应式的，比方说，你在一个index组件中经由过程$dialog显现一个弹窗

this.$dialog({
  title: '相应式',
  component: () => <Test text={ this.text }/>
})

当text更新时，弹窗中的内容并没有更新，也就说，组件没有从新衬着。

Vue的衬着流程与依靠网络

这里就要涉及到一些Vue的原理了，比方说衬着流程，依靠网络，一两句话也讲不清楚，我试着也许的说一下：

起首，页面上显现的数据变了，肯定是触发了从新衬着，this.text = ‘新的text’ 之所以会更新页面，能够理解为一个衬着函数在this.text的setter中实行了。

那末，this.text的getter怎样才晓得要实行哪些函数，就是经由过程所谓的依靠网络。简朴来讲，依靠网络是在衬着函数（衬着Vnode的函数）中举行的，在createElement中一旦经由过程this.text运用了这个变量，经由过程这个变量的getter就网络到了正在实行的衬着函数这一个依靠。

所以，粗犷的讲，须要把this.text的接见放在一个render函数（Vue选项对象的render）中举行。平经常使用的模板实在也是如许，由于它终究都被Vue-loader编译成了render。

_component() {
  // 这一步很主要，让component网络到了这个盘算属性的依靠，不然当component变化时不会从新衬着组件
  const fn = this.component
  let vNode

  // 返回vue选项对象
  const that = this
  return {
    name: 'dynamic-wrapper',

    render() {
      // fn的运转肯定要在render函数中，也是为了挂载依靠
      vNode = fn()
      ...
    }
}

所以，这就是为何肯定要运用一个返回jsx的函数作为，而不是直接美滋滋的运用jsx。由于，臣妾实在是做不到相应式呀~

this.$dialog({
  title: '臣妾做不到啊~',
  component: <Text text={ this.text }/>,
})

即是

// this.text的值为text
this.$dialog({
  title: '臣妾做不到啊~',
  component: createElement(
    Text,
    props: {
      text: 'text',
    }
  )
})

完全代码，拍着胸脯保证可用，已在临盆环境大批运用凌驾3个月的时候了。