易混点和分页

let const var

区别 var let const
是否有块级作用域 × ✔️ ✔️
是否存在变量提升 ✔️ × ×
是否添加全局属性 ✔️ × ×
能否重复声明变量 ✔️ × ×
是否存在暂时性死区 × ✔️ ✔️
是否必须设置初始值 × × ✔️
能否改变指针指向 ✔️ ✔️ ×

暂时性死区：在使用let const 命令 声明变量之前，该变量都是不可用的

localStorage&sessionStorage

localStorage（长期存储），sessionStorage（会话存储）是H5中的本地web存储的两个接口，相当于前端的一个小型的本地数据库，用于本地存储一些不敏感的数据，隶属于window对象

异同

同：两者的KPI完全相同，都是在浏览器存储数据
异：
1.localStorage 存储的数据是永久性数据，页面刷新，即使浏览器重启，甚至操作系统重启也不会丢失，并且存储的数据在同源（协议，域名，端口号一致）下的标签页和window窗口之间的共享。
2.sessionStorage存储的数据有些苛刻，页面刷新仍然有效，选项卡关闭时数据丢失，但是在相同标签页打开的多个iframe之间的数据可以共享（同源的情况下）

ajax JQ XHR

三者关系

XHR是Ajax的核心对象，Ajax是通过XHR封装的，JQ是对Ajax的二次封装，更加简洁

get post 区别

1.语义化区别：get偏向于获取，post 偏向于提交数据
2.携带给后端的信息位置不一样
get：直接在地址的后面拼接查询的字符串
post：是在请求体里进行信息查询
3.携带的数据大小不一样
get：因为拼接在地址后面，大小在2kb左右
post：因为在请求体内，数据大小不受限制，除非服务器有显示
5.安全性能
get：明文发送，不安全
post：相对安全

元素和节点的关系

元素就是元素节点，是所有节点中的一种，其他节点还包括属性节点，文本节点，备注节点，指令节点等，XML文档中的每个成分都是一个节点
DOM是这样规定的
整个文档就是一个文档节点
每个XML标签是一个元素节点
包含在XML元素中的文本是文本节点
每个XML属性时一个属性节点
注释属于注释节点

初试渲染分页，翻页

该功能主要包含三个部分
渲染当前页，分页，
由于分页功能需要获取当前页和总条数，，则需要两个参数来动态的进行传参
进行传参后，在进行翻页时需要进行offset的自增或自减，此时则需要调用渲染当前页的函数

该分页存在bug，每次删除时，调用getArr函数时，由于page 函数 offset初始值是1，则实现删除功能时，每删除一次，会跳转到第一页，并且当最后一页删除完时，理应跳转到前一页，该功能并未实现

// 渲染课程列表
getArr();
// 分页功能
var last = document.querySelector(".last");
var next = document.querySelector(".next");
function page(count, allPages) {
  let offset = 1;
  getCourse(offset, count);
  // 点击下一页做切换
  if (offset == 1) {
    last.setAttribute("disabled", true);
  }
  if (offset >= allPages) {
    offset = allPages;
    next.setAttribute("disabled", true);
  }
  if (offset < allPages) {
    next.removeAttribute("disabled");
  }
  next.onclick = function () {
    offset++;
    if (offset >= 1) {
      last.removeAttribute("disabled");
    }
    if (offset >= allPages) {
      offset = allPages;
      next.setAttribute("disabled", true);
    }
    getCourse(offset, count);
  };
  last.onclick = function () {
    offset--;
    getCourse(offset, count);
    if (offset <= 1) {
      last.setAttribute("disabled", true);
      offset = 1;
    }
    if (offset < allPages && offset >= 1) {
      next.removeAttribute("disabled");
    }
  };
}
// 渲染当前页的数据
function getCourse(offset, count) {
  // 获取数据
  $.ajax({
    url: `http://110.40.139.172:43120/course/getAllcourse?offset=${offset}`,
    method: "get",
    headers: {
      token: localStorage.getItem("token"),
    },
    success: function (result) {
      const arr = result.userInfo;
      var select = document.querySelector("#add-category");
      var tbody = document.querySelector("#tb");
      tbody.innerHTML = " ";
      for (var i = 0; i < arr.length; i++) {
        let cvalue = arr[i].category;
        let mvalue = arr[i].assessmentMethod;
        let categoryText = document.querySelector(
          `#add-category option[value="${cvalue}"]`
        ).text;
        let methodText = document.querySelector(
          `#Method option[value="${mvalue}"]`
        ).text;
        tbody.innerHTML =
          tbody.innerHTML +
          `<tr>
          <td><input type="checkbox" class="check" name="items" val=${
            arr[i].id
          }></td>
        <td data-id=${arr[i].id}>${i + 1 + (offset - 1) * 10}</td>
        <td>${arr[i].courseName}</td>
        <td>${categoryText}</td>
        <td>${arr[i].attentClassTime}</td>
        <td>${arr[i].classRoom}</td>
        <td>${arr[i].creditHour}</td>
        <td>${methodText}</td>
        <td>
          <button type="button" class="remove" οnclick="delRow(this)" data-id=${
            arr[i].id
          }>
            <i class="iconfont">&#xe61c;</i>
          </button>
          <button
            type="button"
            class="edit"
            οnclick="updateRow(this)"
          >
            <i class="iconfont">&#xe8cf;</i>
          </button>
        </td>
      </tr>`;
      }
      ischeckAll();
      isCheck();
      background();
    },
  });
  document.querySelector(".total-count").innerHTML = `共${count}条`;
  document.querySelector(".nowpage").innerHTML = `第${offset}页`;
}

function getArr() {
  $.ajax({
    url: `http://110.40.139.172:43120/course/getAllcourse`,
    method: "get",
    headers: {
      token: localStorage.getItem("token"),
    },
    success: function (result) {
      var count = result.count;
      var allPages = result.allPages;
      var offset = result.offset;
      page(count, allPages);
    },
  });
}

总结

此次考核仍然有很多不足，alert函数没有重写，标签没有过滤，全选反选功能并未完整实现等等，下次的分页功能一定要实现完整的一套