wft-utils/just-play/hand-writing/v2.js

The commonly used tool functions in daily development

const data = {
  name: 'wft',
  info: {
    age: 18,
    height: '1.88'
  },
  like: ['唱', '跳', 'rap']
}


const oldArrProto = Array.prototype
const newArrProto = Object.create(oldArrProto)
const methodNames = ['push', 'pop', 'shift', 'unshift', 'splice']
methodNames.forEach(methodName => {
  newArrProto[methodName] = function () {
    oldArrProto[methodName].apply(this, Array.from(arguments))
    console.log('更新视图操作-->')
  }
})

function observer(target) {
  if (typeof target !== 'object' || target === null) {
    return target
  }

  if (target.constructor === Array) {
    target.__proto__ = newArrProto
  }

  for (let key in target) {
    defineReactive(target, key, target[key])
  }
}

function defineReactive(target, key, value) {
  if (typeof value === 'object') {
    observer(value)
  }
  Object.defineProperty(target, key, {
    get() {
      return value
    },
    set(val) {
      if (typeof val == 'object') {
        observer(val)
      }
      if (val !== value) {
        value = val
        console.log('更新试图操作-->')
      }
    }
  })
}

observer(data)