(十七)原生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);};}};
};