Implementation of JSX class (1)
This is the first time in nuggets published articles, some concepts are not said on their own topic.
Talk about the VUE principle, the React Principle, or what the virtual DOM is. I honestly don’t know how to answer that. I haven’t seen the source code, most baidu or digging gold search to see, no in-depth study will feel difficult to answer, all here I use their own party put to achieve (may have a lot of bugs code)
Bable to create a react. createElement mode
Const testEle = '<div class="swrap"> <span> <span> </div> </div>' (<\w+.*? >)(.*)(<\/\w+>)(.*?) $/; // let tagR = /<\/(\w+)/; // tag let classR = /class="(\w+)"/; //class let idR = /id="(\w+)"/; //id const changeEleDeepToJsx = function (ele, lastResult) {// HTML let result = []; var sliceEle = ele.match(rule) if (sliceEle === null) { return } console.log(sliceEle[2]) let tag = SliceEle [4].match(tagR) &&sliceele [4].match(tagR)[1] sliceEle[2].match(classR) && sliceEle[2].match(classR)[1], id: sliceEle[2].match(idR) && sliceEle[2].match(idR)[1], } let content = sliceEle[3] // all internal heat under the parent tag // result.push(sliceEle[1]) result.push(tag) result.push(classAid) // Result.push ([contentEle]) // Internal element if (sliceEle[5]) {result.push(sliceEle[5])} if (lastResult) {if (sliceEle[1]) { Splice (2, 0, sliceEle[1]) lastresult.splice (3, 0, result)} else {lastresult.splice (3, 0, result) result) } } if (content) { changeEleDeepToJsx(content, result) } return lastResult ? lastResult : result } let jsxResult = changeEleDeepToJsx(testEle) console.log(jsxResult)Copy the codeThe result after running is as follows:
Next, write the createElement method and realize that you should pass 5 parameters (regardless of the multi-element problem) and there are many child elements. Optimize the code and change the value of 5 parameters to the downstream value
CreateElement is a simple implementation
createElement([tag, ciObj, content1, childNode, content2]) { console.log(ciObj) if (! } return '<${tag} class='${ciObj && ciObj. Class}' id='${ciObj && ciObj. Id}'> ${content1} ${this.createElement.bind(this, childNode)()} ${content2} </${tag}> ` } } let react = new React() let jsx = react.createElement(jsxResult) console.log(jsx)Copy the code
Let’s experiment with this. Let’s create a new HTML file
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> * {margin: 0; padding: 0; } .swrap { background: #409EFF; padding: 10px; } .swrap a{ cursor: pointer; color: #FFF; } </style> <body> <div id="root"></div> </body> <script type="module"> import { changeEleDeepToJsx, JSX} from './jsx2.js' let render = function () {return (' <div class="swrap">{{name}}<span> <span> </a></span> } console.log(changeEleDeepToJsx(render())) /* */ document.getelementById ('root').innerhtml = render() < / script > < / HTML > js * * * * const testEle = '< div class = "swrap" > < span > I am your brother < a > < a > < / span > < / div >' o let rule = / (. *?) (<\w+.*? >)(.*)(<\/\w+>)(.*?) $/; let tagR = /<\/(\w+)/; // tag let classR = /class="(\w+)"/; //class let idR = /id="(\w+)"/; //id const changeEleDeepToJsx = function (ele, lastResult) {// HTML let result = []; Var sliceEle = ele. Match (rule) if (sliceEle === null) {// No child element console.log(ele, 57) lastresult.splice (3, 0, '') lastResult.splice(2, 0, Ele) return} let tag = sliceEle[4].match(tagR) &&sliceele [4].match(tagR)[1] sliceEle[2].match(classR) && sliceEle[2].match(classR)[1] || '', id: sliceEle[2].match(idR) && sliceEle[2].match(idR)[1] || '', } console.log(classAid) let content = sliceEle[3] // result.push(") result.push(tag) Result.push (classAid) // result.push([contentEle]) // Internal element // if (sliceEle[5]) {result.push(sliceEle[5]) //} if If (sliceEle[1]) {if (sliceEle[1]) {if (sliceEle[1]) {if (sliceEle[1]) {if (sliceEle[1]) {if (sliceEle[1]) {if (sliceEle[1]) { 0, sliceEle[1]) lastResult.splice(3, 0, result) // } } if (content) { changeEleDeepToJsx(content, result) } return lastResult ? lastResult : result } let jsxResult = changeEleDeepToJsx(testEle) console.log(jsxResult) class React { createElement([tag, ciObj, content1, childNode, content2]) { console.log(ciObj) if (! } return '<${tag} class='${ciObj && ciObj. Class}' id='${ciObj && ciObj. Id}'> ${content1} ${this.createElement.bind(this, childNode)()} ${content2} </${tag}> ` } } let react = new React() let jsx = react.createElement console.log(jsx) export {changeEleDeepToJsx,jsx}Copy the codeWrite here found while others, such as the symbol {{}} to monitor what also didn’t write, still can’t test.
To summarize
Vue React converts HTML to an array structure, converts an array structure to an array structure, converts an array structure to an array structure, converts an array structure to an array structure. In the next article, the js code of the first implementation tree is not packaged well, and the function and class class are written