学习回顾No.5

JS

• .toString()方法 => 不会影响原变量，返回结果 null和undefined没有此方法，可用string()方法
• 0、NaN、null、undefined都会转换成false
• this指向是一个对象，函数执行的上下文对象

1. 以函数调用，this永远是window
2. 以方法调用，this就是调用方法的那个对象

• 使用instanceof 可以检查一个对象是否一个类的实例
• 对象 instanceof 构造函数
• 每构造一个函数，解析器向函数中添加一个属性prototype
• 这个属性对应着一个对象，这个对象就是原型对象
• 作为普通函数调用无作用
• 以构造函数形式调用时，所创建对象中有一个隐含属性
• 指向该构造函数的原型对象，通过__ proto__访问
• 原型对象也是对象，它也有原型
• 使用对象的属性或方法时，先在自身寻找，无则去原型对象寻找，也无则去原型的原型中找
• 当我们直接在页面上打印一个对象时，实际上输出对象的toString()方法的返回值

垃圾回收（GC）

• 在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁
• 我们要做的只是将不再使用的对象设置null

forEach(function(value, index, obj){});

浏览器会在回调函数中传递三个参数

1. 当前正在遍历的元素 => value
2. 当前正在遍历元素的索引 => index
3. 正在遍历的数组 => obj

字体图标

• 显示的是图标，本质是字体
• 优点：灵活性、轻量级、兼容性
• 使用：1.下载字体包 2.使用字体图标
• 图标库：Iconfont: https://www.iconfont.cn/
• 没有所需图标：Iconfont网站上传矢量图生成字体图标 1.与设计师沟通，得到SVG矢量图 2.上传图标，下载使用
• 伪元素：行内显示模式
• 渐变：background-image:linear-gradient(颜色1,颜色2);
• linear-gradient(transparent, rgba(0,0,0,.6));（常用，半透明渐变）

else

• .mask表示遮罩层
• perspective实现透视效果（加给父级）
• transform-style: preserve-3d; => 呈现立体图形
• 统一导出在设置中设路径，独自导出在less文件第一行添加//out:路径
• 禁止导出：在less文件第一行添加//out:false
• 响应式网站：1.企业站 2.内容比较少
• 电商站：PC端和移动端分离

AJAX

• Asynchronous JavaScript And XML 就是异步的JS和XML
• 可在浏览器向服务器发送异步请求
• 最大优势：无刷新获取数据
• XML(eXtensible Markup Language) 可扩展标记语言
• 被设计用来传输和存储数据
• 没有预定义标签，全是自定义标签，用来表示一些数据
• XML现在已被JSON所取代
• AJAX优点：1.可以无需刷新页面与服务器端进行通信 2.允许你根据用户事件来更新部分页面内容
• 缺点：1.没有浏览历史，不能回退 2.存在跨域问题（同源） 3.SEO（Search Engine Optimization搜索引擎优化）不友好

BOM

Browser Object Model 浏览器对象模型 通过JS来操作浏览器

BOM对象

• Window => 代表的是整个浏览器的窗口，同时window也是网页中的全局对象
• Navigator => 代表的当前浏览器的信息，通过该对象可以识别不同浏览器
• Location => 代表当前浏览器的地址栏信息，通过Location可获取地址栏信息或操作浏览器跳转页面
• History => 代表浏览器的历史记录，可通过该对象操作历史记录。不能获取到具体记录，只能向前或向后翻页，且只在当次访问时有效
• Screen => 代表用户的屏幕信息，可获取到用户显示器的相关信息

setInterval()

• 定时调用
• 参数：1.回调函数 2.调用间隔时间，单位mm
• 返回值：返回一个Number的数据，作为唯一标识符
• clearInterval() => 关闭定时器

setTimeout()

• 延时调用，只执行一次
• 通过style属性修改样式，每修改一个，浏览器就需要渲染一次页面
• 可通过修改元素的class属性间接修改样式，浏览器只渲染一次

JSON

• 是一个特殊格式的字符串，这个字符串可被任意语言识别
• 并且可以转换为任意语言中的对象，JSON在开发中主要用来数据交互
• Javascript Object Notation => JS对象表示法
• 和JS对象格式一样，只不过JSON字符串中属性名必须加双引号
• JSON.parse() => 将JSON字符串转换为js对象
• JSON.stringify() => 将js对象转换为JSON字符串

JSON对象

1. 对象{}
2. 数组[]

JSON中允许的值

1. 字符串
2. 数值
3. 布尔值
4. null
5. 对象
6. 数组

前后端交互Ajax

传统网站问题

1. 为了获取数据，需要重新加载，浪费资源，增加等待时间，性能不好
2. 验证表单过程中，一项内容不合格，页面需要重新加载，体验不好

解决问题

1. ajax全名：async javascript and XML
2. 是前后台交互的能力
3. 也就是客户端给服务端发送消息的工具，以及接受相应的工具
4. 是一个默认异步执行机制的功能

AJAX的优缺点

1. 不需要插件支持，原生js可以使用
2. 用户体验好（不需要刷新页面就可以更新数据）
3. 减轻服务端和带宽的负担
4. 缺点：搜索引擎的支持度不够，因为数据都不在页面上，搜索不到

ajax “道” 和 XMLHttpRequest “术”

不同的请求方式

• get => 偏向获取
• post => 偏向提交
• put => 偏向更新（全量更新）
• patch => 偏向修改部分（差量更新）
• delete => 偏向删除信息
• head => 偏向获取服务器头的信息
• option => 偏向获取服务器设备信息
• connect => 保留请求方式

Fetch

• XMLHttpRequest是一个设计粗糙的API，配置和调用方式非常混乱，而且基于事件的异步模型写起来不友好

axios

• Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中
• https://www.npmjs.com/package/axios

Promise

• Promise是异步编程的一种解决方案，原生提供了Promise对象

• 解决异步回调地狱的问题

• Promise对象通过自身状态，来控制异步操作，Promise实例有三种状态

• 异步未完成（pending） 异步操作完成（fulfilled） 异步操作失败（rejected）

• 两种变化途径

• 从“未完成”到“成功” 从“未完成”到“失败”

• Promise实例的状态变化只可能发生一次

• 异步操作成功，实例传回一个值（value），状态变为fulfilled

• 异步操作失败，实例传回一个错误（error），状态变为rejected

• Promise是一个对象，也是一个构造函数

Promise.resolve

• 将现有对象转为Promise对象（参数也可以是Promise对象）
• Promise.resolve(‘xiaozhang’) <=> new Promise(resolve => resolve(‘xiaozhang’))

Promise.reject

• 返回一个新的Promise实例，该实例状态为rejected
• const p =Promise.reject(‘error’) <=> const p = new Promise((resolve,reject) => reject(‘error’))

Promise.all

• 用于将多个Promise实例，包装成一个新的Promise实例
• const p = Promise.all([p1,p2,p3])
• p的状态由p1,p2,p3决定，分成两种情况

1. 都为fulfilled，p为fulfilled，此时p1,p2,p3的返回值组成数组，传递给p的回调函数
2. 只要有一个为rejected，p为rejected，此时第一个被reject实例为返回值，传递给p的回调函数

Promise.race

• 将多个实例，包装成一个新的实例
• const p = Promise.race([p1,p2,p3])
• 只要p1,p2,p3有一个实例率先改变状态，p的状态就跟着改变，率先改变的实例为返回值，传递给p的回调函数

Promise.allSettled

• 用来确定一组异步操作是否都结束了，执行.then()

Promise.any

• 只要有一个fulfill，包装实例则为fulfill，全为rejected，才为rejected

• finally方法 在.then()和.catch()后面，无论fulfill、rejected都执行的操作

Async

• async函数，使得异步操作变得更加方便
• 更好的语义
• 返回值为Promise
• async function test(){} test()

Await

• await命令后面是一个Promise对象，返回该对象的结果，如果不是Promise对象，就直接返回对应值
• 配合async使用

async function getData(){
	try{
		var res1 = await ajax()
		var res2 = await ajax()
	}catch(error){
		
	}
}

jQuery

• http://jquery.com
• 一个优秀的JS函数库
• 引用JS库：1.服务器本地库 2.CDN远程库
• 使用jQuery:1.使用核心函数:$/jQuery 当函数使用:$(xxx) 当对象用:$.xxx() 2.使用核心对象：执行$()返回的对象 $obj.xxx()
• 暴露的是函数，返回的是对象

作为一般函数调用：$(param)

1. 参数为函数：当DOM加载完成后，执行此回调函数
2. 参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象
3. 参数为DOM对象：将 dom对象封装成jQuery对象
4. 参数为html标签字符串：创建标签对象并封装成jQuery对象

作为对象使用：$.xxx()

1. $.each()：隐式遍历数组
2. $.trim()：去除两端的空格
3. $.index()：得到在所在兄弟元素中的下标

else

伪数组

1. Object对象
2. length属性
3. 数值下标属性
4. 没有数组特别的方法

基本选择器

• ID、Class、交集、并集、element

层次选择器

1. ancestor descendant => 在给定的祖先元素下匹配所有的后代元素
2. parent > child => 在给定的父元素下匹配所有的子元素
3. prev + next => 匹配紧接在prev元素后的next元素
4. prev ~ siblings => 匹配prev元素之后的所有siblings元素

过滤选择器

• 多个不同时执行，而是依次执行

表单选择器

1. 表单

2. 表单对象属性

3. 操作任意属性 => attr()、removeAttr()、prop()

4. 操作class属性 => addClass()、removeClass()

5. 操作HTML代码/文本/值 => html()、val()