前端复习遗忘的知识点

这个是我个人平常学习一些博主的东西，如果侵权请联系我或者让我标上博主平台等信息，谢谢！

1：如图涉及知识点jq：

1.获取元素
document.getElementById(""); 
document.getElementsByClassName();
document.getElementsByTagName();
补充：
querySelectorAll
elementList = document.querySelectorAll(selectors);
//elementList 是一个静态的 NodeList 类型的对象


2：移除class
removeClass("className1 className2 classNamen");

3：移除id
var element = document.getElementById("yourElementId"); // 获取元素
if (element) {
    element.removeAttribute("id"); // 移除 id 属性
}
4:
var node = document.querySelector("#lover");   // 获取文档中的第一个id=lover的元素
var node = document.querySelector(".lover");   // 获取文档中的第一个class="lover"的元素
var node = document.querySelector("p.lover");  // 获取class=“lover” 的第一个p元素
var node = document.querySelector("a[target]");// 获取第一个带target属性的a元素
var element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素
document.querySelector(\"body\").style="";     // 移除style属性 

 2：forEach与map:

• forEach: 主要用于迭代数组并执行某些操作，不返回一个新数组。
• map: 迭代数组，并对每个元素执行某些操作，然后返回一个新数组

3：事件冒泡

分为事件冒泡和事件捕获【看如图的事件流】

冒泡：点击蓝色---依次打印蓝绿红

捕获流：点击蓝色-依次打印红绿蓝

3.1事件冒泡阻止方法可以用：

vue中：stopPropagation（）

uniapp中：@click.stop="handleClick"

<template>
  <view>
    <button @click="outerClick">外部按钮</button>
    <button @click.stop="innerClick">内部按钮</button>
  </view>
</template>
<script>
export default {
  methods: {
    outerClick() {
      console.log("外部按钮被点击");
    },
    innerClick() {
      console.log("内部按钮被点击");
    }
  }
};
</script>

2.捕获流：

4：事件委托

理解：给每个儿子都绑定点击事件，不如委托给父亲！

用e.target

情景：给每个li先遍历监听点击事件-然后点击每条评论自己就会自己删除自己

问题出现：当你发表评论，删不掉自己发布评论

原因：你事先遍历好li添加点击事件，导致后续的添加的评论无法被监听到点击事件

解决：委托父元素进行监听！

5:递归

举例如下：打印每一层自己的父节点

6.事件对象

事件对象就是--触发事件的元素e
let oRed = document.querySelector('#red');
oRed.onclick= function(e){
console.log(e.target);

7.ajax

ajax是异步无刷新技术

ajax原始get写法

// 构造ajax对象
var ajax = new XMLHttpRequest()
//规定请求的类型、URL 以及是否异步处理请求。
ajax.open("GET", "http://api.tianapi.com/networkhot/index?key=123123", true)
// 设置请求头
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
// 指定响应数据类型
ajax.responseType = 'json'
// 发送请求
ajax.send()
// onload接收响应
ajax.onload = function() {
    console.log(ajax.response);
}
// 异常处理,地址出错或者服务器出错
ajax.onerror = function() {
    alert('服务器错误')
    console.log(ajax.response);
}

ajax原生post写法

// 构造ajax对象
var ajax = new XMLHttpRequest()
//规定请求的类型、URL 以及是否异步处理请求。
ajax.open("POST", "http://api.tianapi.com/networkhot/index", true)
// 设置请求头
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
// 发送请求并带上数据
ajax.send('key=123123')
// onload接收响应
ajax.onload = function() {
    var data = JSON.parse(ajax.response)
    console.log(data);
    data.newslist.forEach(element => {
        $('.father').append(`
            <div class="child">${element.title}</div>
            `)
    });
}
// 异常处理,地址出错或者服务器出错
ajax.onerror = function() {
    alert('服务器错误')
    console.log(ajax.response);
}

ajax的jquery写法

$.ajax({
    // 是否异步请求，默认值true
    async: true, 
    // 请求类型post get
    type: "POST",
    // 请求地址
    url: "",
    // 服务器返回的数据类型，默认是json
    dataType: 'json', 
    // 发送的数据，js对象/json字符串/json对象
    data: { }, 
    // 请求成功回调
    success: function(res) {
        console.log(res);
    },
    // 请求失败回调
    error: function(err) {
        console.log(err);
    }
})

最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新的情况下和服务器进行数据交互。

请求码的各项解释：

100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET，但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除
400——错误请求，如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似``401``，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
503-—服务器过载或暂停维修
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本

补充

get和post的区别

POST和GET都是向服务器提交数据，并且都会从服务器获取数据。

• 参数传输方式

  get通过地址栏传输；post通过报文传输。

  get：在url后面使用拼接?号，使用键值对的方式&隔开，如url?name=’Tom’&age=18

  post：使用send方法传参，使用键值对的方式&隔开，如xhr.send(‘name=’Tom’&age=18’)、

• 参数传输长度

  get参数有长度限制（受限于url长度），而post无限制。

• 安全性

  GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

• 使用场景建议

  get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式。

  在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式

8.on和addEventListener

on和addEventListener都用于处理事件

 1     window.onload = function(){
 2     var box = document.getElementById("box");
 3     box.onclick = function(){
 4         console.log("我是box1");
 5     }
 6     box.onclick = function(){
 7         box.style.fontSize = "18px";
 8         console.log("我是box2");
 9     }
10 }
　　　　　运行结果：“我是box2”


1 window.onload = function(){
2     var box = document.getElementById("box");
3     box.addEventListener("click",function(){
4         console.log("我是box1");
5     })
6     box.addEventListener("click",function(){
7         console.log("我是box2");
8     })
9 }
　　　　运行结果：我是box1
　　　　　　　　　我是box2

9.window.onLaod

在网页（或窗口）完全加载完成【包括HTML、CSS、图片、脚本文件等，都已经加载并解析完成。】后执行特定的代码或函数

window.onload = function() {
    // 这里是当页面加载完成后要执行的代码
    console.log("页面已经完全加载！");
    // 你可以在这里安全地操作 DOM 元素
    var myElement = document.getElementById("myElementId");
    myElement.style.color = "red"; // 例如，改变某个元素的文本颜色
};

10:computed计算属性

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./utool/vue.js"></script>

  <style>
    table {
      width: 50%;
      border-collapse: collapse;
    }

    table th,
    td {
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="" id="app">
    <table border="1">
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>班级</th>
      </tr>
      <tr v-for="item in stuInfo">
        <td> {{item.name}}</td>
        <td> {{item.age}}</td>
        <td> {{getSexLable(item.sex)}}</td>
        <td> {{item.classId}}</td>
      </tr>
    </table>
  </div>
</body>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        // 学生信息
        stuInfo: [
          { name: "小明", age: 18, sex: "1", classId: 11 },
          { name: "小红", age: 19, sex: "0", classId: 9 }
        ],

        // 性别
        sexDict: [
          { value: "1", label: "男" },
          { value: "0", label: "女" }
        ],

        // 班级列表
        classList: [
          { classId: 9, className: "班级1" },
          { classId: 10, className: "班级2" },
          { classId: 11, className: "班级3" },
        ]
      }
    },
    computed: {
      getSexLable() {
        return sexCode => {
          // 【find()方法--遍历sexDict里面的对象数组,符合就返回该对象item、容错返回undefined】
          const { label } = this.sexDict.find(item => item.value == sexCode) || {}
          // 【lable存在返回lable，否则返回未知】
          return label ? label : '未知'
        }
      }
    }
  })


</script>

</html>

11：json

一种轻量级的数据交换格式，主要用于跟服务器进行交换数据

一个标准的json对象

{
    "class1": [
        {
            "name":'Tom',
            "age": 18
        },
        {
            "name":'Jane',
            "age": 12,
            "skills": ['run']
        }
    ]
}

12：深浅拷贝

1：展开运算符方法去拷贝

缺点：只能拷贝一层，遇到数组或对象其余都是拷贝地址，但是可以拷贝函数！比如这种情况就可以使用该方法

2：用json格式转换

缺点：如果数据只有一些基本的数组对象，用该方法挺好，但是遇到函数就无法拷贝

补充:

数组对象都是引用数据类型，但是只要我开辟一个新的空间再去赋值也算是深拷贝！如图

13：防抖和节流【闭包】

闭包防抖节流解析地址：写文章-优快云创作中心

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一
个函数内创建另一个函数，创建的函数可以访问到当前函数的局部变量。

防抖定义：

一段时间触发n次，只会执行最后一次！

应用场景：

输入框搜索输入、文本框编辑器实时保存、登录

节流定义：

一段时间触发n次，我只会按照设定时间的间隔去执行

应用场景：

14.数据缓存

此方式常用于存储一些不希望在标签上能够找到的敏感信息

<body>
    <div class="product">
        商品卡片
    </div>
</body>
<script>
    // 对一个商品卡片设置其唯一id
    $(".product").data("productId","1")
    // 输出该数据
    console.log($(".product").data("productId"))
</script>

15：jq对象和dom对象

jq对象定义：

是jQuery对象。jQuery对象是通过jQuery库中的选择器（如$()函数）选取一个或多个DOM（文档对象模型）元素后，返回的一个包含了这些DOM元素及其相关属性和方法的对象。这个对象是一个虚拟的对象，它封装了DOM元素，并提供了一系列可操作的方法，以便为其中的每个元素执行某个任务或者获取相应的属性值。

dom对象：

DOM对象是原生JavaScript创建的对象，代表了HTML文档中的元素，可以直接使用DOM API进行操作。

两者之间可以相互转换，但需要注意它们各自的方法和属性不能混用。

16：javascript和jquery的区别

17：路由懒加载

如果每个组件都在定义路由前import，当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效。使用动态import：import()。

避免一次性引入很多页面，可以动态引入如图！

18：导航守卫

18.1全局前置守卫beforeEach-页面限制

比如登录限制--登录才放行否则重定向到登录页！

18.2全局后置守卫afterEach-统计用户进入次数以及更改标题

19.命名规范

19：keep-alive组件缓存

当页面进行切换的时候，由于组件销毁destoryed，导致数据因为来回切换而丢失，keep-alive就可以解决这个问题！

如图使用

解析

切记他的三个参数会匹配每个页面的name属性，所以name不能为空！

19：sass

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅，以及更高效地开发项目。

20：axios

Axios 是一个基于 promise 网络请求库，简单来讲就是对ajax进行了封装，

import axios from 'axios'
import VueCookies from 'vue-cookies'

// elementui方法：单独引入，因为this指向的是vue实例，js没有，所以我们要在js文件单独引入
import { Message } from 'element-ui';

const instance = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL
})


/**请求拦截 */
instance.interceptors.request.use(config => {
  //判断是否携带token
  const { isToken } = config
  if (isToken) {
    config.headers['Authorization'] = VueCookies.get('xiaomi-token')
  }
  //发送请求
  return config
})

/**响应拦截 */
instance.interceptors.response.use(res => {
  return res.data
}
)


export default instance

uniapp请求自带方法
import interceptor from '@/interceptor/requestInter.js'

//请求前缀
const BASE_URL = 'http://mashang.eicp.vip:5557'

function baseAjax(options = {}) {
	let {
		url = '', method = 'GET', data = {}, header = {},isToken=true
	} = options
	
	/*请求拦截*/
	if(isToken){
		header['Authorization']=wx.getStorageSync('note-token'); 
	}
	
	return new Promise((resolve, reject) => {
		uni.request({
			url:BASE_URL+url, 
			data,
			header,
			method,
			success: (res) => {
				//拆包
				resolve(res.data);
				uni.showToast({
					title:res.data.msg,
					duration:2000
				})
			},
			fail: (err) => {
				reject(err)
				console.error(err)
			}
		});
	})
}

export default baseAjax

21：javascript有哪几种数据类型

八种

我们所学的是：

1.typeof：

用来判断基础数据类型

2.instanceof：

用来判断引用数据类型

22.null和undefined区别

null作为空对象，undifined作为基本类型初始值，undefined不是关键字，typeof null会返回Object

23. 0.1+0.2！=0.3？

24. typeof  NaN?

25:var let const

26. 箭头函数和普通函数区别

普通函数指向window

27. BOM DOM

DOM是文档对象模型，BOM是浏览器对象模型

28：原型  原型链

29：promise

异步编程的一种解决方案,统一异步编程写法，降低业务理解成本。

30：匿名函数和具名函数

对象和函数：匿名函数-具名函数-立即执行函数_具名函数和匿名函数的区别-优快云博客

31：Object.assign()

JavaScript 中用于合并多个对象的静态方法，它可以将一个或多个源对象（source）的所有可枚举属性复制到目标对象（target）

比如：Object.assign(target, source1, source2, ...)

1. 合并对象

2. 安全合并（不修改原对象）

什么是构造函数，回调函数，箭头函数

32：this理解

一个指针型变量，它指向当前函数的运行环境。即所在函数的调用者【给你一个函数，却没有调用，严格意义上是无法回答的！】

案例1：

案例1结论

回调函数

案例1：匿名函数作为参数传给了定时器作为回调函数 -【一旦函数以回调参数形式传递给别人，-函数的执行权让给别人了】

   

定时器的函数总是指向window

33.ES6 module、export、import的作用

ES6 module、export、import的作用ES6 module、export、import的作用 ES6 引 - 掘金

34.全局this

Web 环境中的全局 this

小程序可以通过 getApp() 获取应用实例，而不是直接使用全局 this

小程序中的全局 this：

• 全局 this 通常指向 window 对象
• 所有全局变量和函数都会成为 window 对象的属性
• 例如：var a = 1; console.log(window.a); // 1

• 在小程序开发中，全局 this 的概念有所不同：

• App 级别的 this：在 app.js 中，this 指向小程序应用实例
• Page 级别的 this：在页面中，this 指向当前页面实例
• 组件中的 this：在自定义组件中，this 指向组件实例Runtime）

 App 中的全局 this

在混合 App 开发中（如使用 uni-app 或 5+ Runtime）：

• 全局 this 的概念与小程序类似
• 可以通过特定 API 获取应用或页面实例
• 在 5+ Runtime 环境中，plus 是全局对象 

35.window.location.replace