WEBAPI阶段总结

文章	评论	标签
54	257	48

昨天也是出成绩了，例行惯例总结一下，这次的题该说不说不算很难，就是因为考试题很老了，考了很多旧的语法，所以很多人都不太懂，而我又刚好自学过，没办法，旧时代的残党说的是我了哈哈。

回顾一下学了什么

WEBAPI阶段当然是讲交互了，如何操作DOM和BOM，因为BOM不常用，所以也没讲很多，主要是对DOM的增删改查。

第一天

查询现在统一使用document.querySelector/All('选择器')方法了，想当年我学的时候什么document.getElementById()，document.getElementsByClassName()...，老麻烦了。

除了讲了如何操作很多属性之外，我更在意的应该是html5中推出的自定义属性了，前面没什么作用，但是到事件委托的时候作用就显现出来了。

第二天

学习事件，同样现在也有统一的写法了，addEventListener("事件",函数)，并且比老版本好的地方在于能绑定多个事件，顺序按先后执行，并且老版本只能冒泡，而addEventListener()可以得到捕获or冒泡，普通方式绑定事件后，不可以取消，addEventListener绑定后则可以用 removeEvenListener 取消。

事件有很多，但更重要的应该是事件对象了，这个就能配合事件冒泡做到很多事情，比如不需要一个个绑定子元素事件，直接委托给父级，然后用事件对象获取到触发事件的子元素，其中还有一个重要的思想就是排他思想。

第三天

这段时间因为疫情问题，然后复习了几天，具体新内容也没讲什么，重点是事件流和事件委托，然后讲了如何阻止事件流e.stopPropagation()，还有阻止一些默认事件，比如a标签的自动跳转?e.preventDefault()。

为了做一些练习的项目，讲了一些BOM的事件，分别是页面加载事件，DOMContentLoaded一般会比load快，滚动事件，页面尺寸事件。

第四天

节点增删改查，创建节点document.creatrElement(元素类型)，这个倒是和以前我学的一样，还有克隆节点 : 复制页面已有节点, 默认参数是false，当为true的时候同时克隆其后代节点。

重绘重排我个人感觉挺重要的，重绘是元素外观改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，重排也叫回流, 当渲染树的一部分更新并且节点的尺寸发生了变化，浏览器会重新构造渲染树。

重绘不一定会重排，但重排一定会发生重绘，所以一般来讲，重排更耗性能，为了性能考虑，尽量避免多次重排和重绘。

第五/六天

主要讲了同步和异步，事件循环(event loop)，BOM的一些对象等，还有一个比较好玩的localStorage本地存储，有了这个就能实习本地登录注册了，以前做的海贼王资料站就基于这个原理，但那时候不算真的懂，就是百度复制的代码。

正则表达式（Regular Expression），一堆没什么规律的字符规则，但还挺有用的，不过现在都有插件可以自动生成了，所以了解即可。

考试题记录

选择题除了考老语法有点超纲，所以没什么值得记录的，唯一有代表性的就是下面的代码题了，记录一下两种解决思路，一种是标准答案，一种是老师讲的思路。

请根据数组内容生成以下页面

<!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>
    <style>
        * {
            margin: 0;
        }

        table {
            margin: 200px auto;
        }

        th,
        td {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <table>
        <thead></thead>
        <tbody></tbody>
    </table>
    <script>
        let jsonData = {
            "head": ['学号', '姓名', '年龄', '分数', '操作'],
            "data": [
                {
                    "number": "001",
                    "name": "大花",
                    "age": "18",
                    "score": "88"
                },
                {
                    "number": "002",
                    "name": "老铁",
                    "age": "22",
                    "score": "59"
                },
                {
                    "number": "003",
                    "name": "李狗蛋",
                    "age": "16",
                    "score": "55"
                },
                {
                    "number": "004",
                    "name": "学霸",
                    "age": "30",
                    "score": "99"
                },
                {
                    "number": "005",
                    "name": "铁柱",
                    "age": "32",
                    "score": "68"
                },
                {
                    "number": "006",
                    "name": "班长",
                    "age": "22",
                    "score": "88"
                },
            ]
        };

        /* 表标题 */
        let headStr = '';
        for (let i = 0; i < jsonData.head.length; i++) {
            headStr += `<th>${jsonData.head[i]}</th>`;
        }
        const thead = document.querySelector("thead");
        thead.innerHTML = `<tr>${headStr}</tr>`;

        /* 表内容 */
        let dataStr = '';
        for (let i = 0; i < jsonData.data.length; i++) {
            let temp = '';
            for (const key in jsonData.data[i]) {
                temp += `<td>${jsonData.data[i][key]}</td>`;
            }
            dataStr += `<tr>${temp}
                        <td>
                            <button class="up">上移</button>
                            <button class="down">下移</button>
                            <button class="delete">删除</button>
                        </td>
                    </tr>`;
        }
        const tbody = document.querySelector("tbody");
        tbody.innerHTML = dataStr;

        /* 事件委托 */
        tbody.addEventListener("click", function (e) {
            let tr = e.target.parentNode.parentNode;
            if (e.target.className === "up") {
                if (tr.previousElementSibling) {
                    this.insertBefore(tr, tr.previousElementSibling);
                } else {
                    alert("已经是第一行啦");
                }
            } else if (e.target.className === "down") {
                if (tr.nextElementSibling) {
                    this.insertBefore(tr, tr.nextElementSibling.nextElementSibling);
                } else {
                    alert("已经是最后一行啦");
                }
            } else if (e.target.className === "delete") {
                this.removeChild(tr);
            }
        });
      /* 第二种思路 */
              /*   tbody.addEventListener("click", function (e) {
              let tr = e.target.parentNode.parentNode;
              let num = parseInt(e.target.parentElement.dataset.i);
              if (e.target.className === "up") {
                  if (num - 1 != -1) {
                      let res = jsonData.data.splice(num, 1);
                      jsonData.data.splice(num - 1, 0, res[0]);
                  } else {
                      alert("已经是第一行啦");
                  }
              } else if (e.target.className === "down") {
                  if (num + 1 == jsonData.data.length) {
                      alert("已经是最后一行啦");
                  } else {
                      let res = jsonData.data.splice(num, 1);
                      jsonData.data.splice(num + 1, 0, res[0]);
                  }
              }
              if (e.target.className === "delete") {
                  jsonData.data.splice(num, 1);
              }
              getData();
          }); */
    </script>
</body>

</html>

最后

老师的思路是注释的部分，当然也是自己写出来的，一种是直接改变节点位置，代码会更简洁，另一种是数据驱动视图，我感觉数据驱动视图的思想真的挺妙的，据说Vue也是这种思想。

现在也是学到JS高级部分了，很多ES6的新语法我之前也没接触过，所以学起来也挺难的，虽然是听得懂，但还是记不住，果然还是得多敲才行，有机会多练习才能记得住。

DianC

回顾一下学了什么

第一天

第二天

第三天

第四天

第五/六天

考试题记录

最后