example/vue-core.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <h2>vue 深层原理剖析</h2>
    <script>
      //
      function cb(val) {
        /* 渲染视图 */
        console.log('视图更新啦～')
      }

      function defineReactive(obj, key, val) {
        Object.defineProperty(obj, key, {
          enumerable: true /* 属性可枚举 */,
          configurable: true /* 属性可被修改或删除 */,

          get: function reactiveGetter() {
            return val /* 实际上会依赖收集，下一小节会讲 */
          },
          set: function reactiveSetter(newVal) {
            if (newVal === val) return
            cb(newVal)
          },
        })
      }

      function observer(value) {
        if (!value || typeof value !== 'object') {
          return
        }

        /*  Object.keys()  遍历获取所有对象的key值 是数组形式 */

        Object.keys(value).forEach((key) => {
          defineReactive(value, key, value[key])
        })
      }

      // /* es6 类方法   constructor 方法 里面写   constructor属性  注意区分开   */

      // class Vue {
      //     /* Vue构造类 */
      //     constructor(options) {
      //         this._data = options.data;
      //         observer(this._data);
      //     }
      // }

      // let o = new Vue({
      //     data: {
      //         test: "I am test."
      //     }
      // })
      // /* 修改数据进行触发 */
      // o._data.test = '我是不是成功了'

      // -------------- 依赖收集 ---------------

      /* 订阅者 */

      class Dep {
        constructor() {
          /* 用来存放Watcher对象的数组 */
          this.subs = []
        }

        /* 在subs中添加一个Watcher对象 */
        addSub(sub) {
          this.subs.push(sub)
        }

        /* 通知所有Watcher对象更新视图 */
        notify() {
          this.subs.forEach((sub) => {
            sub.update()
          })
        }
      }

      /* 观察者 */

      class Watcher {
        constructor() {
          /* 在new一个Watcher对象时将该对象赋值给Dep.target，在get中会用到 */
          Dep.target = this
        }

        /* 更新视图的方法 */
        update() {
          console.log('视图更新啦～')
        }
      }

      Dep.target = null

      function defineReactive(obj, key, val) {
        /* 一个Dep类对象 */
        const dep = new Dep()

        Object.defineProperty(obj, key, {
          enumerable: true,
          configurable: true,
          get: function reactiveGetter() {
            /* 将Dep.target（即当前的Watcher对象存入dep的subs中） */
            dep.addSub(Dep.target)
            return val
          },
          set: function reactiveSetter(newVal) {
            if (newVal === val) return
            /* 在set的时候触发dep的notify来通知所有的Watcher对象更新视图 */
            dep.notify()
          },
        })
      }

      class Vue {
        constructor(options) {
          this._data = options.data
          observer(this._data)
          /* 新建一个Watcher观察者对象，这时候Dep.target会指向这个Watcher对象 */
          new Watcher()
          /* 在这里模拟render的过程，为了触发test属性的get函数 */
          console.log('render~', this._data.test)
        }
      }

      const vm = new Vue({
        data: {
          test: '我的为什么不可以了呢',
        },
      })

      vm._data.test = '我的花花世界 '

      let ress = {
        visitedTime: 1524883051784,
        content: '',
        url: 'http://dbcenter.ingageapp.com/mysql/query#',
        data: '2018-12-01',
        time: '09:12:50',
      }

      var jsonData = {
        status: 0,
        data: {
          visitor: {
            browserType: {
              value: 1,
              label_resourceKey: 'XdMDPickOptn.serviceVisitor.browserType.1',
              label: 'Chrome',
            },
            osType: {
              value: 1,
              label_resourceKey: 'XdMDPickOptn.serviceVisitor.osType.1',
              label: 'Windows',
            },
            pageSource: {},
            sourcePage: '',
          },
          userTrackDetails: [
            {
              visitedTime: 1525383051784,
              content: 'dbcenter主页',
              url: 'http://dbcenter.ingageapp.com/mysql/query',
            },
            {
              visitedTime: 1525283051784,
              content: 'dbcenter主页',
              url: 'http://dbcenter.ingageapp.com/mysql/query',
            },
            {
              visitedTime: 1525183051784,
              content: 'dbcenter主页',
              url: 'http://dbcenter.ingageapp.com/mysql/query',
            },
            {
              visitedTime: 1525083051784,
              content: '',
              url: 'http://dbcenter.ingageapp.com/mysql/query#',
            },
            {
              visitedTime: 1524983051784,
              content: '',
              url: 'http://dbcenter.ingageapp.com/mysql/query#',
            },
            {
              visitedTime: 1524883051784,
              content: '',
              url: 'http://dbcenter.ingageapp.com/mysql/query#',
            },
          ],
        },
        msg: '成功',
      }

      function changeTime(val) {
        val = Number(val)
        const date = new Date(val)
        let year = date.getFullYear(),
          month = date.getMonth() + 1,
          day = date.getDate(),
          hour = date.getHours(),
          minute = date.getMinutes(),
          second = date.getSeconds()

        month = month.toString().padStart(2, '0')
        day = day.toString().padStart(2, '0')
        hour = hour.toString().padStart(2, '0')
        minute = minute.toString().padStart(2, '0')
        second = second.toString().padStart(2, '0')

        return {
          date: `${year}-${month}-${day}`,
          time: `${hour}:${minute}:${second}`,
        }
      }

      const time = jsonData.data.userTrackDetails
      const obj = {}

      for (let item of time) {
        let visitedTime = item.visitedTime
        let res = changeTime(visitedTime)
        Object.assign(item, res)
        obj[res.date] = []

        for (let val of time) {
          if (visitedTime == val.visitedTime) {
            obj[res.date].push(val)
          }
        }
      }

      console.log(obj)
      console.log(jsonData)
    </script>
  </body>
</html>