MutationObserver拓展第三方成型库的界面

公司采购了一个成型的js工具库,用socketio和node进行通信,所有依赖通过index.html入口进行引入.
该库具有拖拉拽等常见绘制功能,同时提供了很多钩子用来拓展.但是界面和组件只能用它提供的,无法让自有的按钮弹出我们自定义的界面.
组里的前端大佬提供了一种很牛逼的写法,用MutationObserver,例如下面有三个按钮(截取自Bing搜索)

第三方库提供了麦克风按钮的钩子

// 当麦克风按钮被点击时调用,并带有参数
onMicroPhoneButtonClicked:function(arg0,arg1){
	/**
	* 我们自己控制的div唯一标识为my-app
	*/	
	document.querySelector('#my-app').style.display = 'block'
	// 将组件要用的参数通过storage/cookie/window进行暴露,然后在自定义界面中获取
	window.uname = arg0.name
	
}

然后在我们的vue项目中注册Observer,根据style变化修改自定义界面<Custompage>的可见性

<template>
	<Custompage v-if="visible" :username="username"/>
</template>
// App.vue
<script>
export default {
	data(){
		return {
			visible : false,
			username: ''
		}
	},
	mounted(){
		let t = this
		let app = document.getElementById('my-app')
		let observer = new MutationObserver((mutationsList) => {
    		for (let mutation of mutationsList) {
    		  if (mutation.attributeName == 'style') {
    		  //检测到style变化时取反,修改可见性
    		    t.visible = !t.visible
    		  }
    		}
 		})
		observer.observe(app, {
    		attributes: true
  		});
  		// 获取刚刚存的值
  		t.username = window.uname
	}
}
</script>

然后根据库的特征将自定义项目打包,通过rollup封装入口函数或者其他支持的引入方式,确保最终运行的index.html能够加载到即可

<!--第三方库的入口文件index.html-->

<script src="/path/to/打包的路径.js" type="module" crossorigin></script>

当麦克风按钮被点击的时候,第三方库给我们的解决方案是:
new他们提供的视图对象,例如dialog,prompt等,再继续在dialog或者prompt中层层封装他们的表格,表单,轮播图,以达到需求,但是样式和事件处理十分繁琐,学习成本很高,类似:

onMicroPhoneButtonClicked: function(){
	let dialog = new xx.Dialog()
	let table = new xx.Table(数据)
	dialog.setContent(table)
	dialog.show()
}

但是如果按照MutationObserver这样写的话,当按钮被点击时,跳出来的就是我们自定义的vue组件,这样后续就十分简便.