千锋教育JavaScript全套视频教程(10天学会Js,前端javascrip

1.spa(single page web application) --- 单页面应用程序
只有一张Web页面的应用,
是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
浏览器一开始会加载必需的HTML、CSS和JavaScript,
所有的操作都在这张页面上完成,都由JavaScript来控制。
目前时兴的 React、Vue、Angular 等前端框架均采用了 SPA 原则。
优点
- 具有桌面应用的即时性、网站的可移植性和可访问性
- 用户体验好、快,内容的改变不需要重新加载整个页面
- 良好的前后端分离,分工更明确
缺点
- 不利于搜索引擎的抓取
- 首次渲染速度相对较慢
实现web单页面应用
hash模式
history模式
2. 闭包
闭包是函数的一种高级使用方式
闭包本质上利用了函数的执行空间不消毁的特性
实现在函数外部访问函数内部的私有变量
可以实现在一个函数中使用另一个函数中的私有变量
闭包的优点
1. 能够让函数外部访问到函数内部的私有变量
2. 能够保护函数的私有变量,不会污染全局=
3. 可以利用闭包的特性,缓存数据,提高代码性能
闭包的缺点
因为对数据的持续引用,导致函数的执行空间不消毁,容易造成内存泄漏
解决闭包造成内存泄漏的问题
在使用完成后,手动给变量赋值null,这样内存就会释放了
闭包概念 (重点)
例如有一个 A 函数,在 A 函数内部访问一个 B 函数
在 A 函数外部有变量 C 引用这个 B 函数
B 函数内部访问者 A函数内部的私有变量
以上三个条件缺一不可
闭包应用在哪个业务中
在一个业务中如果需要操作缓存数据的时候,用到了闭包实现
同时
节流.防抖.柯里化的函数 封装中 会使用闭包
HTTP 的工作流程
1. 客户端和服务器建立链接(http的三次握手)
2. 建立链接后,发送一个请求给服务器(请求request)
3. 服务器接受到请求以后进行相应的处理并给出一个回应(响应response)
4. 客户端断开与服务器的链接 (http的四次挥手)
3. 一次完整的HTTP事务的过程
1. 域名解析(dns)
2. 发起建立与服务器的链接(http的3次握手)
3. 建立TCP连接后发起http请求
4. 服务器端响应http请求,浏览器得到html代码
5. 浏览器解析html代码,并请求html代码中的资源
6. 浏览器对页面进行渲染呈现给用户
7. 断开与服务器的链接 (http的四次挥手)
http 三次握手
- 第一次握手:
- 建立连接时,客户端发送syn报文(包)(同步序列号)到服务器,
并进入SYN_SEND状态,等待服务器确认;
- 第二次握手:
- 服务器收到syn报文,必须确认客户端的syn报文,
同时自己也发送一个SYN报文,即SYN+ACK(确认序列),
此时服务器进入SYN_RECV状态;
- 第三次握手:
- 客户端收到服务器的SYN+ACK报文,向服务器发送确认报文ACK,
此包发送完毕,客户端)和服务器进入ESTABLISHED状态,完成三次握手。
http 四次挥手
- 第一次挥手:
- 客户端发送一个`FIN`,用来关闭客户端到服务端的数据传送,
客户端进入`FIN_WAIT_1`状态。
- 第二次挥手:
- 服务端收到`FIN`后,返回一个`ACK(acknowledgment)`客户端,
服务端进入`CLOSE_WAIT`状态。
- 第三次挥手:
- 服务端发送一个`FIN`,用来关闭服务端到客户单的数据传送,
服务端进入`LAST_ACK`状态。
- 第四次挥手:
- 客户端收到`FIN`后,客户端进入`TIME_WAIT`状态,
接着发送一个ACK给服务端,服务端进入`CLOSED`状态,完成四次挥手
4. Promise
Promise 是ES6新增的引用类型,可以通过new来进行实例化对象。
Promise 内部包含着异步的操作。
Promise 是异步编程的一种解决方案
比传统的解决方案 --- 回调函数嵌套,更合理和更强大。
Promise是一个专门用来解决异步 回调地狱 问题的
回调地狱 就是 回调函数层层嵌套
当一个回调函数嵌套一个回调函数的时候
就会出现一个嵌套结构
当嵌套的多了就会出现回调地狱的情况
为什么需要使用 回调函数
当我们执行一个异步的行为的时候,
我们需要在一个异步行为执行完毕之后做一些事情
那么,我们是没有办法提前预知这个异步行为是什么时候完成的
我们就只能以回调函数的形式来进行
我们并不知道 ajax 请求什么时候完成,所以就要以回调函数的形式来进行
回调地狱 会造成 代码可读性变差 且 不易维护
Promise是采用了 链式语法 解决 回调地狱的问题
promise 有三种状态:
- pending 进行中
- fulfilled 已成功
- rejected 已失败
promise 意思是表示 承诺 ,表示其他手段无法改变。
一旦状态确定,就不会再变,任何时候都可以得到这个结果。
Promise 对象的状态改变,只有两种可能:
从 pending 变为 fulfilled
从 pending 变为 rejected
只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,
这时就称为 resolved(已定型)。
5. AJAX(Asynchronous Javascript And XML)
ajax 是 异步的JavaScript和XML
前后端 数据交互 的一种技术,用于快速创建动态网页的技术
ajax 是异步的
AJAX 通过在后台与服务器进行少量数据交换,使网页实现异步更新。
这意味着可以在不重载整个页面的情况下,对网页的某些部分(局部)进行更新。
注意:
传统的网页(不使用 AJAX)如果需要更新内容,必须重新加载整个页面。
而使用ajax可以在不重新加载网页的情况下实现网页的局部更新
Ajax 并不是一个新技术,而是多个技术的整合:
- HTML
- CSS
- JavaScript
- DOM
- XMLHttpRequest对象 (核心)
传统ajax的优劣
优:1. 不需要插件的支持,原生js就可以使用
优:2. 只更新局部,而不用刷新整个页面
优:3. 它是异步的,无阻塞的
劣:4. 流程比较多,编写比较麻烦
6.http请求方式
get 请求数据
从安全性方面,get请求相对来说安全性低一点
参数以querystring的形式发送,也就是直接拼接在 请求路径的后面
get请求会被浏览器主动缓存
get请求根据不同的浏览器对长度是有限制的
post 发送数据
从安全性方面,post请求相对来说要安全一些
post传输的数据在body里面,参数以requestbody的形式发送,也就是放在请求体中
post请求不会被浏览器主动缓存,除非手动设置
post请求理论上是没有限制的,除非服务端做了限制
- 对参数类型没有限制,理论上可以传递任意数据类型,只不过要和请求头对应
- 传递的数据类型,一般是json数据类型
get和post的区别总结
1. 安全性方面,post请求稍微要优于get
2. 性能方面,get请求要比post请求快一点,所以如果做数据查询,一般都使用get请求
3. 传输内容的大小,get请求有限制,不同的浏览器不太一样,post理论上没有限制
4. 传递的参数 get放在url里面 post放在请求体里面
5. 传递的数据类型 post可以传递任意数据类型 get传递的是字符串类型a