first commit

历届学生/font-end-nine/项目练习/上课项目/枸杞社/js/util/index.js

@@ -0,0 +1,174 @@
+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()

历届学生/font-end-nine/项目练习/上课项目/枸杞社/js/util/rem.js

@@ -0,0 +1,12 @@
+; (function (doc, win, undefined) {
+    var docEl = doc.documentElement,
+        resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
+        recalc = function () {
+            var clientWidth = docEl.clientWidth;
+            if (clientWidth === undefined) return;
+            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
+        };
+    if (doc.addEventListener === undefined) return;
+    win.addEventListener(resizeEvt, recalc, false);
+    doc.addEventListener('DOMContentLoaded', recalc, false)
+})(document, window);