20200303 - TangXR

[vianvio]

问题列表：

1. 全局提示框如何实现单例？
2. (可选)如果不是单例形态，出现多次提示交互如何考虑？总不能一直无限弹出吧。
3. 自定义表单渲染实现原理描述，配图说明。有哪些可拓展的部分
4. 自定义表单面向开发人员还是业务人员？是否计划配套搭建工具？背后的业务思考是什么？
5. 拓展上一次问答第5题，先转变一个看法，将native视作一个能力提供方，或简单假设为高级浏览器。那么在此基础上，给一个实际场景思考方案：H5页面白屏并导致app crash，设计一套方案解决错误上报问题。(有时间可以同时了解native crash日志收集方法)

[github307896154]

1.在tip.js中定义一个变量tipInstance存储包含tip组件的子类，如果tipInstance不为undefined则直接export出tipInstance否则调用对应方法创建包含tip组件的子类。

import Vue from 'vue'
import Tip from './tipList.vue'//组件
let tip, initialization;
Tip.newInstance = () => {
    //使用基础 Vue 构造器，创建一个包含tip组件的“子类”
    tip = Vue.extend(Tip)
    const messageInstance = new tip();
    const div = document.createElement('div');
    document.body.appendChild(div);
    //挂载到新创建的div
    messageInstance.$mount(div)
    return {
      prompt(props) {
        messageInstance.show(props);
      }
    }
}
initialization=function(){
  if(!tip){
    tip=Tip.newInstance()
  }
  return tip
}
export default initialization
``` ```

[github307896154]

2.通过一个包装组件tipBox实现，每次调用提示组件，实际是向tipBox中的一个list变量中添加一条数据，并制定唯一id。tipBox根据这个变量list来渲染tip组件。这样多个tip组件会以列表的形式渲染. ... add(options) { let name = getUid;//tip的唯一标识 let _options = Object.assign( {//默认属性 name: name }, options ); this.tipList.push(_options)//实现多次调用显示 }

[vianvio]

Q1贴一下相对完整的代码，不然看不出一些细节。

[github307896154]

可扩展部分

1. 对于表单字段的校验规则 考虑进行合理自定义配置

[github307896154]

问题四

1. 自定义表单中比较容易理解的比如字段的布局(在一行中的占比)、字段是否必填、字段显示类型、字段的默认值面向业务人员。其他面向代码层面的，比如校验规则，下拉框列表数据由开发人员控制。 2.对于适合开发给业务人员配置的选项，有设计开发了对应的配置页面，提供给业务人员进行表单配置。 3.背后的业务思考主要是因为公司在公车方面的市场竞争力主要是相对于个性化设计方面，这导致对于不同用户的多种需求，你都需要尽量满足他们，所以你可能需要大量分离代码，导致后期维护成本加重，而自定义表单渲染就是为了解决这个问题。