面试题整理（2）

fud1mo

已于 2022-08-23 16:44:45 修改

阅读量149

点赞数

文章标签： javascript 前端 html

于 2022-06-27 23:15:29 首次发布

本文链接：https://blog.csdn.net/wsssq_/article/details/125396691

版权

一、原生JS实现事件委托

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

  // 事件委托
  let ul = document.getElementById('ul')
  ul.onclick = function (event) {
    event = event || window.event
    console.log(event)
    let target = event.target
    if (target.nodeName == 'LI') {
      // 委托的事件
      alert(target.innerHTML)
    }
  }

二、Vue的响应式

// 如何实现Vue2.0响应式
// 发布订阅模式 + 双向数据绑定 = 基本的响应式

// 1.订阅器模型(类似微信公众号订阅)
let Dep = {
  clientList: {},
  // 添加订阅者
  listen: function (key, fn) {
    // 先判断是否有微信
    // if(!this.clientList[key]){
    //   this.clientList[key]=[]
    // }
    // this.clientList[key].push(fn)
    // 简写
    (this.clientList[key] || (this.clientList[key] = [])).push(fn)
  },
  // 推送方法
  trigger: function () {
    let key = Array.prototype.shift.call(arguments),
      fns = this.clientList[key];
    if (!fns || fns.length === 0) {
      return false
    }
    for (let i = 0, fn; fn = fns[i++];) {
      fn.apply(this, arguments)
    }
  }
}

// 数据劫持
let dataHijack = function ({ data, target, datakey, selector }) {
  let value = '',
    el = document.querySelector(selector);
  Object.defineProperty(data, datakey, {
    get() {
      console.log('取值');
      return value
    },
    set(val) {
      console.log('设置值');
      value = val
      // 数据变化了
      Dep.trigger(target, val)
    }
  })
  // 添加订阅者
  Dep.listen(target, function (text) {
    el.innerHTML = text
  })
}