前端小技巧 (｡･∀･)ﾉﾞ

[LinkXSystem]

用于记录一些常见的前端的小技巧的代码片段

[LinkXSystem]

判断鼠标滚轮的方向

function (event) {
    const delta = event.wheelDelta;
    const status  = delta > 0 ? true : false
    ...
}

[LinkXSystem]

什么是 document.readyState

• document.readyState 是一个只读属性，可以返回当前文档的准备状态
• document.readyState 的状态有：
  • loading：表示文档正在加载中
  • interactive：表示文档已完成加载，文档已被解析，但图像、样式表和框架等子资源仍在加载
  • complete：表示文档和所有子资源已完成加载。如果状态变成这个，表明load事件即将触发

document.readyState 有啥用

通常情况下，我们可以使用DOMContentLoaded事件来完成监听 DOM 是否加载完成，而不是使用 document.readyState 来检查 DOM 的状态。 同时也由于 Script 都是要求放在文档底部的， 所以基本上 javascript 运行的时候 DOM 已经加载完成。

但，凡事都存在意外。

是的，当我们动态加载 script 的时候，这个问题便出现了。是的，就是你想的那样，此时 DOM 是加载完成的，DOMContentLoaded事件是无法触发的。那么如果我们需要在动态加载完成 script 需要初始化的时候，便不能写在 DOMContentLoaded事件 中了。所以这个时候我们就需要 document.readyState ，大概代码（PS：参考文章）如下：

if (document.readyState != 'loading') {
    init();
} else {
    window.addEventListener("DOMContentLoaded", function () {
        init();
    });
}

[LinkXSystem]

获取 HTML 元素中的文本

const text = dom.textContent || dom.innerText

为啥是 textContent 优先

• 如果HTML 元素中的文本的样式存在 display: none 的话， innerText 是无法获取到的
• innerText 方式获取文本存在考虑 CSS 样式的情况，导致触发回流以获取最新的样式
• 兼容性问题， Firefox 低版本不兼容

[LinkXSystem]

快速编辑页面的方法

// 开启
document.body.contentEditable = "true"

//关闭
document.body.contentEditable = "false"

[LinkXSystem]

DOMParser 是啥 ？

DOMParser 是可以让 HTML 字符串解析为 DOM 树，它支持下面的 mimeType 类型：

mimeType值	返回文档类型
text/html	Document
text/xml	XMLDocument
application/xml	XMLDocument
application/xhtml+xml	XMLDocument
image/svg+xml	XMLDocument

它的使用方法如下:

const parser = new DOMParser();
parse.parseFromString('<div>Yes! AMD</div>', 'text/html');

需要注意的是解析的类型不同，返回的结果则不相同

[LinkXSystem]

XMLSerializer 是啥？

XMLSerializer 是将 DOM 树对象序列化为字符串

它的使用方法如下：

const serializer = new XMLSerializer();

serializer.serializeToString(document.querySelector('.link'));

而且 serializeToString 方法会自动为 root 元素添加 xmlns 的命名空间

XMLSerializer 和 outerHTML 的区别

需要注意的是 outerHTML 只能在 Element 元素上使用， 但 XMLSerializer 可以使用任意类型，类型如下：

节点类型	释义
DocumentType	文档类型
Document	文档
DocumentFragment	文档片段
Element	元素
Comment	注释节点
Text	文本节点
ProcessingInstruction	注释节点
Attr	属性节点

[LinkXSystem]

document. execCommand 是啥？

来自MDN 解析是 当一个HTML文档切换到设计模式时，document 暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素

言下之意，就是在 HTML 处于编辑模式的时候，我们可以通过浏览器的内建命令来直接操作 HTML 。典型的例子便是富文本编辑器的实现基础便是 document. execCommand 方法。

如果你想快速体验此方法，可以直接通过此comment 中的方法来尝试。

该方法的默认调用形式如下：

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

默认返回值为 Boolean，通常情况下，返回值都是 false ，即为未被启用或者是不支持。当然也有例外的命令，即使没有进入编辑模式也是可以正常使用的，如 copy 命令。

那么谈到了 document. execCommand ，便来看一个典型的应用吧，即富文本编辑器，但是这里即限于了解，至于为啥，你可以看一下这个

那么关于富文本编辑器的实现，就请到此问题上吧，issue

[LinkXSystem]

MutationObserver 是啥？

MutationObserver 使用监控指定 DOM 节点变化的 API，包括文本变更，属性更新等操作

基本的调用形式如下：

const ObserverCallback = function() {
...
}

const observer = new MutationObserver(ObserverCallback);
// 指定监听的对象
const target = document.body;
// 指定监听的配置
const options = { attribute: true };

// 启动监听
observer.observe(target, options});
// 停止监听
observer.disconnect();

MutationObserver 使用十分简单，但是我们需要注意它的配置参数有哪些？参数如下：

• attributes：设为true以观察受监视元素的属性值变更。默认值为false

• attributeFilter：要监视的属性名称的数组，当 attribute 为 true 且未设置时，将监视节点的 所有 属性的更改

• attributeOldValue：设置为 true 时，只要发生更改，就会记录该属性的先前值

• subtree：设置为 true 还可以观察到所观察元素的子节点的更改

• childList：设置为 true 以监视元素的添加和删除子节点动作。当 subtree 设置为 true 时，还将监视子元素中子节点的添加和删除

• characterData：设置为 true 时，它将记录文本节点中文本的更改，因此这仅适用于 Text 节点，不适用于 HTMLElement。为此，要观察的节点必须是 Text 节点，或者，如果观察者监视 HTMLElement，则需要将 option subtree 设置为 true，以监视子节点的更改

• characterDataOldValue：设置为 true 时，每当发生更改时，将记录特征数据的先前值

注意， attributes / characterData / childList 三者中需要必须有一个为 true

为啥，Callback 中返回的 MutationRecord 对象的 type 字段对应的类型便是 attributes / characterData / childList 之一 。下面是 Callback 的参考示例：

//  参数依次为 MutationRecord 对象的数组，以及调用的观察者 
const ObserverCallback = function(mutations, observer) {
    mutations.forEach(mutation => {
         switch (mutation.type) {
            case "attributes":
               ...
               break;
            case "childList":
               ...
               break;
         }
   });
};

那么 MutationRecord 对象具体包含的属性如下：

• type：更改的类型，可以是 attribute、characterData 或 childList

• target：已更改的元素，可以是属性、字符数据或子元素

• addNodes：已添加节点的列表；如果未添加，则为空的 NodeList

• removeNodes：已删除节点的列表；如果未删除任何节点，则为空 NodeList

• attributeName：更改后的属性名称；如果未更改任何属性，则为 null

• previousSibling：添加或删除的节点的上一个同级，或者为 null

• nextSibling：添加或删除的节点的下一个同级，或者为 null

[LinkXSystem]

禁止手动修改对象的方式

• 使用 Object.preventExtensions 方法 作用： 禁止为对象添加属性和方法。但已存在的属性和方法可以被修改或删除 样例：

  let x = { name: 'ni' };
  // 使用
  Object.preventExtensions(x);
  // 判断是否使用
  Object.isExtensible(x); // true

• 使用 Object.seal 方法 作用： 禁止为对象删除已存在的属性和方法。被密封的对象也是不可扩展的 样例：

  let x = { name: 'ni' };
  // 使用
  Object.seal(x);
  // 判断是否使用
  Object.isSealed(x); // true

• 使用 Object.freeze 方法 作用： 禁止为对象修改已存在的属性和方法。所有字段均只读。被冻结的对象也是不可扩展和密封的 样例：

  let x = { name: 'ni' };
  // 使用
  Object.freeze(x);
  // 判断是否使用
  Object.isFrozen(x); // true

注意：以上方法均不可逆

[LinkXSystem]

监听 StorageEvent 事件

• 文档

基于此事件可以共享同源页面上的数据