JSX Implementation (ii)

The dom structure is expressed in the form of an array in the previous article. Now we will solve the remaining problems.

Tree polychild implementation

  • Multiple subelements

This is mainly because the re is not written properly. We need to search the tag globally, and then decompose the elements after the search is complete

let mulEleRule = / (. *?) (<\w+.*? > (. *?) (<\/\w+>)(.*?) /g   // Get multiple child rule elements
let singleRule = / (. *?) (<\w+.*? >)(.*)(<\/\w+>)(.*?) $/;   // An element is decomposed
let singlePanchRule  = match(/\w*$/)  // Add any missing arguments
Copy the code

  • Since the last content could not be matched, a singlePanch was added, followed by a data callback that returned an Object

  switchJsx(ele) { // Convert the js schema
    let that = this
    let ruleArr = []
    var treeObj = { // The object returned
    }
    let getPartEle = ele.match(mulEleRule).length > 1 ? ele.match(mulEleRule) : [ele]// Greater than one indicates multiple child elements
    // console.log(getPartEle)
    let nodeNameI = 0;/ / the subscript
    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= > {  // remove the first term
          // if (e.match(mulEleRule)) {// determine if it is an element
          // treeObj['childrenNode' + nodeNameI] = that.switchJsx(e)
          // } else {
          switch (nodeNameI) {
            case 1:// indicates class and 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)) {// Check if the element is
                treeObj['childrenNode' + nodeNameI] = that.switchJsx(e)
              } else if (nodeNameI == e.length - 1) {}else {
                treeObj['content' + nodeNameI] = e || ' '
              };

              break;
            // }
            // Not an element
            // treeObj['node' + nodeNameI] = e || ''
            // console.log(treeObj)
          }
          nodeNameI++;
        })
        treeObj['content' + nodeNameI] = omission // Add the last element})}// console.log(treeObj)
    return treeObj

  }
Copy the code

Observer Monitor data

  • Data dynamic listener {{name}}

The re determines the content containing {{name}}

If (e.m atch (/ {{}})/(\ w *))) {/ / be {{}} package Because the value of the package is not the same treeObj [' trends' + e.m atch (/ ({{) (\ w *) (}}) /) [2]] = e}Copy the code

The Observer listens for data, and here I’ve implemented it in a web-based fashion

Let jsxObj = {content0: '', tag: 'div', classId: {class: 'swrap', ID: ''}, childrenNode2: {content0: 'I am ', tag:' SPAN ', classId: '}, childrenNode2: {content0: 'your ', tag:' A ', classId: ' [Object], trendsName: 'big {{name}}', content4: '</span>', content4:' big {{name}}', content5: '</span>', content4: 'oh ', content5: } let jsxObj2 = {content0: 'your ', tag: 'a', classId: [Object], trendsName: 'eldest {{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. The name / / data. Name = 'pear'. / / the console log data. The name) / /}, DefineProperty (data, name, {get: function () {console.log(' you got ') return this['trends' + name]}, set: Function (newVal) {console.log(' you changed ') this['trends' + name] = newVal}})} deepObserve(jsxObj) JsxObj. ChildrenNode2. ChildrenNode2. Name = 'li'Copy the code