174 lines
5.1 KiB
JavaScript
174 lines
5.1 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, input = false) {
|
||
$("body").html(`
|
||
<div class="pub_header">
|
||
<i class="iconfont icon-back1"></i>
|
||
${!input ? `<div class="text">${title}</div>` : `<input class="searchInput" />`}
|
||
${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 `<a class="tage_item" href="./tag.html?id=${v.id}">${j.name || j.title}</a>`
|
||
}).toString().replaceAll(",", "")
|
||
}
|
||
</div>
|
||
</div>
|
||
`)
|
||
|
||
})
|
||
}
|
||
|
||
|
||
model(father, data) {
|
||
|
||
data.forEach(v => {
|
||
father.html(`
|
||
<div class="model">
|
||
<a href="./modelinfo.html?id=${v.id}&title=${v.title}">
|
||
<div class="model_top">
|
||
<img src="${v.img}" alt="">
|
||
<span>63套</span>
|
||
</div>
|
||
<div class="model_bottom">${v.title}</div>
|
||
</a>
|
||
</div>
|
||
`)
|
||
})
|
||
}
|
||
|
||
modelList(father, data) {
|
||
//最外层数组，是个对象
|
||
father.html(`
|
||
<img src="${data.model_info.portrait}" alt="">
|
||
<div class="name">
|
||
<p>${data.model_info.name}</p>
|
||
<p>${data.model_info.explain} </p>
|
||
</div>
|
||
|
||
`)
|
||
|
||
}
|
||
|
||
testModelList(father, data) {
|
||
//第二层，才是数组，只有数组才能循环
|
||
data.forEach((value, index) => {
|
||
father.html(`
|
||
<img src="${value.img_src}" alt="">
|
||
|
||
`)
|
||
|
||
})
|
||
|
||
}
|
||
|
||
|
||
|
||
footer() {
|
||
var ul = `
|
||
<ul class="footer">
|
||
${config.footerList.map((v, i) => {
|
||
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>`
|
||
}).toString().replaceAll(",", "")
|
||
}
|
||
</ul>
|
||
`;
|
||
|
||
$("body").html(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, model, modelList, testModelList } = new Util()
|
||
|
||
inject() |