Files
ClassContent/历届学生/front-end-team-10/项目练习/上课项目/失物招领/js/utils/index.js
2024-09-27 02:06:13 +08:00

135 lines
3.4 KiB
JavaScript

class Utils {
//渲染底部
footer() {
var html = `
<ul class="footer top">
${config.footerArr.forH(v => {
return `<li>
<a href="${v.href}" >
<img src="${v.img}" alt="">
<p class="${location.href.includes(v.href) ? 'active' : ''}">${v.title}</p>
</a>
</li>`
})}
</ul>
`
$("body").insertAdjacentHTML("beforeend", html);
}
//渲染广场页item
item(father, data) {
//console.log(data)
father.innerHTML = ""
data.forEach(v => {
father.innerHTML += `
<a href="" class="item_fz">
<div class="img">
<img src="./../img/img/show.jpg" alt="">
</div>
<p>${v.thing_title}</p>
<div class="user_info">
<img src="./../img/img/1.png" alt="">
<span>${v.user_name}</span>
</div>
</a>
`
})
}
// item(father, data) {
// console.log(data)
// father.innerHTML = ""
// data.forEach(v => {
// father.innerHTML += `
// <div class="item">
// <div class="img">
// <img src="./../img/img/show.jpg" alt="">
// </div>
// <p>${v.thing_title}</p>
// <div class="user_info">
// <img src="./../img/img/1.png" alt="">
// <span>${v.user_name}</span>
// </div>
// </div>
// `
// })
// }
title(text = "", leftIcon = "",) {
var html = `
<div class="pub_title">
${leftIcon}
<span>${text}</span>
<div></div>
</div>
`
$("body").insertAdjacentHTML("beforeend", html);
click(".icon-fanhui", () => {
history.back()
})
}
click(className, callback) {
_(className).forEach((v, i) => v.onclick = () => callback(v, i))
}
query(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
let r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
};
return null;
}
cover() {
// 对map进行重写
// map的实现原理
// function a(callback) {
// return callback(v).toString()
// }
// var c = a( function (v) {
// return "v"
// } )
Array.prototype.forH = function (callback) {
var res = []
for (var index = 0; index < this.length; index++) {
res.push(callback(this[index]))
}
return res.toString().replaceAll(",", "")
}
// 其他很多重写
}
$(className) {
return document.querySelector(className)
}
_(className) {
return document.querySelectorAll(className)
}
}
var {
footer, $, _, query,
cover, click, item, items,
title
} = new Utils();
cover()