第138题 设计一个H5编辑器的数据模型和核心功能

• 使用vue+vuex开发
  • 问题1：点击保存按钮，提交给服务端的数据格式怎么设计
  • 问题2：如何保证画布和属性面板的信息同步
  • 问题3：如果在拓展一个图层面板，vuex如何设计数据
• 总结
  • 组件有序结构，参考vnode格式
  • 通过id对应选中的组件，即可使用vuex同步数据
  • 图层使用vuex getter，而非独立的数据

    // 问题1 提交给服务端的数据格式怎么设计
    
    // 错误示例
    const page = {
      // Array 才有序
      components: {
        'text1': {
          type: 'text',
          value: '文本1',
          style: {
            color: 'red',
            fontSize: '16px',
          },
          attrs: {
    
          },
          on: {
              
          }
        },
        'text2': {
          type: 'text',
          value: '文本2',
          color: 'red',
          fontSize: '16px',
        },
        'img1': {
          type: 'image',
          src: 'xxx.png',
          width: '100px'
        }
      }
    }
    
    // 存在问题
    // 组件应该是有序的结构，属性应该参考vnode设计
    
    // 正确示例
    const store = {
      page: {
        title: '标题',
        setting: { /* 其他扩展信息：多语言，微信分享的配置，其他 */ },
        props: { /* 当前页面的属性设置，背景 */ },
        components: [
          // components 有序，数组
          // 参考vnode来设计
          {
            id: 'x1',
            name: '文本1',
            tag: 'text', // type
            style: { color: 'red', fontSize: '16px' },
            attrs: { /* 其他属性 */ },
            text: '文本1',
          },
          {
            // 文本2
          },
          {
            id: 'x3',
            name: '图片1',
            tag: 'image',
            style: { width: '100px' },
            attrs: { src: 'xxx.png' }
          }
        ]
      },
    
      // 问题二：如何保证画布和属性面板的信息同步 
      // vuex 同步
    
      // 用于记录当前选中的组件，记录 id 即可
      activeComponentId: 'x3'
    }

    // 问题三：如果在拓展一个图层面板，vuex如何设计数据
    
    // 错误示例
    {
      layers: [
        {
          id: 'text1',
          name: '文本1'
        },
        {
          id: 'text2', // component id
          name: '文本2' // layer name
        },
        {
          id: 'img1',
          name: '图片'
        },
      ]
    }
    
    // 存在问题
    // 图层，仅仅是一个索引，应该用computed这种格式
    
    // 正确示例
    // Vuex getters
    const getters = {
      // Vue computed
      // 图层里面的数据等于是把画布components重新计算了一遍
      // layers是画布的一个影子
      layers() {
        store.page.components.map(c => {
          return {
            id: c.id,
            name: c.name
          }
        })
      }
    }