类jsx实现（二）

jsx实现（二）

上篇讲到用数组的形式表达了dom结构,现在先解决掉遗留的几个问题。

树状多子元素实现

• 多子元素问题

这个主要是正则没写好，我们要全局搜索标签，搜索完成后再分解元素

let mulEleRule = /(.*?)(<\w+.*?>)(.*?)(<\/\w+>)(.*?)/g   //获取多个子元素规则元素
let singleRule = /(.*?)(<\w+.*?>)(.*)(<\/\w+>)(.*?)$/;   //一个元素分解
let singlePanchRule  = match(/\w*$/)  //加上漏掉的后面参数
复制代码

• 因为无法匹配最后一个content, 所有加了个singlePanch，接下来就是数据回调返回个object对象

  switchJsx(ele) { //转化js模式
    let that = this
    let ruleArr = []
    var treeObj = { //返回的对象
    }
    let getPartEle = ele.match(mulEleRule).length > 1 ? ele.match(mulEleRule) : [ele]//大于一说明有多个子元素
    // console.log(getPartEle)
    let nodeNameI = 0;//下标名
    if (Array.isArray(getPartEle)) {
      // console.log(getPartEle)
      getPartEle.forEach(element => {
        let singleArr = element.match(singleRule) //
        // console.log(singleArr)
        let omission = element.match(singlePanchRule)[0] || ''
        singleArr.slice(1).forEach(e => {  //去掉第一项
          // if (e.match(mulEleRule)) { // 判断是否是元素
          //   treeObj['childrenNode' + nodeNameI] = that.switchJsx(e)
          // } else {
          switch (nodeNameI) {
            case 1://代表要class和id 
              treeObj['tag'] = e.match(tagR) && e.match(tagR)[1]
              treeObj['classId'] = {
                class: e.match(classR) && e.match(classR)[1] || '',
                id: e.match(idR) && e.match(idR)[1] || '',
              };
              break;

            default:
              if (e.match(mulEleRule)) {// 判断是否是元素是的话
                treeObj['childrenNode' + nodeNameI] = that.switchJsx(e)
              } else if (nodeNameI == e.length - 1) {

              } else {
                treeObj['content' + nodeNameI] = e || ''
              };

              break;
            // }
            //不是元素
            // treeObj['node' + nodeNameI] = e || ''
            // console.log(treeObj)
          }
          nodeNameI++;
        })
        treeObj['content' + nodeNameI] = omission //添加上最后一个元素
      })
    }
    // console.log(treeObj)
    return treeObj

  }
复制代码

observer 监听数据

• 数据动态监听 {{name}}

正则将包含{{name}}的content判断出来

    if(e.match(/({{)(\w*)(}})/)){ //被{{}}包裹  因为包裹的值名是不能相同的
        treeObj['trends'+ e.match(/({{)(\w*)(}})/)[2]] = e
      }
复制代码

observer 监听数据，在这里，我根据网上的方式实现了一下

let jsxObj = { //测试对象
  content0: '',
  tag: 'div',
  classId: { class: 'swrap', id: '' },
  childrenNode2:
  {
    content0: '我是',
    tag: 'span',
    classId: { class: '', id: '' },
    childrenNode2:
    {
      content0: '你的',
      tag: 'a',
      classId: [Object],
      trendsname: '大哥{{name}}',
      content4: '',
      content5: ''
    },
    content3: '</span>',
    content4: '啊',
    content5: ''
  },
  content3: '</div>',
  content4: '',
  content5: ''
}


let jsxObj2 = {
  content0: '你的',
  tag: 'a',
  classId: [Object],
  trendsname: '大哥{{name}}',
  content4: '',
  content5: ''
}

function deepObserve(datas) {
  if (Array.isArray(datas)) { }
  if (datas instanceof Object) {
    for (const key in datas) {
      if (datas.hasOwnProperty(key)) {
        const element = datas[key];
        if (key.indexOf('trends') != -1) {
          console.log(key)
          observe(datas, key.slice(6))
        }
        if (key.indexOf('childrenNode') != -1) {
          deepObserve(element)
        }
      }
    }
  }
}
function observe(data, name) { //
  console.log(data, name)
  // setTimeout(() => {
  //   data.name
  //   data.name = '梨花'
  //   console.log(data.name)
  // }, 1000)
  Object.defineProperty(data, name, {
    get: function () {
      console.log('你获取了')
      return this['trends' + name]
    },
    set: function (newVal) {
      console.log('你修改了')
      this['trends' + name] = newVal
    }
  })
}
deepObserve(jsxObj)
jsxObj.childrenNode2.childrenNode2.name = '李白'
复制代码