130 lines
4.3 KiB
JavaScript
130 lines
4.3 KiB
JavaScript
class Util {
|
||
|
||
inject() {
|
||
Element.prototype.remove = function (removeClassName) {
|
||
this.classList.remove(removeClassName);
|
||
}
|
||
|
||
Element.prototype.add = function (addClassName) {
|
||
this.classList.add(addClassName);
|
||
}
|
||
|
||
HTMLElement.prototype.text = function (text) {
|
||
this.innerText = text;
|
||
}
|
||
|
||
HTMLElement.prototype.html = function (text) {
|
||
this.innerHTML += text;
|
||
}
|
||
}
|
||
|
||
//头部菜单
|
||
header(title = "", icon) {
|
||
$("body").html(`
|
||
<div class="pub_header">
|
||
<i class="iconfont icon-back1"></i>
|
||
<div class="text">${title}</div>
|
||
${icon}
|
||
</div>
|
||
`)
|
||
|
||
click($(".icon-back1"), function() {
|
||
history.back()
|
||
})
|
||
}
|
||
|
||
|
||
item(father, data) {
|
||
data.forEach(v => {
|
||
father.html(`
|
||
<div class="item">
|
||
<a href="./info.html?id=${v.id}&total=${v.total || v.shuliang}">
|
||
<div class="item_top">
|
||
<img src="${v.img_src || v.preview}" alt="">
|
||
<span>${v.total || v.shuliang}</span>
|
||
</div>
|
||
<div class="item_text">
|
||
<div class="title ellipsis">${v.title}</div>
|
||
<div class="model ellipsis">模特：${v.user || v.renwulist[0].name}</div>
|
||
<div class="source ellipsis">机构：${v.source || v.jigoulist[0].name}</div>
|
||
</div>
|
||
</a>
|
||
<div class="item_tag">
|
||
${(v.biaoqianlist || v.tags).map(j => {
|
||
return `<div class="tage_item">${j.name || j.title}</div>`
|
||
}).toString().replaceAll(",", "")
|
||
}
|
||
</div>
|
||
</div>
|
||
`)
|
||
})
|
||
}
|
||
|
||
//底部导航菜单
|
||
footer() {
|
||
var ul = `
|
||
<ul class="footer">
|
||
${config.footerList.map((v, i) => {
|
||
//用map进行循环 循环里面的首个子元素
|
||
return `<li class="${location.href.includes(v.url) ? 'active' : ''}">
|
||
<a href="${v.url}">
|
||
<i class="iconfont ${v.icon}"></i>
|
||
<p>${v.title}</p>
|
||
</a>
|
||
</li>`
|
||
// 用 location方法得到当前地址栏地址 判断是否包含includes当前的短地址 如果是添加active 否则就不添加 返回li标签
|
||
}).toString().replaceAll(",", "") //要把map转换数组中的逗号去掉
|
||
}
|
||
</ul>
|
||
`;
|
||
|
||
$("body").html(ul)
|
||
//向页面添加ul
|
||
}
|
||
|
||
query(name) {
|
||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||
var r = window.location.search.substr(1).match(reg);
|
||
if (r != null) return unescape(r[2]); return null;
|
||
}
|
||
|
||
/**
|
||
* className 可能的类型：
|
||
* 对象类型，本质上是 Element 类型
|
||
* 数组类型，本质上是 NodeList 类型
|
||
*/
|
||
click(className, callback) {
|
||
// 不管是 Element 还是 NodeList 都统一转化为 Array类型
|
||
// 但如果 className 是 Element 类型，那么转换后数组为空：[]
|
||
// 如果 className 是 NodeList 类型，那么转换后数组不为空: [ Element, Element ]
|
||
// 因为已经都是数组，所以无需：Array.isArray() 来判断是否是数组了
|
||
// 只需要判断数值是否有数据即可
|
||
var domArr = Array.from(className);
|
||
if (domArr.length != 0) {
|
||
className.forEach((v, i) => {
|
||
v.onclick = function (e) {
|
||
v.index = i;
|
||
v.e = e;
|
||
callback.call(this)
|
||
}
|
||
})
|
||
} else {
|
||
className.onclick = function (e) {
|
||
className.e = e;
|
||
callback.call(this)
|
||
}
|
||
}
|
||
}
|
||
|
||
$(className) {
|
||
return document.querySelector(className)
|
||
}
|
||
|
||
_(className) {
|
||
return document.querySelectorAll(className)
|
||
}
|
||
}
|
||
|
||
var { $, _, click, inject, query, footer, item,header } = new Util()
|
||
|
||
inject()
|