JS的异步操作和DOM等基础知识学习 | 青训营笔记

LuciaZzzz
59 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第5天

异步操作

异步任务指的是被引擎放在一边，不进入主线程而进入任务队列的任务，只有引擎认为某个异步任务可以执行了，该任务才会进入主线程执行。排在异步任务后面的代码不用等待异步任务结束也会马上运行。

异步任务的操作模式

  • 回调函数：简单，容易理解，但是难以阅读代码和维护 callback（）
  • 事件监听：取决于某个事件是否发生。on， trigger
  • 发布/订阅：又称观察者模式。某个任务执行完成则向信号中心发布一个信号，其他任务可以订阅这个信号从而获知什么时候可以开始执行。subscribe（），publish（）

异步操作的执行方式

  • 串行执行
  • 并行执行
  • 串行和并行结合

定时器

setTimeOut（）： 指定某个函数或者某段代码在多少毫秒之后执行，返回一个整数，表示定时器的编号。

setInterval（）： 指定每隔多少时间间隔执行一次，无限次定时执行。

clearTimrout()，clearInterval（）： 可以取消对应的定时器

debounce（防抖动） 设置两次Ajax通信不少于2500ms，则代码可以写成如下：

$('textarea').on('keydown', debounce(ajaxAction, 2500));

function debounce(fn, delay){
  var timer = null; // 声明计时器
  return function() {
    var context = this;
    var args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

Promise（）

Promise 可以让异步操作写起来，就像在写同步操作的流程，而不必一层层地嵌套回调函数。

// 传统写法
step1(function (value1) {
  step2(value1, function(value2) {
    step3(value2, function(value3) {
      step4(value3, function(value4) {
        // ...
      });
    });
  });
});

// Promise 的写法
(new Promise(step1))
  .then(step2)
  .then(step3)
  .then(step4);

DOM

全称为文档对象模型（Document Object Model），作用是将网页转换为JavaSrcipt对象。 浏览器会根据DOM模型，将结构化文档，比如HTML解析成一系列的节点没然后将这些节点转成一个树状结构（DOM Tree），所有的节点和树状结构都有规范的对外接口。

节点（node）

  • Document：顶层节点
  • DocumentType：doctype标签
  • Element：网页的各种HTML标签
  • Attr：网页元素的属性
  • Text：标签包含的文本
  • Comment：注释
  • DocumentFragment：文档的片段

Node的属性

  • nodeType

不同节点的nodeType属性值和对应的常量如下。

  • 文档节点（document）：9，对应常量Node.DOCUMENT_NODE
  • 元素节点（element）：1，对应常量Node.ELEMENT_NODE
  • 属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE
  • 文本节点（text）：3，对应常量Node.TEXT_NODE
  • 文档片断节点（DocumentFragment）：11，对应常量Node.DOCUMENT_FRAGMENT_NODE
  • 文档类型节点（DocumentType）：10，对应常量Node.DOCUMENT_TYPE_NODE
  • 注释节点（Comment）：8，对应常量Node.COMMENT_NODE
  • nodeName
  • nodeValue
  • textContent
  • baseURI
  • ownerDocument
  • nextSibling
  • previousSibling
  • parentNode
  • parentElement
  • firstChild， lastChild
  • childNodes
  • isConnected

Node的方法

  • appendChild（）
  • hasChildNodes（）
  • cloneNode（）
  • insertBefore（）：将某节点插入父节点内部的指定位置
  • removeChild()
  • replaceChild()
  • contains()
  • isEqualNode(), isSameNode()
  • normalize():清理当前节点内部的所有文本节点。去除空的文本节点，并且将相邻的文本节点合并成一个。
  • getRootNode（）

NodeList接口

类似于数组的对象，可以用length和forEach但是不能pop或者push

HTMLCollection接口

是一个节点对象的集合，只能包含元素（element）节点。也是一个类似于数组的对象，但是没forEach方法，只能用for循环遍历。

document.readState可以检查文档是否加载完成：

// 基本检查
if (document.readyState === 'complete') {
  // ...
}

// 轮询检查
var interval = setInterval(function() {
  if (document.readyState === 'complete') {
    clearInterval(interval);
    // ...
  }
}, 100);

属性的操作

HTML的属性是大小写不敏感的，但是JavaScript的属性是大小写敏感的，因此转为JavaScript属性名时一般改为驼峰式写法。 有些属性名时JavaScript的保留字，需要改名。比如for改为htmlFor，class改为className

avatar
文章
阅读
粉丝