first commit

历届学生/front-end-team-11/项目开发/上课项目/js项目封装/css/page/index.css

@@ -0,0 +1,6 @@
+@import "../public/_.css";
+
+h1 {
+    color: var(--themeColor);
+    font-size: var(--f24);
+}

历届学生/front-end-team-11/项目开发/上课项目/js项目封装/css/public/_.css

@@ -0,0 +1,4 @@
+@import "./color.css";
+@import "./size.css";
+@import "./utils.css";
+@import "./normalize.css";

历届学生/front-end-team-11/项目开发/上课项目/js项目封装/css/public/color.css

@@ -0,0 +1,3 @@
+:root {
+    --themeColor:red;
+}

历届学生/front-end-team-11/项目开发/上课项目/js项目封装/css/public/normalize.css

@@ -0,0 +1,356 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ body {
+    font-size: 0;
+ }
+ 
+ html {
+    line-height: 1; 
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+  
+  /* Sections
+     ========================================================================== */
+  
+  /**
+   * Remove the margin in all browsers.
+   */
+  
+  body,ul,li,p,h1,h2,h3,h4,h5,h6{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  
+  /**
+   * Render the `main` element consistently in IE.
+   */
+  
+  main {
+    display: block;
+  }
+  
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+  
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+  
+  /* Grouping content
+     ========================================================================== */
+  
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+  
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /* Text-level semantics
+     ========================================================================== */
+  
+  /**
+   * Remove the gray background on active links in IE 10.
+   */
+  
+  a {
+    background-color: transparent;
+    text-decoration: none;
+  }
+  
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+  
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+  
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+  
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /**
+   * Add the correct font size in all browsers.
+   */
+  
+  small {
+    font-size: 80%;
+  }
+  
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+  
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  
+  sub {
+    bottom: -0.25em;
+  }
+  
+  sup {
+    top: -0.5em;
+  }
+  
+  /* Embedded content
+     ========================================================================== */
+  
+  /**
+   * Remove the border on images inside links in IE 10.
+   */
+  
+  img {
+    border-style: none;
+  }
+  
+  /* Forms
+     ========================================================================== */
+  
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+  
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+  
+  /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+  
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+  
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+  
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+  
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+  
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+  
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+  
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+  
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+  
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+  
+  /**
+   * Correct the padding in Firefox.
+   */
+  
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+  
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+  
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+  
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+  
+  progress {
+    vertical-align: baseline;
+  }
+  
+  /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+  
+  textarea {
+    overflow: auto;
+  }
+  
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+  
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+  
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+  
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+  
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+  
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+  
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+  
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+  
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+  
+  /* Interactive
+     ========================================================================== */
+  
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+  
+  details {
+    display: block;
+  }
+  
+  /*
+   * Add the correct display in all browsers.
+   */
+  
+  summary {
+    display: list-item;
+  }
+  
+  /* Misc
+     ========================================================================== */
+  
+  /**
+   * Add the correct display in IE 10+.
+   */
+  
+  template {
+    display: none;
+  }
+  
+  /**
+   * Add the correct display in IE 10.
+   */
+  
+  [hidden] {
+    display: none;
+  }

历届学生/front-end-team-11/项目开发/上课项目/js项目封装/css/public/size.css

@@ -0,0 +1,15 @@
+:root {
+   --f12: 12px;
+   --f13: 13px;
+   --f14: 14px;
+   --f15: 15px;
+   --f16: 16px;
+   --f17: 17px;
+   --f18: 18px;
+   --f19: 19px;
+   --f20: 20px;
+   --f21: 21px;
+   --f22: 22px;
+   --f23: 23px;
+   --f24: 24px;
+}

历届学生/front-end-team-11/项目开发/上课项目/js项目封装/css/public/utils.css

@@ -0,0 +1,3 @@
+.clear {
+    clear: both;
+}

历届学生/front-end-team-11/项目开发/上课项目/js项目封装/js/config/index.js

@@ -0,0 +1,37 @@
+// 放程序配置的，比如接口地址
+var config = {
+    devBaseUrl: 'http://127.0.0.1:3000/api/json',
+    testBaseUrl: 'http://127.0.0.1:3000/api/json/test',
+    prodBaseUrl: 'http://www.abc.com/api/json',
+    stage: 'dev',  // dev test prod
+    urlList: {
+        classList: '/classList',
+        info: '/info',
+    },
+    getBaseUrl: function () {
+        switch (this.stage) {
+            case "dev":
+                return this.devBaseUrl;
+                break;
+            case "test":
+                return this.testBaseUrl;
+
+                break;
+            case "prod":
+                return this.prodBaseUrl;
+                break;
+
+            default:
+                break;
+        }
+    }
+}
+
+// 基地址
+// 三个
+//  dev 开发阶段 http://127.0.0.1:3000/api/json/dev
+//  test 测试阶段 http://127.0.0.1:3000/api/json/test
+//  prod 上线阶段 http://www.abc.com/api/json
+
+// http://127.0.0.1:3000/api/json   /classList
+// http://127.0.0.1:3000/api/json   /info

历届学生/front-end-team-11/项目开发/上课项目/js项目封装/js/http/index.js

@@ -0,0 +1,78 @@
+class Http {
+    defaultOption = {
+        timeout: 6000,
+        headers: {
+            'Content-Type': 'application/json;charset=utf-8'
+        }
+    }
+
+    constructor() {
+        this.xhr = new XMLHttpRequest()
+    }
+
+    get(par) {
+        return new Promise((success, error) => {
+            this.setOption(par)
+            let urlParams = ""
+            for (const key in par.data) {
+                urlParams += `&${key}=${par.data[key]}`
+            }
+            urlParams = urlParams.replace("&", "")
+            this.xhr.open("GET", `${config.getBaseUrl()}${par.url}?${urlParams}`)
+            this.xhr.timeout = this.defaultOption.timeout
+            this.setHeader(par.headers)
+            this.xhr.send()
+            this.statechange(success, error);
+        })
+    }
+
+    post(par) {
+        return new Promise((success, error) => {
+            this.setOption(par)
+            this.xhr.open("POST", par.url)
+            this.xhr.timeout = this.defaultOption.timeout
+            this.setHeader(par.headers)
+            this.xhr.send(JSON.stringify(par.data))
+            this.statechange(success, error);
+        })
+    }
+
+    setOption(par) {
+        this.defaultOption.timeout = par.timeout || this.defaultOption.timeout
+        // ....
+    }
+
+    setHeader(headerObject = {}) {
+        Object.assign(headerObject, this.defaultOption.headers)
+        for (const key in headerObject) {
+            this.xhr.setRequestHeader(key, headerObject[key]);
+        }
+    }
+
+    statechange(success, error) {
+        this.xhr.onreadystatechange = () => {
+            if (this.xhr.readyState == 4) {
+                if (this.xhr.status == 200) {
+                    let data = JSON.parse(this.xhr.response)
+                    switch (data.status) {
+                        case 200:
+                            success(data.result)
+                            break;
+                        case 404:
+                            alert(data.msg)
+                            console.error(this.xhr);
+                            throw new Error(data.msg)
+                            break;
+                        default:
+                            break;
+                    }
+
+                } else {
+                    error(this.xhr)
+                }
+            }
+        }
+    }
+}
+
+var http = new Http();

历届学生/front-end-team-11/项目开发/上课项目/js项目封装/js/page/index.js

@@ -0,0 +1,16 @@
+class Index {
+    constructor() {
+        // console.log(config.getBaseUrl());
+        this.getClassList()
+    }
+
+    async getClassList() {
+        let res = await indexServe.classList({
+            id: 253,
+            page: 1
+        });
+        console.log(res);
+    }
+}
+
+new Index()

历届学生/front-end-team-11/项目开发/上课项目/js项目封装/js/serve/index.js

@@ -0,0 +1,17 @@
+class IndexServe {
+
+    async classList(data = {}, headers = {}) {
+        return await http.get({
+            url: config.urlList.classList,
+            data,
+            headers
+        });
+    }
+
+    async activity() {
+
+    }
+
+}
+
+var indexServe = new IndexServe()

历届学生/front-end-team-11/项目开发/上课项目/js项目封装/js/utils/index.js

@@ -0,0 +1,56 @@
+class Utils {
+
+    $(className) {
+        return document.querySelector(className);
+    }
+
+    _(className) {
+        return document.querySelectorAll(className);
+    }
+
+
+    click(className, callback, type = "click",) {
+        $(`${className}`)[`on${type}`] = (event) => {
+            callback(event)
+        }
+    }
+
+    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;
+    }
+
+    customMethods() {
+        Element.prototype.add = function(className) {
+            this.classList.add(className)
+        }
+
+        Element.prototype.remove = function(className) {
+            this.classList.remove(className)
+        }
+
+        Element.prototype.none = function() {
+            this.style.display = "none"
+        }
+
+        Element.prototype.show = function() {
+            this.style.display = "block"
+        }
+
+        Element.prototype.toggle = function() {
+           if (this.style.display == "none") {
+            this.style.display = "block"
+           } else {
+             this.style.display = "none"
+           }
+        }
+    }
+
+
+}
+
+let { $, _, click, customMethods, query } = new Utils()
+customMethods()

历届学生/front-end-team-11/项目开发/上课项目/js项目封装/js/utils/rem.js

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

历届学生/front-end-team-11/项目开发/上课项目/js项目封装/page/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="../css/page/index.css">
+</head>
+<body>
+    <h1 class="clear">哈哈</h1>
+    
+</body>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/http/index.js"></script>
+<script src="../js/serve/index.js"></script>
+<script src="../js/page/index.js"></script>
+</html>