大量修改

js/utils/index.js

@@ -0,0 +1,161 @@
+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

js/utils/rem.js

@@ -0,0 +1,10 @@
+(function (w, d) {
+    function setSize() {
+        var screenWidth = d.documentElement.clientWidth;
+        var currentFontSize = (screenWidth * 100) / 750;
+        d.documentElement.style.fontSize = currentFontSize + "px";
+    }
+    w.addEventListener("resize", setSize);
+    w.addEventListener("pageShow", setSize);
+    w.addEventListener("DOMContentLoaded", setSize);
+})(window, document);