Question

DOM

DOM 是哪种数据结构

树（DOM 树）

attribute 和 property 的区别

• property：修改对象属性，不会体现到 html 结构中
• attribute：修改 html 属性，会改变 html 结构
• 两者都有可能引起 DOM 重新渲染

一次性插入多个 DOM 节点，考虑性能

BOM

分析拆解 url 各个部分

事件

编写一个通用的事件监听函数

function bindEvent(elem, type, selector, fn) {
  if (fn == null) {
    fn = selector;
    selector = null;
  }
  elem.addEventListener(type, (event) => {
    const target = event.target;
    if (selector) {
      // 代理绑定
      if (target.matches(selector)) {
        fn.call(target, event);
      }
    } else {
      // 普通绑定
      fn.call(target, event);
    }
  });
}

描述事件冒泡的流程

• 基于 DOM 树形结构
• 事件会顺着触发元素向上冒泡
• 应用场景：代理

无限下拉的图片列表，如何监听每个图片的点击

• 事件代理
• 用 event.target 来获取触发元素
• 用 matches 来判断是否是触发元素

Ajax

手写一个简易的 ajax

function ajax(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText));
        } else if (xhr.status === 404) {
          reject(new Error("404 not found"));
        }
      }
    };
    xhr.send(null);
  });
}

跨域的常用方式

JSONP：

• <script> 可绕过跨域限制</script>
• 服务器可以任意动态拼接数据返回
• 所以，<script> 就可以获得跨域的数据，只要服务端愿意返回</script>

存储

描述 cookie、localStorage、sessionStorage 区别

• 容量：cookie 4kb，localStorage/sessionStorage 5M
• API 易用性：cookie document.cookie，localStorage/sessionStorage setItem、getItem
• 是否跟随 http 请求发送出去