first commit

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

@@ -0,0 +1,64 @@
+class Ajax {
+    constructor() {
+        this.ajax = new XMLHttpRequest();
+    }
+
+    /**
+     * 
+     * @param {*} params 
+     * {
+     *   url: '',
+     *   data: {
+     *     id: 1,
+     *     page: 2
+     *   },
+     *   header: {
+     *     'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+     *   }
+     * }
+     */
+    get(params) {
+        return new Promise((success, error) => {
+            var str = ""
+            for (const key in params.data) {
+                str += `&${key}=${params.data[key]}`
+            }
+
+            str = str.replace("&", "?")
+            this.ajax.open("GET", `${config.checkUrl()}${params.url}${str}`)
+            this.ajax.send()
+            this.readystatechange(success, error)
+        })
+    }
+
+    post() { }
+
+    readystatechange(success, error) {
+        this.ajax.onreadystatechange = () => {
+            if (this.ajax.readyState == 4) {
+                if (this.ajax.status == 200) {
+                    var data = JSON.parse(this.ajax.responseText)
+                    success(this.checkStatus(data))
+                    
+                } else {
+                    error(this.ajax)
+                }
+            }
+        }
+    }
+
+    checkStatus(data) {
+        switch (data.status) {
+            case 200:
+                return data.result
+                break;
+        
+            case 404:
+                alert(data.msg);
+                throw new Error(data.msg)
+             break;
+            default:
+                break;
+        }
+    }
+}

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

@@ -0,0 +1,40 @@
+var config = {
+    devBaseUrl: 'http://127.0.0.1:3000/api/json', // 开发阶段
+    testBaseUrl: 'http://127.0.0.1:3000/api/test', // 测试阶段
+    prodBaseUrl: 'http://192.168.31.100:3000/api/json', // 上线阶段
+    stage: 'dev', // dev  test   prod
+    apiList: {
+        index: '/index',
+        info: '/info',
+        classList: '/class',
+        classListArr: '/classList',
+        model: `/allModel`,
+        search: '/search',
+        mechanism :  '/mechanism',
+        modelList:'/modelList',
+        collection : '/collection',
+        jigouxiangqing : '/mechanismList',
+    },
+    footerList: [
+        { title: '首页', icon: 'icon-home', url: 'index.html' },
+        { title: '机构', icon: 'icon-jigou', url: 'mechanism.html' },
+        { title: '模特', icon: 'icon-me', url: 'model.html' },
+        { title: '我的', icon: 'icon-wo', url: 'my.html' },
+    ],
+    checkUrl: function () {
+        switch (this.stage) {
+            case "dev":
+                return this.devBaseUrl
+                break;
+            case "test":
+                return this.testBaseUrl
+                break;
+            case "prod":
+                return this.prodBaseUrl
+                break;
+
+            default:
+                break;
+        }
+    }
+}

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

@@ -0,0 +1,38 @@
+class collection {
+    constructor() {
+        header("我的收藏")
+        this.getlike()
+        this.like = JSON.parse(localStorage.getItem("like"))
+        this.renderlike()
+    }
+
+
+    async getlike() {
+        var self = this;
+        if (localStorage.getItem("like") == null) {
+            var res = await indexServe.classList();
+            this.like = res.like
+            localStorage.setItem("like", JSON.stringify(this.like))
+            console.log("没有数据，重新获取成功")
+        }
+        else {
+            this.like = JSON.parse(localStorage.getItem("like"))
+            console.log("有数据，获取成功")
+        }
+    }
+    renderlike() {
+        this.like.forEach(v => {
+            $(".content").html
+            (`<li>${v}</li>`)
+        });
+    }
+}
+
+new collection
+
+
+
+
+
+
+

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

@@ -0,0 +1,78 @@
+class Edit {
+    constructor() {
+        header("分类编辑")
+        this.principal = JSON.parse(localStorage.getItem("principal"))
+        this.additional = JSON.parse(localStorage.getItem("additional"))
+        this.renderPrincipal()
+        this.renderAdditional()
+    }
+
+
+    renderPrincipal() {
+        this.principal.forEach(v => {
+            $(".principal").html(`
+                <li>${v.title}</li>
+            `)
+        });
+        this.PrincipalClick()
+    }
+
+    PrincipalClick() {
+        var self = this;
+        click(_(".principal li"), function () {
+            if (this.index != 0) {
+                console.log("index: ",this.index);
+
+                // var oldArr = JSON.parse(JSON.stringify(self.principal));
+
+                self.additional.push(self.principal[this.index])
+                var deleteAItem = self.principal.splice(this.index, 1)
+
+
+                localStorage.setItem("principal", JSON.stringify(self.principal))
+                localStorage.setItem("additional", JSON.stringify(self.additional))
+
+                $(".additional").html(`
+                    <li>${deleteAItem[0].title}</li>
+                `)
+                self.AdditionalClick()
+                $(".principal").removeChild(this)
+                self.PrincipalClick()
+
+            }
+        })
+    }
+
+    renderAdditional() {
+        this.additional.forEach(v => {
+            $(".additional").html(`
+                <li>${v.title}</li>
+            `)
+        });
+        this.AdditionalClick()
+    }
+
+
+    AdditionalClick() {
+        var self = this;
+        click(_(".additional li"), function () {
+
+            self.principal.push(self.additional[this.index])
+            var deleteAItem = self.additional.splice(this.index, 1)
+
+
+            localStorage.setItem("principal", JSON.stringify(self.principal))
+            localStorage.setItem("additional", JSON.stringify(self.additional))
+
+            $(".principal").html(`
+                <li>${deleteAItem[0].title}</li>
+            `)
+            self.PrincipalClick();
+            $(".additional").removeChild(this)
+            self.AdditionalClick();
+
+        })
+    }
+}
+
+new Edit()

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

@@ -0,0 +1,132 @@
+class Index {
+    constructor () {
+        this.index = 0;
+        this.principal = []
+
+        footer();
+        this.getClassList()
+    }
+
+
+    async getClassList() {
+    
+        var self = this;
+        if (localStorage.getItem("principal") == null) {
+            var res = await indexServe.classList();
+            this.principal = res.principal
+            localStorage.setItem("principal", JSON.stringify(this.principal))
+            localStorage.setItem("additional", JSON.stringify(res.additional))
+        } else {
+            this.principal = JSON.parse(localStorage.getItem("principal"))
+        }
+        console.log("123456",this.principal)
+
+
+        this.principal.forEach((v,i) => {
+            $(".header_menu ul").html(`
+              <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
+            `)
+
+            $(".page_wrapper").html(`
+               <div class="swiper-slide">
+                  <div class="list">
+                  </div>
+                </div>
+            `);
+
+            _(".swiper-wrapper .swiper-slide").forEach(v => {
+                v.onscroll = () => {
+                    const {clientHeight, scrollHeight, scrollTop} = v;
+                    const distance = scrollHeight- scrollTop - clientHeight;
+                    if(distance <= 0) {
+                        // 首页
+                        console.log("滚动到底部...");
+                        if (this.index == 0) {
+                            this.getIndex()
+                        } else {
+                            this.principal[this.index].page += 1
+                            if (this.principal[this.index].page <= this.principal[this.index].total_page) {
+                                this.getClassListArr("more")
+                            } else {
+                                console.log("已经没有数据了！！！");
+                            }
+                        }
+                    }
+                }
+            })
+        })
+
+        click(_(".header_menu ul li"), function () {
+            self.changeActive(this.index)
+        })
+
+        this.getIndex()
+        this.initPage()
+    }
+
+    async getClassListArr(type = "click") {
+        var getData = async () => {
+            var res = await indexServe.classListArr({
+                page: this.principal[this.index].page,
+                id: this.principal[this.index].id
+            });
+
+            this.principal[this.index].total_page = res.total_page
+
+            this.principal[this.index].content = [
+                ...this.principal[this.index].content,
+                ...res.data
+            ];
+
+            item(
+                _(".swiper-slide .list")[this.index],
+                // this.principal[this.index].content
+                res.data
+            )
+        }
+
+        if (type == "click") {
+            if (this.principal[this.index].id != -1) {
+                if (this.principal[this.index].content.length == 0) {
+                    getData()
+                }
+            }
+        } else {
+            getData()
+        }
+    }
+
+    changeActive(index) {
+        this.index = index
+        _(".header_menu ul li").forEach(v => v.remove("active"))
+        _(".header_menu ul li")[index].add("active")
+        this.mySwiper.slideTo(index)
+    }
+
+    async getIndex() {
+        var res = await indexServe.index();
+        this.principal[this.index].content = [
+            ...this.principal[this.index].content,
+            ...res.list
+        ];
+
+        item(_(".swiper-slide .list")[this.index], res.list)
+
+    }
+
+    initPage() {
+        var self = this;
+        this.mySwiper = new Swiper('.swiper-container', {
+            direction: 'horizontal', 
+            on:{
+                slideNextTransitionEnd: function() {
+
+                  self.changeActive(this.activeIndex)
+                  self.getClassListArr()
+                },
+            },
+          })  
+    }
+}
+
+new Index()

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

@@ -0,0 +1,96 @@
+class Info {
+    // a = {
+    //     id: query("id"),
+    //     total: query("total")
+    // }
+    constructor() {
+        header("详情", `<i class="iconfont icon-xin "></i>
+        <i class="iconfont icon-aixin hidden"></i>`)
+        this.getInfo();
+        this.Like()
+    }
+
+    Like() {
+        click($(".icon-xin"), function () {
+            console.log(111);
+            if ($(".icon-xin")) {
+                $(".icon-aixin").remove(hidden)
+                // $(".icon-xin").addClass(hidden)
+            }
+        })
+    }
+    // setLike(a) {
+    //     const like = this.getLike()
+    //     if (!!like && Array.isArray(like)) {
+    //         like.push(this.a)
+    //         localStorage.setItem("like", JSON.stringify(like))
+    //     } else {
+    //         localStorage.setItem("like", JSON.stringify([this.a]))
+    //     }
+    // }
+
+    // getLike() {
+    //     const like = JSON.parse(localStorage.getItem("like"))
+    //     if (!!like && Array.isArray(like)) {
+    //         return like
+    //     }
+    //     return []
+    // }
+
+    // removeLinke(a) {
+    //     // let like = this.getLike()
+    //     // like = like.filter(v => v !== id)
+    //     this.a.splice(this.index, 1)
+    //     //     localStorage.removeItem("like", JSON.stringify(this.a))
+    // }
+
+
+    // changeLikeStyle() {
+    //     const collectionDom = $("#collection")
+    //     const id = query("id")
+    //     const like = this.getLike()
+    //     if (like.indexOf(id) === -1) {
+    //         collectionDom.remove("icon-aixin")
+    //         collectionDom.add("icon-xin")
+    //     } else {
+    //         collectionDom.remove("icon-xin")
+    //         collectionDom.add("icon-aixin")
+    //     }
+    // }
+
+
+    // onLinke() {
+    //     const id = query("id")
+    //     const like = this.getLike()
+    //     if (like.indexOf(id) === -1) {
+    //         this.setLike(id)
+    //         this.changeLikeStyle()
+    //     } else {
+    //         this.removeLinke(id)
+    //         this.changeLikeStyle()
+    //     }
+    // }
+
+    // Like() {
+    //     const collectionDom = $("#collection")
+    //     this.changeLikeStyle()
+    //     click(collectionDom, () => {
+    //         this.onLinke()
+    //     })
+    // }
+
+    async getInfo() {
+        var res = await indexServe.info({
+            id: query("id"),
+            quantity: query("total")
+        });
+
+        res.forEach(v => {
+            $(".content").html(`<img src="${v}" alt="">`)
+        });
+
+        //console.log("res: ", res);
+    }
+}
+
+new Info();

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

@@ -0,0 +1,63 @@
+
+class jigouxiangqing {
+    constructor() {
+        header("机构详情")
+        this.page = 1
+
+        this.getjigouxiangqing();
+    }
+    async getjigouxiangqing() {
+        var that = this
+        var data = {
+            id: query("id"),
+            page: that.page
+        }
+        var res = await indexServe.jigouxiangqing(data)
+        console.log(res);
+        res.data.forEach((value, index) => {
+            console.log(value.tags)
+            $(".gggg").html(`
+            <div class="ccccc">
+                <img src="${value.preview}" alt="">
+                <div class="list">
+                    <span class="bb">${value.title}</span>
+                    <p class="qq">${value.user}</p>
+                </div>
+            </div>
+          `)
+        })
+        // res.data.forEach((v) => {
+        //     $(".list").html(`
+        //     <a href="./jigouxiangqing.html?id=${v.id}&title=${v.title}" class="shuliang">
+        //         <div class="title">${v.title}</div>
+        //         <div class="number">${v.id}套</div>
+        //     </a>
+        //   `)
+        // })
+        // item($(".content .list"),
+
+        // res.data)
+        // this.principal[this.index].content
+
+
+        // console.log("123",res);
+    }
+     //请求更多数据
+     hotscroll() {
+        console.log("$('.hot')",$('.hot'));
+        $('.hot').onscroll = () => {
+            const {clientHeight, scrollHeight, scrollTop} = $('.hot');
+            const distance = scrollHeight- scrollTop - clientHeight;
+            console.log(clientHeight, scrollHeight, scrollTop);
+                if(distance <= 10){
+                    console.log("滚动到底部...");
+                    this.getModel()
+                }
+        }
+
+
+    }
+}
+
+
+new jigouxiangqing()

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

@@ -0,0 +1,24 @@
+class Mechanism {
+    constructor() {
+        header("机构")
+        footer();
+        this.getmechanism()
+    }
+
+    async getmechanism() {
+        var res = await indexServe.mechanism({
+        });
+
+        console.log(res);
+
+        res.forEach((v) => {
+            $(".list").html(`
+            <a href="./jigouxiangqing.html?id=${v.id}&title=${v.title}" class="shuliang">
+                <div class="title">${v.title}</div>
+                <div class="number">${v.id}套</div>
+            </a>
+          `)
+        })
+    }
+}
+new Mechanism()

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

@@ -0,0 +1,39 @@
+class Model {
+    constructor () {
+
+        header("模特")
+        footer();
+        this.getModel() 
+        this.hotscroll()
+    }
+
+    //渲染页面
+    async getModel() {
+        var res = await indexServe.model()
+        
+        console.log(res);
+
+        model($('.hot_modelAll'),res)
+    };
+
+
+    //请求更多数据
+    hotscroll() {
+        console.log("$('.hot')",$('.hot'));
+        $('.hot').onscroll = () => {
+            // console.log('123');
+            const {clientHeight, scrollHeight, scrollTop} = $('.hot');
+            const distance = scrollHeight- scrollTop - clientHeight;
+            console.log(clientHeight, scrollHeight, scrollTop);
+                if(distance <= 10){
+                    console.log("滚动到底部...");
+                    this.getModel()
+                }
+        }
+
+
+    }
+
+}
+
+new Model()

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

@@ -0,0 +1,47 @@
+class Modelinfo {
+    constructor() {
+        //加载的数组项
+        this.list = [];
+        //是否首次加载
+        this.show = true
+        this.page = 1
+        this.getmodelList();
+    }
+
+    async getmodelList() {
+        //this指向 click 有function限定了作用域 在里面this指向了他本身   定义参数 self 解绑作用域
+        var self = this;
+        var res = await indexServe.modelList({
+            id: query("id"),
+            page: this.page
+        })
+        //每次请求接口，把数组累加
+        res.data.forEach(element => {
+            this.list.push(element)
+        });
+        //判断是否第一次请求，是 === 渲染简介 否 === 不渲染
+        if (this.show) { 
+            modelList($('.title'),res) 
+        }
+        header(res.model_info.name)
+        //渲染list
+        testModelList($('.test'), this.list)  
+        //绑定点击事件
+        click($(".icon-xiangxia"), function () {
+            //判断当前页数 是否 小于总页数 是 页数page加1  否  提示用户已经加载到最底部
+            if (self.page < res.total_page) {
+                self.page += 1 
+                self.show = false
+                self.getmodelList()
+            }else{
+                alert("骚年，已经到底了")
+            }
+           
+       })
+       
+    }
+   
+    
+}
+
+new Modelinfo();

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

@@ -0,0 +1,14 @@
+class my {
+    constructor() {
+        header("我的收藏")
+        footer();
+    }
+
+   
+}
+new my()
+
+click (_(".my_bottom li"), function() {
+    console.log(config.checkUrl())
+   
+})

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

@@ -0,0 +1,40 @@
+class Search {
+    constructor(){
+        header("",'<i class="iconfont icon-sousuo" ></i>',true)
+        this.page = 1;
+        this.keyword = '';
+        this.clickIcon()
+        this.clickTag()
+        // this.Search()
+    }
+    async Search() {
+        var res = await searchServe.searchData({
+            page:this.page,
+            keyword:this.keyword
+        })
+        console.log('res',res);
+        if(res.length > 0){
+            item($('.itemBox'),res)
+        }
+    }
+    clickIcon(){
+        var that = this
+        click(_('.icon-sousuo'),function(){
+            $('.itemBox').innerHTML = ''
+            // console.log('搜素',$('.searchInput').value);
+            that.keyword = $('.searchInput').value
+            that.Search()
+        })
+    }
+    clickTag(){
+        var that = this
+        click(_('.menu_list li'),function(){
+            $('.itemBox').innerHTML = ''
+            console.log('this',this.innerText);
+            $('.searchInput').value = this.innerText
+            that.keyword = this.innerText
+            that.Search()
+        })
+    }
+}
+new Search()

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

@@ -0,0 +1,27 @@
+class Model {
+    constructor() {
+        this.page = 1
+        header("分类")
+        this.getTagList()
+    }
+
+    async getTagList() {
+        var self = this;
+        var res = await indexServe.classListArr({
+            page: this.page,
+            id: query("id")
+        })
+        item($(".tag"), res.data)
+        this.onscroll()
+
+    }
+    onscroll() {
+        $(".tag ").onscroll = function () {
+            const { clientHeight, scrollHeight, scrollTop } = v;
+            console.log(clientHeight, scrollHeight, scrollTop);
+        }
+
+    }
+
+}
+new Model()

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

@@ -0,0 +1,5 @@
+class CarServe {
+
+}
+
+new CarServe();

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

@@ -0,0 +1,85 @@
+class IndexServe {
+
+    async index(data = {}) {
+        var ajax = new Ajax()
+        var res = await ajax.get({
+            url: config.apiList.index,
+            data: data,
+        });
+        ajax = null;
+        return res
+    }
+
+    async classListArr(data = {}) {
+        return await (new Ajax()).get({
+            url: config.apiList.classListArr,
+            data: data,
+        });
+    }
+
+    async classList(data = {}) {
+        var res = await (new Ajax()).get({
+            url: config.apiList.classList,
+            data: data,
+        });
+
+        res.principal.unshift({
+            id: -1,
+            page: 1,
+            title: "首页",
+        })
+
+        res.principal.forEach(v => {
+            v.content = [];
+            v.page = 1;
+            v.total_page = 0
+        })
+
+        res.additional.forEach(v => {
+            v.content = [];
+            v.page = 1;
+            v.total_page = 0
+        })
+
+        return res;
+    }
+
+    async info(data = {}) {
+        return await (new Ajax()).get({
+            url: config.apiList.info,
+            data: data,
+        });
+    }
+    async mechanism(data = {}) {
+        return await (new Ajax()).get({
+            url: config.apiList.mechanism,
+            data: data,
+        });
+    }
+
+
+    async model(data = {}) {
+        return await (new Ajax()).get({
+            url: config.apiList.model,
+            data: data,
+        });
+    }
+
+    async modelList(data = {}) {
+        return await (new Ajax()).get({
+            url: config.apiList.modelList,
+            data: data,
+        });
+    }
+
+    async jigouxiangqing(data = {}) {
+        return await (new Ajax()).get({
+            url: config.apiList.jigouxiangqing,
+            data: data,
+        });
+    }
+
+}
+
+
+var indexServe = new IndexServe()

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

@@ -0,0 +1,12 @@
+class SearchServe{
+    async searchData(data = {}) {
+        var ajax = new Ajax()
+        var res = await ajax.get({
+            url: config.apiList.search,
+            data: data,
+        });
+        ajax = null;
+        return res
+    }
+};
+var searchServe = new SearchServe()

历届学生/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);