生成ast语法树

Author: coder-czy

README.md

@@ -3,3 +3,5 @@
 ## 总结
 
 - object.defineProperty 缺点 只能对对象的某个属性进行劫持
+- 重写数组 7 种方法
+- vue 初次渲染 -> 先初始化数据 -> 将模板进行编译 -> 变成 render() -> 生成虚拟节点 -> 变成真实 DOM -> 放到页面

package.json

@@ -8,7 +8,7 @@
     "dev": "rollup -cw"
   },
   "keywords": [],
-  "author": "",
+  "author": "coder-czy",
   "license": "ISC",
   "devDependencies": {
     "@babel/core": "^7.20.12",

src/compile/index.js

@@ -0,0 +1,115 @@
+
+// ast语法树  vnode
+//<div id="app">hello {{name}}</div>
+
+/**
+ * {
+ * tag:'div',
+ * attrs:[{id:'app'}],
+ * children:[
+ *    {tag:null,text:"hello"}
+ * ]
+ * }
+ * 
+ */
+// 标签名称
+const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z]*`
+//<span:xx>
+const qnameCapture = `((?:${ncname}\\:)?${ncname})`
+// 标签开头正则，捕获的内容是标签名
+const startTagOpen = new RegExp(`^<${qnameCapture}`)
+// 匹配标签结尾的</div>
+const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`)
+//<div id="app"></div> 属性
+const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
+// 匹配标签结束的 >
+const startTagClose = /^\s*(\/?)>/
+var defaultTagRE = /\{\{((?:.|\n)+?)\}\}/g
+
+// 开始标签
+function start (tag, attrs) {
+  console.log(tag, attrs)
+}
+// 获取文本
+function charts (text) {
+  console.log(text)
+}
+function end (tag) {
+  console.log(tag)
+}
+
+// 遍历
+function parseHTML (html) {
+  //<div id="app">hello {{name}}</div>
+  while (html) {
+    // 判断标签<>
+    let textEnd = html.indexOf('<')
+    if (textEnd === 0) {
+      // 开始标签
+      const startTagMatch = parseStartTag(html)
+      if (startTagMatch) {
+
+        start(startTagMatch.tagName, startTagMatch.attrs)
+        continue
+      }
+
+      // 结束标签
+      let endTagMatch = html.match(endTag)
+      if (endTagMatch) {
+        advance(endTagMatch[0].length)
+        end(endTagMatch[1])
+        continue
+      }
+    }
+    // 文本
+    let text
+    if (textEnd > 0) {
+      text = html.substring(textEnd)
+      // console.log(text)
+    }
+    if (text) {
+      advance(text.length)
+      charts(text)
+    }
+  }
+  function parseStartTag () {
+    // debugger
+    const start = html.match(startTagOpen)
+    if (start) {
+
+      // console.log(start)
+      //创建ast语法树
+      let match = {
+        tagName: start[1],
+        attrs: []
+      }
+      // 刪除开始标签
+      advance(start[0].length)
+      //属性
+      //注意多个遍历
+      //注意 >
+      let attr
+      let end
+      while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) {
+        // console.log(attr)
+        match.attrs.push({ name: attr[1], value: attr[3] || attr[4] || attr[5] })
+        advance(attr[0].length)
+
+      }
+      if (end) {
+        // console.log(end)
+        advance(end[0].length)
+        return match
+      }
+    }
+
+  }
+  function advance (n) {
+    html = html.substring(n)
+    // console.log(html)
+  }
+}
+
+export function compileToFunction (el) {
+  let ast = parseHTML(el)
+}

src/init.js

@@ -1,10 +1,52 @@
 import { initState } from "./state"
+import { compileToFunction } from "./compile/index"
 
 export function initMixin (Vue) {//给vue添加init方法
   Vue.prototype._init = function (options) {//用于初始化操作
     const vm = this
     vm.$options = options
 
     initState(vm)
+
+    // 渲染模板 el
+    if (vm.$options.el) {
+      vm.$mount(vm.$options.el)
+    }
+
+
   }
-}
+
+  Vue.prototype.$mount = function (el) {
+    // el template render
+    let vm = this
+    // 获取元素
+    el = document.querySelector(el)
+    let options = vm.$options
+    if (!options.render) {
+      let template = options.template
+      if (!template && el) {
+        // 获取HTML
+        el = el.outerHTML
+        //<div id="app">hello {{name}}</div>
+
+        // 变成ast语法树
+        let ast = compileToFunction(el)
+      }
+    }
+
+  }
+}
+
+// ast语法树  vnode
+//<div id="app">hello {{name}}</div>
+
+/**
+ * {
+ * tag:'div',
+ * attrs:[{id:'app'}],
+ * children:[
+ *    {tag:null,text:"hello"}
+ * ]
+ * }
+ * 
+ */

src/observe/arr.js

@@ -6,21 +6,43 @@ let oldArrayProtoMethods = Array.prototype
 // 2、继承
 export let ArrayMethods = Object.create(oldArrayProtoMethods)
 
-// 劫持
+// 劫持方法 7种
 let methods = [
   'push',
   'pop',
   'unshift',
   'shift',
-  'splice'
+  'splice',
+  'sort',
+  'reverse'
 ]
 
 methods.forEach(item => {
+  // debugger
   ArrayMethods[item] = function (...args) {
     console.log('劫持数组')
     let result = oldArrayProtoMethods[item].apply(this, args)
-    return result
 
+    // 数组添加数据的情况
+    let inserted
+    switch (item) {
+      case 'push':
+      case 'unshift':
+        inserted = args
+        break
+      case 'splice':
+        inserted = args.splice(2)
+        break
+      default:
+        break
+    }
+
+    let ob = this.__ob__
+    if (inserted) {
+      ob.observeArray(inserted)
+    }
+
+    return result
   }
 
 })

src/observe/index.js

@@ -1,6 +1,5 @@
 import { ArrayMethods } from './arr'
-
-export function observer (data) {
+export function observer (data,) {
   // 判断
   if (typeof data != 'object' || data == null) {
     return data
@@ -12,12 +11,22 @@ export function observer (data) {
 
 class Observer {
   constructor(data) {
+    // 给data定义一个属性 __ob__,用于数组新增对象数据的处理
+    Object.defineProperty(data, '__ob__', {
+      enumerable: false,
+      value: this
+    })
+
     //判断数组
     if (Array.isArray(data)) {
       data.__proto__ = ArrayMethods
+
+      // 数组对象
+      this.observeArray(data) //处理数组对象
     }
     this.walk(data)
   }
+
   walk (data) {
     let keys = Object.keys(data)
     for (let i = 0; i < keys.length; i++) {
@@ -27,6 +36,12 @@ class Observer {
       defineReactive(data, key, value)
     }
   }
+
+  observeArray (data) {
+    for (let i = 0; i < data.length; i++) {
+      observer(data[i])
+    }
+  }
 }
 
 // 对象中的属性进行劫持
@@ -47,7 +62,7 @@ function defineReactive (data, key, value) {
   })
 }
 
-// 数组劫持 [1,1] [{a:1}]
+// 数组劫持 两种数据格式[1,1] [{a:1}]
 // 函数劫持 重写数组方法
 //   'push',
 //   'pop',

src/state.js

@@ -10,10 +10,25 @@ export function initState (vm) {
 
 function initData (vm) {
   let data = vm.$options.data
-  data = vm._data = typeof data === 'function' ? data.call(vm) : data //修改this指向
+  data = vm._data = typeof data === 'function' ? data.call(vm) : data //call修改this指向
   // debugger
+  // 将data的所有属性代理到实例上去
+  for (const key in data) {
+    proxy(vm, '_data', key)
+  }
 
   // 对data数据进行劫持
   observer(data)
 
+}
+
+function proxy (vm, source, key) {
+  Object.defineProperty(vm, key, {
+    get: () => {
+      return vm[source][key]
+    },
+    set: (newValue) => {
+      vm[source][key] = newValue
+    }
+  })
 }