first commit

历届学生/fontendsix/项目练习/上课项目/屁桃儿/js/utils/index.js

@@ -0,0 +1,151 @@
+class Utils {
+
+    $(className) {
+        return document.querySelector(className)
+    }
+
+    _(className) {
+        return document.querySelectorAll(className)
+    }
+
+
+    footer() {
+        var currentPath = location.href;
+        var footerHtml = `
+        <ul class="footer">
+         ${config.footerArr.map((v, i) => {
+            return `
+                    <li class="${currentPath.includes(v.path) ? 'footer_active' : ''}">
+                        <a href="${v.path}">
+                            <i class="iconfont ${v.icon}"></i>
+                            <span>${v.title}</span>
+                        </a>
+                    </li>
+                `
+        }).toString().replaceAll(",", "")
+            }
+         </ul>
+        `;
+
+        $("body").insertAdjacentHTML("beforeend", footerHtml)
+    }
+
+    item(arr, father) {
+        var html = `
+        <ul>
+        ${arr.map((v, i) => {
+            return `
+              <li>
+                    <div class="newest_img">
+                        <a href="./info.html?id=${v.id}">
+                            <img  src="${v.preview || v.img_src}"
+                                alt="${v.title}">
+                        </a>
+                        <span>${v.total || v.shuliang}P</span>
+                    </div>
+                    <div class="newest_text">
+                        <a href="./info.html?id=${v.id}">
+                            <p class="t">${v.title}</p>
+                            ${
+                                v.hasOwnProperty("source")
+                                ? `<p class="source">${v.source}</p>`
+                                : ''
+                            }
+                        </a>
+                            ${v.hasOwnProperty("tags")
+                            ? `<div class="tags">
+                            ${v.tags.map(item => {
+                                return `
+                                            <div class="tags_item">
+                                        <a href="./tag_list.html?id=${item.id}&title=${item.title}">${item.title}</a>
+                                        </div>
+                                         `
+                            }).toString().replaceAll(",", "")
+                                }
+                            </div>`
+                            : ''
+                            }
+                    </div>
+                </li>
+              `;
+        }).toString().replaceAll(",", "")
+            }
+        </ul>
+        `;
+        father.innerHTML += html;
+    }
+
+    mechanismList(arr, father){
+        var html = `
+        <ul class="mechanism_list">
+        ${arr.map((v, i) => {
+            return `
+            <li>
+            <a href="./mechanism_info.html?id=${v.id}&t=${v.title}">
+                <p>${v.title}</p>
+                <span>${v.quantity}</span>
+            </a>
+        </li>
+              `;
+        }).toString().replaceAll(",", "")
+            }
+        </ul>
+        `;
+        father.innerHTML += html;
+    }
+
+
+    // model(arr, father, test = "") {
+    //     var html = `
+    //     <div class="similar item_list padding_30">
+    //     ${arr.map((v, i) => {
+    //         return `
+    //         <div class="title">${test}</div>
+    //         <div class="item">
+    //                 <div class="top">
+    //                     <img src="${v.preview}" alt="${v.title}">
+    //                     <span>${v.total}</span>
+    //                 </div>
+    //                 <p>${v.title}</p>
+    //             </div>
+    //     `;
+    //       }).toString().replaceAll(",", "")
+    //    }
+    //    </div>
+    //    `;
+    //     father.innerHTML += html;
+    // }
+
+    header(title, icon = "") {
+        var html = `
+        <div class="header_theme1 theme_color">
+            <div class="header_theme1_left">
+                <i class="iconfont icon-back1"></i>
+                <span>${title}</span>
+            </div>
+            <div class="header_theme1_right">
+                ${icon}
+            </div>
+        </div>
+        `;
+        $("body").innerHTML = html + $("body").innerHTML;
+
+        $(".header_theme1_left .icon-back1").onclick = () => history.back()
+    }
+
+    $_GET(variable) {
+        var query = window.location.search.substring(1);
+        var vars = query.split("&");
+        for (var i = 0; i < vars.length; i++) {
+            var pair = vars[i].split("=");
+            if (pair[0] == variable) { return pair[1]; }
+        }
+        return (false);
+    }
+}
+
+// 解构赋值
+var { $, footer, _, item, $_GET, header, mechanismList,model} = new Utils()
+
+
+