0
点赞
收藏
分享

微信扫一扫

【源码阅读 | xe-utils源码 | 08】isDocument(涉及DOM的 nodeType)

yellowone 2022-01-24 阅读 63

1. 背景

  当 HTML 渲染到浏览器之后,会以我们常说的 DOM 结构呈现出来;而 document对象可以对这些 DOM 节点进行各种操作。
  值得一提的是,如果 不是在浏览器中运行 JavaScript 代码,document 打印出来会是一个 undefined 并直接报错。
  本期源码非常简单,来看看 xe-uitils 源码中是如何对 document 进行判断的!

2. 源码解析

2.1 xe-utils 源码实现 isDocument.js

源码思路:
  当对象存在,且当前环境存在 document 对象,并且当前节点类型的值为 99 代表 document 对象,详见 2.3),即可判断为 document 对象

var staticDocument = require('./staticDocument')

/**
 * 判断是否 Document 对象
 * @description nodeType=9 时代表 Document 对象
 * @param {*} obj
 * @returns
 */
function isDocument(obj) {
  return !!(obj && staticDocument && obj.nodeType === 9)
}

module.exports = isDocument

备注:

  • staticDocument:实际上是做了当前环境是否存在 document 对象的判断,源码见下 2.2
  • nodeType:标识了当前DOM节点的类型,详见 2.3
  • 使用 !! 来强制转换为布尔类型,效果等同于 Boolean(obj)

2.2 staticDocument 源码

源码思路:
  判断 document 类型是否为 undefinedstaticStrUndefined 即为 undefined 常量,这里作者做了封装),若是则返回布尔值为否的0,否则返回 document对象

var staticStrUndefined = require('./staticStrUndefined')

/* elint-disable valid-typeof */
var staticDocument = typeof document === staticStrUndefined ? 0 : document

module.exports = staticDocument

2.3 nodeType 包含哪些类型

  通过这个源码,也帮助我们复习了一下平时少用的 nodeType 中,查阅 w3school 可以看到其值对应的哪些节点类型
显然,当 nodeType = 9 时,即为 document 对象
在这里插入图片描述

举报

相关推荐

0 条评论