搜 索

WEBAPI阶段总结

  • 180阅读
  • 2022年09月14日
  • 3评论
首页 / 技术积累 / 正文

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

回顾一下学了什么

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

1.png

第一天

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

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

第二天

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

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

2.gif

第三天

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

3.png

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

第四天

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

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

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

第五/六天

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

事件循环

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

考试题记录

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

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

5.gif

<!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的新语法我之前也没接触过,所以学起来也挺难的,虽然是听得懂,但还是记不住,果然还是得多敲才行,有机会多练习才能记得住。

评论区
叶开 1周前
回复

以后又多了一个大佬。

DianC 叶开
2 条回复
DianC
DianC 1周前
回复

那是以后的事啦,我有感觉你是大佬,如果可以请多指点指点 = ̄ω ̄=

叶开
叶开 5天前
回复

哈哈 都是错觉,我是菜鸟,说不定以后就找你了请教问题了。

avatar