H5新增特性 DOMContentLoaded事件-自定义属性-async属性-history接口方法-本地存储-postMessageH5新增特性

81 阅读 0 评论 54 点赞

我是靠谱客的博主贪玩天空，最近开发中收集的这篇文章主要介绍H5新增特性 DOMContentLoaded事件-自定义属性-async属性-history接口方法-本地存储-postMessageH5新增特性，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文章目录

H5新增特性
- MutationObserver 监听DOM变化
- DOMContentLoaded事件
- - script标签的async属性
- 自定义属性
- history接口方法 pushState()/replaceState() 用来在浏览历史中添加和修改记录
- 本地存储localstorage/sessionstorage
- postMessage DOM跨域
- 语义化标签
- - canvas和svg的区别

H5新增特性

MutationObserver 监听DOM变化

是什么
原生api中用来监听node节点变化的一个类。
监听DOM发生变化时，将回调函数放入微队列中，实现多次 DOM 变化后，一次触发异步调用，这样即使频繁地操纵 DOM，也不会对性能造成太大的影响。

原理
观察者模式

使用场景
vue2.0 nextTick 实现原理时，如果Promise不兼容就采用MutationObserver

如何使用MutationObserver 的笔记

DOMContentLoaded事件

script标签的async属性

学习笔记:https://blog.csdn.net/qq_41370833/article/details/125344985

自定义属性

自定义属性的定义
标签中 data-*开头的属性，使用data-*属性来嵌入自定义数据

属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符
属性值可以是任意字符串
用户代理会完全忽略前缀为 “data-” 的自定义属性，比如在vue中通过event.target.dataset获取到的是*的内容

自定义属性的作用
存储的自定义数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询），比如实现图片懒加载。

自定义属性的使用

element.属性 获取元素内置属性值
element.getAttribute('属性') 获取自定义属性
element.dataset.属性 获取自定义属性，忽略data前缀，采用驼峰命名写法
`element.getAttribute(‘属性’)`` 移除属性

class是保留关键字，但是在element.getAttribute(‘属性’); 方法中可以直接使用；element.属性写法则需要使用className代替

//获取标签的原属性
var box=document.querySelector('.box');
console.log(box.className);
console.log(box.title);

//获取标签的自定义属性
console.log(box.dataset['name']); //忽略前缀
console.log(box.dataset['myName']);//自定义属性名为date-my-name获取时需要驼峰命名法
console.log(box.getAttribute("data-my-name"))//不忽略前缀

history接口方法 pushState()/replaceState() 用来在浏览历史中添加和修改记录

pushState(state,title,url):可以改变网址(不能跨域)而不刷新页面，在浏览器中添加记录，网页不会真正跳转，本质上网页还是停留在原页面。
state: 与指定网址相关的状态对象，popState事件触发时，该对象会作为参数传入回调函数，如果不需要这个对象，可填null。
title：新网址的标题，可忽略填bull
url：新网址，必须和当前页面处在同一个域

只有用户点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发。
不会触发popstate的情况
1.调用 history.pushState() 或者 history.replaceState()
2.该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档
3.页面第一次加载的时候

案例
假设当前地址http://mozilla.org/foo.html

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

在浏览器记录中push进了http://mozilla.org/bar.html 记录，此时地址栏显示http://mozilla.org/bar.html ,但是页面不会刷新，只是改变浏览器的记录。将记录添加进浏览器，当访问其他地址后，后退就可以退回此记录。

history.replaceState()同pushState()方法，区别类似于replace和push。
push方法会将当前网址压入栈，成为新的栈顶元素。
repalce方法会用当前的网址替换原来的栈顶元素，成为新的栈顶元素。

本地存储localstorage/sessionstorage

用于数据存储,存储的键值对格式的字符串

学习笔记:https://blog.csdn.net/qq_41370833/article/details/125639364

postMessage DOM跨域

跨文档消息机制:通过使用otherWindow.postmessage(data, origin, [transfer]和不同源的 DOM 进行通信。

语法:otherWindow.postmessage(data, origin, [transfer])

otherWindowb表示其他窗口的一个引用，是接收数据的一方
iframe的contentWindow

<body>
    <iframe class="childIframe" scr="http://XXX:8080"></iframe>
    <script>
        // 获取iframe的contentWindow
        const win = document.querySelector('.childIframe').contentWindow
    </script>
</body>

执行window.open()方法返回的对象

<body>
    <script>
        // 获取window.open()打开窗口的引用
        const win = window.open('http://XXX:8888')
    </script>
</body>

origin 指定哪些窗口能接收到消息事件

1.父窗口给子窗口发送消息的方式：
document.getElementById('myframe').contentWindow.postMessage('MessageFromIndex1','*');
其实就是在父窗口中操作子窗口发消息，然后让子窗口接收自己刚才发的消息。
2.子窗口给父窗口发送消息的方式：
window.parent.postMessage( {msg: 'MessageFromIframePage'}, '*');
其实就是在子窗口中操作父窗口发消息，然后让父窗口接收自己刚才发的消息。
总结：所谓的跨窗口发送消息，就是通过在别的窗口操作本窗口发送消息，然后本窗口再自己接收的方式实现。

语义化标签

canvas和svg的区别

-	canvas	svg
缩放失真	canvas是一块画布，可以在里面绘制图片(位图)，当画布缩放时，内部的图片也会缩放会出现失真情况。	svg是可缩放矢量图，缩放不会失真。
修改途径	只能通过js修改	svg绘图时，每个图形都是以DOM节点的形式插入到页面中的，我们可以通过js来直接操作这些图形。也可以通过css修改
应用场景	适合图像密集型的游戏应用	适合大面积，小数量的场景。