(十七)原生js案例之h5中的几个特性记录

h5 中的新特性

语义化标签
增强型表单
元素选择器
- querySelector
- querySelectorAll
- getElementsByClassName
class 的操作
- classList.add
- classList.remove
- classList.toggle
- classList.contains
- classList.replace
JSON
- JSON.stringify
- JSON.parse
- eval 可以解析任何字符串变成 js
- pares 只能解析 JSON 形式的字符串变成 js 安全性高

var str = 'alert("hello")';
eval(str); // 执行了const str2 = 'function() show{alert("hello2222")}';
JSON.parse(str2);
show(); //报错了
// Uncaught SyntaxError: Unexpected token 'u', "function() "... is not valid JSON
//     at JSON.parse (<anonymous>)

json。parse 必须是严格的 json 格式, 否则会报错

const str2 = '{"name":"zs","age":18}';
const json = JSON.parse(str2);
console.log(json.name);

深拷贝

const obj = { name: "zs", age: 18 };
const obj2 = JSON.parse(JSON.stringify(obj));
obj2.name = "ls";
console.log(obj); // {name: "zs", age: 18}
console.log(obj2); // {name: "ls", age: 18}

dataset 自定义数据

比较麻烦的方式

<div id="box" name="zhangsan" age="30">这一段描述文本</div>

window.onload = function () {const oDiv = document.getElementById("box");const name = oDiv.getAttribute("name");const age = oDiv.getAttribute("age");console.log(name, age);
};

h5 提供了 dataset

<div id="box" data-name="zhangsan" data-age="30">这一段描述文本</div>

window.onload = function () {const oDiv = document.getElementById("box");const name = oDiv.dataset.name;const age = oDiv.dataset.age;console.log(name, age);
};

defer 和 async

defer 立即加载 js 文件，在页面解析完之后才执行
async 异步加载 js 文件，执行完之后页面解析完再执行
defer 和 async 都是异步加载 js 文件，但是执行顺序不同
defer 加载 js 文件是按照顺序执行的，async 是无顺序的
defer 加载 js 文件是阻塞解析的，async 是非阻塞解析

h5 中的历史管理

history.pushState(state, title, url)
history.replaceState(state, title, url)
history.back()
history.forward()
history.go()
state 状态对象，可以传递任意数据
title 标题，没有实际意义
url 页面地址，必须和当前页面同源
页面跳转不会刷新页面，只是改变 url
页面刷新会触发 popstate 事件,会读取 event.state
注意网址是虚假的，需要后端配合，否则刷新会找不到页面
hash 改变会触发 hashchange 事件

window.onhashchange = function () {};

h5 中的拖拽

拖拽元素的事件
- dragstart 开始拖拽
- drag 拖拽中与 mousemove 的移动事件类似，但是 drag 会一直触发，
- dragend 拖拽结束
目标元素的事件
- dragenter 拖拽进入目标元素
- dragover 拖拽在目标元素上
- dragleave 拖拽离开目标元素
- drop 拖拽在目标元素上释放
阻止默认事件
- event.preventDefault()
- event.stopPropagation()
事件触发顺序
不触发 drop
- dragstart ->drag -> dragenter -> dragover -> dragleave -> dragend
  触发 drop
- dragstart ->drag -> dragenter -> dragover -> drop -> dragleave -> dragend
拖拽图片
- 拖拽图片时，需要阻止默认事件
- FileReader 读取文件
- dataTransfer.setData 设置数据
- dataTransfer.getData 获取数据
- dataTransfer.effectAllowed 设置允许拖拽类型
- dataTransfer.dropEffect 设置拖拽类型
- readAsDataURL 读取文件为 base64,将文件读取为 DaataURL
- onload 读取完成,this.result 为读取结果,如果是图片
  读取的 base64 字符串

window.onload = function () {const oBox = document.getElementById("box");const oList = document.getElementById("list");oBox.ondragenter = function (e) {e = e || window.event;e.preventDefault();this.innerHTML = "可以释放啦~";};oBox.ondragover = function (e) {e = e || window.event;e.preventDefault();};oBox.ondragleave = function (e) {this.innerHTML = "将文件拖拽到此区域~";};oBox.ondrop = function (e) {e = e || window.event;e.preventDefault(); // 阻止默认行为，图片会打开this.innerHTML = "将文件拖拽到此区域~";const data = e.dataTransfer.files;console.log("🚀 ~ data:", data);for (let i = 0; i < data.length; i++) {const type = data[i].type;if (type.indexOf("image") == -1) {alert("文件格式错误");return false;}// 读取文件内容const reader = new FileReader();reader.readAsDataURL(data[i]);reader.onload = function () {const oLi = document.createElement("li");const img = document.createElement("img");img.src = reader.result;oLi.appendChild(img);oList.appendChild(oLi);};reader.onprogress = function (e) {console.log("🚀 ~ reader:", e);};}};
};