161 lines
4.7 KiB
JavaScript
161 lines
4.7 KiB
JavaScript
class Utils {
|
|
|
|
// 类被初始化的时候，构造函数就会自己运行了
|
|
constructor() {
|
|
this.newMap()
|
|
}
|
|
|
|
newMap() {
|
|
Array.prototype.maps = function (callback) {
|
|
// var callback = e => `<li>${e}</li>`
|
|
var res = []
|
|
for (let i = 0; i < this.length; i++) {
|
|
var ddd = callback(this[i], i, this)
|
|
res.push(ddd)
|
|
}
|
|
return res.toString().replaceAll(",", "")
|
|
}
|
|
}
|
|
|
|
$(className) {
|
|
var classNameArr = className.split(" ");
|
|
if (classNameArr.length == 1) {
|
|
var isAll = document.querySelectorAll(classNameArr[0])
|
|
return isAll.length == 1 ? isAll[0] : isAll
|
|
} else {
|
|
var lastChild = classNameArr[classNameArr.length - 1];
|
|
var lastChildFather = classNameArr[classNameArr.length - 2];
|
|
|
|
var lastChildFatherDOM = document.querySelector(lastChildFather);
|
|
|
|
var key = "";
|
|
lastChild.includes(".")
|
|
? (key = "className")
|
|
: lastChild.includes("#")
|
|
? (key = "id")
|
|
: (key = "localName");
|
|
|
|
var res = Array.from(lastChildFatherDOM.children).filter(
|
|
(e) => e[key] == lastChild.replace(".", "")
|
|
);
|
|
}
|
|
|
|
return res.length <= 1 ? res[0] : res;
|
|
}
|
|
|
|
footer() {
|
|
// ajax 接口返回的底部导航数据
|
|
let arr = [
|
|
{ icon: 'icon-shouye', title: '首页', href: 'index.html' },
|
|
{ icon: 'icon-changchenglogo', title: '分类', href: 'domestic.html' },
|
|
{ icon: 'icon-hot', title: '热门', href: 'hot.html' },
|
|
{ icon: 'icon-wo', title: '我的', href: 'me.html' },
|
|
]
|
|
let body = this.$("body")
|
|
|
|
// TODO innerHTML 会导致事件丢失
|
|
body.innerHTML += `
|
|
<ul class="footer fixed flex ja ais">
|
|
${arr.maps(v => {
|
|
return `
|
|
<li class="${location.pathname.includes(v.href) ? 'active' : ''}">
|
|
<a href="${v.href}">
|
|
<i class="iconfont ${v.icon}"></i>
|
|
<p>${v.title}</p>
|
|
</a>
|
|
</li>
|
|
`
|
|
})
|
|
}
|
|
|
|
</ul>
|
|
`
|
|
}
|
|
|
|
item(dom, data, theme = 1) {
|
|
$(dom).innerHTML = data.maps(v => {
|
|
return `
|
|
<li class="${theme == 2 ? 'item-theme-horizontally' : ''}">
|
|
<a href="./info.html?id=${v.id}&time=${v.time}">
|
|
<img src="${v.thumbnail}" alt="">
|
|
<div class="r">
|
|
<div class="text ellipsis">${v.title}</div>
|
|
<div class="desc flex ais js">
|
|
<div class="time">${v.time}</div>
|
|
<div class="view flex ais">
|
|
<i class="iconfont icon-yanjing"></i>
|
|
<span>${v.view}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
`
|
|
})
|
|
}
|
|
|
|
|
|
query(name) {
|
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
|
var r = window.location.search.substr(1).match(reg);
|
|
if (r != null) return decodeURIComponent(r[2]); return null;
|
|
}
|
|
|
|
|
|
|
|
|
|
header(content, action, back = `<i class="iconfont icon-fanhui"></i>`) {
|
|
this.$("body").insertAdjacentHTML('afterbegin', `
|
|
<div class="header fixed flex ais flex1 border-box p15">
|
|
${back}
|
|
${content}
|
|
${action}
|
|
</div>
|
|
`);
|
|
|
|
this.$(".icon-fanhui").onclick = () => {
|
|
history.back()
|
|
}
|
|
}
|
|
|
|
|
|
async navShare(title = "", text = "", url = "") {
|
|
console.log(navigator.share && navigator.canShare);
|
|
if (navigator.share && navigator.canShare) {
|
|
await navigator.share({
|
|
title, text, url
|
|
});
|
|
} else {
|
|
alert(`当前浏览器版本不支持分享此功能`);
|
|
}
|
|
}
|
|
|
|
|
|
show(className) {
|
|
this.$(className).style.display = "block"
|
|
}
|
|
|
|
hidden(className) {
|
|
this.$(className).style.display = "none"
|
|
}
|
|
|
|
|
|
setItem(key, value) {
|
|
localStorage.setItem(key, JSON.stringify(value))
|
|
}
|
|
|
|
getItem(key) {
|
|
let local = localStorage.getItem(key)
|
|
return local ? JSON.parse(local) : []
|
|
}
|
|
}
|
|
|
|
let u = new Utils
|
|
let util = u, { $, item, query, navShare, getItem, setItem } = u
|
|
|
|
// let util = new Utils
|
|
// let $ = (new Utils).$
|
|
|
|
// util.$
|
|
// $
|
|
// footer
|