新增方法和历史管理

一、classList
通过classList对象对class类名增删改查

<div id = "box" class  = "a b"></div>
<input type = "button" value = "添加">
<input type = "button" value = "删除">
<input type = "button" value = "获取">
<input type = "button" value = "toggle">
<input type = "button" value = "contains">

const box = document.querySelector("#box");
const li = document.querySelectorAll("input");
//对class列表 增删改查
li.forEach((item, index) =>{
  item.onclick = function(){
    switch(index){
      case 0:
        box.classList.add("abc", "xyz");
        //addClass
        break;
      case 1:
        box.classList.remove("abc");
        //removeClass
        break;
      case 2:
        console.log(box.classList.length);
        break;
      case 3:
        box.classList.toggle("a");
        //toggleClass
        break;
      case 4:
        //console.log(box.classList.contains("xyz"));
        let onOff = box.classList.contains("xyz");
        onOff ? box.classList.remove("xyz") : box.classList.add("xyz");
        break;
    }
  }
})

二、dataset
通过dataset对象对data-Attr格式的数据增删改查

<div id = "box" data-a="自定义数据" data-a-b-c="abc数据" data-a-abc-efg="123456"></div>

//自定义标签属性 增删改查
console.log(box.dataset);
console.log(box.dataset.aBC);
console.log(box.dataset.aAbcEfg);
box.dataset["a"] = "123";
box.setAttribute("data-a-b-c", "321");
box.dataset["a"] = "";
box.setAttribute("data-a-abc-efg", "");
box.removeAttribute("data-a-b-c");
delete box.dataset["a"];

三、parse-stringify
parse与stringify函数对数据类型解析和编码类型

//后端返回给前端是字符串
let arrStr = '["张三", "李四"]';  //后端返回
console.log(JSON.parse(arrStr));

let json = '{"name":"张三", "age":18}';
console.log(JSON.parse(json));

//前端向后端发送数据，发送的也是字符串
let json1 = {name:"张三", age:18};
console.log(JSON.stringify(json1));

let arrStr1 = ['张三', '李四'];
console.log(JSON.stringify(arrStr1));

四、codeURL
decodeURL与encodeURL函数对url数据进行解码和编码

//URL编码
//url 是带http://协议的域名
// /后面是路由
// ?查询字符串 路由参数 通过不同的参数，返回不同的数据
let str = 'http://localhost:63342/19H5/2-%E6%96%B0%E5%A2%9E%E6%96%B9%E6%B3%95%E5%8F%8A%E5%8E%86%E5%8F%B2%E7%AE%A1%E7%90%86/4-codeURL.html?_ijt=vhvb3og64u4dmr07ir8jnl5gml';
//解码 解析人能够识别的字符
console.log(decodeURI(str));
//让计算机认识，编码，编译为计算机认识的语言
let str2 = "新增方法及历史管理";
console.log(encodeURI(str2));

五、btoa-atob
btoa与atob函数对base64数据进行解码和编码

//把数据编译成data：base64编码 A-Z a-z 0~9 +=/ 组成的字符串 64位
let str = "abcdefg";
console.log(window.btoa(str));  //编译成计算机识别的编码

let str2 = "YWJjZGVmZw=="  //解析成人能够识别的数据
console.log(atob(str2));

let str3 = "abcdefg字母";
//console.log(btoa(str3));  不能直接对中文编码
console.log(btoa(encodeURI(str3)));

let str4 = "YWJjZGVmZyVFNSVBRCU5NyVFNiVBRiU4RCVFNiVBRCU4QyVFNiU5QiVCMg==";
console.log(decodeURI(atob(str4)));

六、router

// 1.页面路由
// 会跳转另一个页面，会请求当前的url
//window.location.href = "http://www.baidu.com";

//2.hash路由
//在很多的框架里面都是用hash路由，监听hash值的变化去渲染不同的页面
//window.location.hash = "#hash";

//服务渲染 是路由交给前端处理
import React,{Componet} from "react";
//如果用浏览器路由，就需要自行用webpack去配置，一般会用脚手架开发（环境全部搭建好，直接使用）
import {BrowserRouter as Router, Route} from 'react-router-dom';//用于本地测试
import {HashRouter as Router, Route} from 'react-router-dom';

七、历史管理

//数据先行
let str = '';
for(let key in data){
  str += '<li data-name="' + key + '">' + key +'</li>';
}
list.innerHTML = str;

let li = document.querySelectorAll("li");
li.forEach((item, index)=>{
 item.onclick = function(e){
  e.stopPropagation();
  con.innerHTML = data[this.dataset['name']];
  let str = encodeURL(this.dataset['name']);
  if(window.history && window.history.pushState){
    //H5路由 添加历史记录
    window.history.pushState(str, 'title', 'abc'+str);
  }
 }
});
//PC端演示
//监听浏览器 后退 前进 按钮 改变con的值
window.onpopstate = function(e){
  if(e.state){
    con.innerHTML = data[decodeURI(e.state)]
  }
}
window.onhashchange = function(){
  console.log(decodeURI(window.location.hash));
}

window.history.back();  //返回
window.history.forward();  //前进
window.history.go(-1);  //返回上一级
window.history.go(1);  //前进下一级
window.history.go(0);  //刷新
window.location.reload();