一. 前言
首先，直接操作dom的编程方式已经成为过去，数据驱动才是正途！
其次，不一定非要舍弃jQuery，只是可以，选择权在自己手上！
下面只是就事论事
二. 落幕
2018年7月 全球最大的同性交友社区（Github）被微软收购后的 52 天，改版并放弃了 jQuery 。这一举动让我等搬运工陷入了沉思。
三.Why？
随着ECMAScript标准的更新，原生js已经可代替jQuery，给我babel一个面子，不要再说兼容不支持的话！
下面举两个比较常用的方面来说明：
- jQuery Api可以使用原生轻松实现
- 使用 fetch 来代替 ajax；
Fetch API 是基于 Promise 设计，更符合目前的异步解决方案。什么是目前的异步解决方案？翻看上一篇async & await
四.具体实现对比（部分）
1.选择器
//jq
$("#a .b");
//Native
document.querySelectorAll("#a .b");
2.插入
//jq
$(selector).append(html);
//prepend
//before
//after
//Native
document.querySelectorAll(selector).insertAdjacentHTML("beforeend", html);
//beforebegin 开始标签之前 before
//afterbegin 开始标签之后 prepend
//beforeend 结束标签之前 append
//afterbegin 结束标签之后 after
3.类操作
//jq
$(selector).addClass(className);
//hasClass
//removeClass
//toggleClass
//Native
document.querySelectorAll(selector).classList.add(className, className, className...);
//contains(className) 检测是否存在
//removeClass(className, className, className...) 删除
//toggle(className, true|false) 切换
4.ajax
//jq
$.ajax({
//.................
});
//Native
(async () => {
try{
const res = await req(url, {
headers: {
Accept: "text/html"}});
if(......){
.......
}
} catch {
}
}());
function req(url, data) {
//自己封装，仅供参考
let sendurl = url;
let setting = {
method: data.type ? data.type : "get",
headers: new Headers({
"Accept": "application/json, text/javascript, */*; q=0.01",
"Pragma": "no-cache",
"Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
"X-Requested-With": "XMLHttpRequest"
}),
credentials: "include"
};
if(data.headers){
const headers = setting.headers;
for(let attr in data.headers){
if(headers.has(attr)){
headers.set(attr, data.headers[attr]);
} else {
headers.append(attr, data.headers[attr]);
}
}
}
if (setting.method == "post") {
setting.body = data.param ? paramData(data.param) : "";
} else {
sendurl = sendurl + (data.param ? "?" + paramData(data.param) : "");
}
return fetch(sendurl, setting).then((response) => {
if (response.status >= 200 && response.status < 300) {
return response;
} else {
throw new Error(response.statusText);
}
}).then((response) => {
const accept = setting.headers.get("accept");
if(accept.includes("/json")){
return response.json();
} else if(accept.includes("/html")){
return response.text();
}
});
}
五.原生实现类jQuery的库
上手才是关键，下面实现了部分jQuery的Api（代码构建编译部分省略），可能功能有所差异，但是就是这个味儿~
<!DOCTYPE html>
<html lang="en">
<title>test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<head>
</head>
<body>
<div class="test" actid="111"></div>
</body>
<script>
class xy {
constructor(selector){
this.dom = document.querySelectorAll(selector);
this.length = document.querySelectorAll(selector).length;
}
eq(index){
this.dom = [this.dom[index]];
return this;
}
attr(name){
return this.dom[0].getAttribute(name);
}
children(index){
let childrenList = [];
for(let i = 0;i < this.dom.length;i++){
childrenList.push(this.dom[i].children);
}
let arr = [];
for(let i = 0;i < childrenList.length;i++){
arr.push(index != undefined ? childrenList[i][index] : childrenList[i]);
}
return arr.length > 1 ? arr : arr[0];
}
append(htmlStr){
// for(let i = 0;i < this.dom.length;i++){
// this.dom[i].insertAdjacentHTML("beforeend", htmlStr);
// }
this.circulationFun("dom.insertAdjacentHTML('beforeend', '" + htmlStr + "')");
}
html(htmlStr){
this.circulationFun("dom.innerHTML = '" + htmlStr.replace(/\s*/g,"") + "'");
}
remove(){
this.circulationFun("dom.parentNode.removeChild(dom)");
}
addClass(className){
this.classFun("add", className);
}
removeClass(className){
this.classFun("remove", className);
}
toggleClass(className){
this.circulationFun("dom.classList.toggle('" + className + "')");
}
classFun(order, className){
const classArr = className.split(" ");
let code = "dom.classList." + order + "(";
for(let i = 0;i < classArr.length;i++){
code += "'" + classArr[i] + "',";
}
code = code.substr(0, code.length - 1);
code += ")";
this.circulationFun(code);
}
circulationFun(code){
for(let i = 0;i < this.dom.length;i++){
new Function("dom", "i", code)(this.dom[i], i);
}
}
//你可以不停的去扩展
}
function $xy(selector){
return new xy(selector);
}
$xy(".test").attr("actid");
//output 111
</script>