1 实现sleep函数

  • 要求：
1
2
3
4
5

(async () => {
  console.log('hello')
  await sleep(2000)
  console.log('world')
})()
  • 题解
1

const sleep = (ms) => new Promise((resolve)=>setTimeout(resolve, ms))

2 实现'Hello World!'.reverse()

1

String.prototype.reverse = function reverse() { return this.split('').reverse().join('')}

3 事件代理、监听、DOM自定义属性

  • 要求

    • 网页中有一个元素A，它有个data-href属性，里面存放一个链接地址
    • 实现一个函数，当任意点击时，如果点击的元素就是A或其上层节点中找到A，则进行链接跳转

  • 实现思路：

    • 首先给window添加点击事件的监听，然后先声明一个中间变量targetNode记录节点

    • 然后循环判断当前节点targetNode是否存在data-href属性

    • 如果存在则进行跳转，break。不存在则将该节点的父节点赋值给targetNode

    • 一直循环到判断targetNode是最外层节点为止

  • 题解：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

window.addEventListener('click', (e) => {
  let targetNode = e.target
  // 只要不是document元素就一直循环
  while(targetNode !== document){
    if(targetNode.hasAttribute('data-href')){
      // 找到存在’data-href'属性的节点，触发链接
      window.open(targetNode.dataset.href)
      break
    } else {
      // 没找到就继续向上找
      targetNode = targetNode.parentNode
    }
  }
})