前端星2020_4_9课程笔记

怎样写好JavaScript

• 分工原则

JavaScript不要越俎代庖

• 考虑可复用性

  • 面向对象

    例 UI组件的实现 （轮播图组件例子）

    • 第一步当然是建立适当的html css格式 确定基本的需求所需要的值和方法 （列表型结构，所有图片实际上重叠在一个位置，切换动画，切换状态）

    • 针对功能设置api

      • getSelectedItem
      • getSelectedItemIndex （这两个api为了找当前的图片的目标 在构造函数里把图片存进去 这样就在内存中保存了图片的位置）
      • slideTo (位置的切换)
      • slideNext
      • slidePrevious （这两个是给前后切换的小箭头用的api 实际上也是slideTo）

    • 逐步实现功能

      1. 自动换页 这个只需要 初始化上面的对象之后 设置定时器定时切换
      2. 增加控制部分 也就是下面的按钮和左右的箭头 实现方法是在初始化的时候将控制器元素分别绑定事件（自定义事件） 但是其实这个时候构造函数我觉得已经很臃肿了

      3. 优化

         • 依赖注入/插件模式 依赖注入实际上是控制反转的一种实践方式 我们的目的实际上是把这个组件的控制权交给控制部分 我们选择将控制部分所需要的“依赖”也就是我们当前的组件传给控制部分 这样完成了一部分的解耦合
         • 改进插件/模板化 实际上就是在上面的基础上将html css 部分也封装进来 这个主要是为了封装在一起复用
         • 组件模型抽象 之前的操作主要是集中在轮播图上 到了这步 我们从各个组件中提取出共性的方法属性 比如render函数 其实就是面向对象继承思想

  • 过程抽象 （主要是函数式）

    例 只执行一次的函数

    • 在特定的场景下 我们其实是通过执行的时候将标识符抹杀掉来做的（卸磨杀驴）
    • 如果我们把杀驴的过程抽象出来 就比如抽象成一个屠宰场好了（感觉更像高速收费站QAQ 那就假设是个高速杀驴站好了） 只要想要上只执行一次的高速公路 就要把驴杀掉，就应该先在收费站注册一下（好像圆上了 QAQ）
    • 高阶函数 像前面提的杀驴站在这里就是一个高阶函数 进去一个驴车 出来还是个车 但是驴没了QAQ（让子弹飞一会儿）
    • 当然过程抽象其实是用来优化局部API

---

WEB标准

HTTP 标准

实际上和所有网络标准一样就是IETF指定的 有RFC指导文档
HTTP1.0 无长连接 -> HTTP1.1 -> +TLS/SSL(密文 安全性) -> http2.0

ECMAScript 标准

W3C

JavaScript在浏览器中最基础的部分标准化。
BOM

• window对象，也就是ECMAScript中定义的Global对象。网页中所有全局对象、变量和函数都暴露在这个对象上。
• location对象，通过location对象可以以编程方式操纵浏览器的导航系统。
• navigator对象，对象提供关于浏览器的信息。
• screen对象，保存着客户端显示器的信息。
• history对象，提供了操纵浏览器历史记录的能力。

DOM

• DOM Core：在DOM1核心部分的基础上，为节点增加方法和属性。
• DOM Views：定义基于样式信息的不同视图。
• DOM Events：定义通过事件实现DOM文档交互。
• DOM Style：定义以编程方式访问和修改CSS样式的接口。
• DOM Traversal and Range：新增遍历DOM文档及选择文档内容的接口。
• DOM HTML：在DOM1 HTML部分的基础上，增加属性、方法和新接口。
• DOM Mutation Observers：定义基于DOM变化触发回调的接口。这个模块是DOM4级模块，用于取代Mutation Events。

---

HTTP基础

其实之前复习记过这方面笔记 虽然没记完 我基于之前的笔记接着记吧

http报文

本身是由多行（CR+LF做换行符）数据构成的字符串文本

请求/响应报文的通用结构

报文首部

请求行/状态行
请求/响应首部字段  
通用首部字段  
实体首部字段  针对请求报文和响应报文的实体部分使用的首部。补充了资源内容更新时间等与实体有关的信息。
其他  

CR + LF

报文主体

通常报文主体等于请求实体但是当发生编码操作的时候试题内容会发生变化 导致和报文实体产生差异

MIME

mime的意义是发送多种数据的多部份对象集合
在请求头/响应头中说明mime的类型（content-type首部字段） 然后在主体部分传输对应的类型实体

部分内容的范围请求

(例子主要就是断点下载)
这种情况下 在请求首部加Range 响应首部是 Content-Length Content-Length
针对范围请求响应会返回206的响应报文 无法返回范围请求的时候就会返回200 和完整的实体内容

内容协商返回最合适的内容

内容协商机制是指客户端和服务器端就响应的资源内容进行交涉，然后提供给客户端最为适合的资源。内容协商会以响应资源的语言、字符集、编码方式等作为判断的基准。

对于内容协商机制 请求报文的首部有

• Accept
• Accept-Charset
• Accept-Encoding
• Accept-Language
• Content-Language

内容协商的类型有

• 服务器驱动协商
• 客户端驱动协商
• 透明协商

认证

认证会检查请求头字段中的Authorization字段

状态码

状态码	类别	原因短语
1XX	informational	接受的请求正在处理
2XX	Success	请求正常处理完毕
3XX	Redirection	需要进行附加操作来完成请求
4XX	client error	服务器无法处理请求
5XX	Server error	服务器处理出错

---

• 200 OK
• 204 No Content 请求正常成功处理 但是响应报文中不含实体的主体部分 则浏览器显示的页面不会发生更新
• 206 Partial Content 范围请求 range 返回的结果中包含Content-Range指定的范围内的实体内容

---

• 301 永久重定向 请求的资源已经被分配了新的URL
• 302 临时重定向 表示这次请求应该使用新的URL来访问
• 303 See Other 与302功能相似 表示由于请求对应的资源存在着另一个URL 应使用GET方法请求定向获取请求的资源
• 304 Not Modified 表示找到资源 但是未满足条件 所以返回的时候不会带任何响应的主体部分
• 307 临时重定向 与302相同

（当301、302、303响应状态码返回时，几乎所有的浏览器都会把POST改成GET，并删除请求报文内的主体，之后请求会自动再次发送。301、302标准是禁止将POST方法改变成GET方法的，但实际使用时大家都会这么做。）

---

• 400 Bad Request 表示请求报文中存在语法错误
• 401 Unauthorized 未授权 返回含有401的响应必须包含一个适用于被请求资源的WWW-Authenticate首部用以质询 第一次会让用户进行认证 第二次则会返回认证失败
• 403 Forbidden 访问了一个禁止访问的资源
• 404 Not Found
• 405 禁止的方法

---

• 500 Internal Server Error 服务器内部错误
• 502 Bad Gateway
• 503 Service Unavailable
• 504 Gateway timeout

---

与http协作的web服务器

用单个虚拟主机实现多个域名

Virtual Host
在相同的IP地址下 由于虚拟主机可以寄存多个不同主机名 和 域名的网站 因此在发送HTTP请求的时候要指定HOST （HTTP请求头首部）

通信数据转发程序

• 代理

中间人身份 每次通过代理服务器转发请求或者响应 会追加写入Via头部信息 代理转发响应时，缓存代理（Caching Proxy）会预先将资源的副本（缓存）保存在代理服务器上。当代理再次接收到对相同资源的请求时，就可以不从源服务器那里获取资源，而是将之前缓存的资源作为响应返回。

• 网关

网管是转发其他服务器通信数据的服务器 网关的工作机制和代理十分相似。而网关能使通信线路上的服务器提供非HTTP协议服务 网关可以提高通信的安全性

• 隧道

隧道是在相隔很远的客户端和服务器两者之间进行中转 并保持双方通信连接的应用程序 隧道本身不会解析http请求

缓存机制

• 缓存服务器 缓存有效性问题
• 浏览器缓存 客户端缓存 临时网络文件 同样具有缓存有效性问题

HTTP报文首部

请求报文

举个例子

GET / HTTP/1.1
Host: hackr.jp
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:13.0) Gecko/20100101 Firefox/13.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9, /; q=0.8
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
DNT: 1
Connection: keep-alive
If-Modified-Since: Fri, 31 Aug 2007 02:02:20 GMT
If-None-Match: "45bae1-16a-46d776ac"
Cache-Control: max-age=0

响应报文

例子2

HTTP/1.1 304 Not Modified
Date: Thu, 07 Jun 2012 07:21:36 GMT
Server: Apache
Connection: close
Etag: "45bae1-16a-46d776ac"

http首部字段

使用首部字段是为了给浏览器和服务器提供报文主体大小、所使用的语言、认证信息等内容

通用首部字段

首部字段名	说明
Cache-Control	控制缓存行为
Connection	逐跳首部，链接的管理
Date	创建报文的日期
Pragma	报文指令
Trailer	报文末端的首部一览
Transfer-Encoding	指定报文主体的传输编码方式
Upgrade	升级为其他协议
Via	代理服务器相关信息
Warning	错误通知

请求首部字段

首部字段名	说明
Accept	用户代理可处理的媒体类型
Accept-Charset	优先的字符集
Accept-Encoding	优先的内容编码
Accept-Language	优先的自然语言
Authorization	web认证信息
Expect	期待服务器的特定行为
From	用户的电子邮箱地址
Host	请求资源所在服务器
if-Match	比较实体标记 （ETag）
if-Modified-Since	比较资源的更新时间
if-None-Match	比较实体标记 与if-Match相反
if-Range	资源未更新时发送实体Byte的范围
Range	实体的字节范围请求
Referer	对请求中的URL原始获取方
TE	传输编码的优先级
User-Agent	HTTP客户端程序的信息

响应首部字段

首部字段名	说明
Accept-Ranges	是否接收range请求
Age	推算资源创建经过时间
ETag	资源的匹配信息
Location	令客户端重定向到指定URL
Proxy-Authenticate	代理服务器对客户端的认证信息
Retry-After	对再次发起请求的时机要求
Server	Http服务器的安装信息
Vary	代理服务器缓存的管理信息
WWW-Authenticate	服务器对客户端的认证信息

实体首部字段

首部字段名	说明
Allow	资源可支持的HTTP方法
Content-Encoding	实体主体适用的编码方式
Content-Language	实体主体的自然语言
Content-Length	实体主体的大小
Content-Location	替代对应资源的URL
Content-Md5	实体主体的报文摘要
Content-Range	实体主体的位置范围
Content-Type	实体主体的媒体类型
Expires	实体主体过期后的日期时间
Last-Modified	资源的最后修改日期和时间

非正式定义的首部字段

• Cookie
• Set-cookie
• Content-Disposition
• 扩展自定义头信息 用X-开头

为cookie服务的首部字段 ！！！！！

set-cookie

开始状态管理所使用的Cookie信息 响应首部字段
字段值

• NAME=VALUE 赋予Cookie的名称和值 （必须项）
• expires=DATE Cookie的有效期 （不指定默认是浏览器关闭前为止）
• path=PATH 将服务器上的文件目录作为cookie的适用对象（不指定默认为文档所在的文件目录）
• domain=域名 作为Cookie适用对象的域名（不指定默认是 创建Cookie的服务器）
• HttpOnly Cookie不能被JavaScript脚本访问
• Secure 仅在HTTPS下允许Cookie发送
• Samesite 可防CSRF

Cookie

首部字段Cookie会告知服务器，当客户端想获得HTTP状态管理支持时，就会在请求中包含从服务器接收到的Cookie。接收到多个Cookie时，同样可以以多个Cookie形式发送。

PS：cookie越来越大 怎么办

Cookie 安全策略

• XSS漏洞 httpOnly
• CSRF Samesite

其他首部字段

Connection

功能

• 控制不再转发给代理的首部字段
• 管理持久连接

HTTP/1.1版本的默认连接都是持久连接。为此，客户端会在持久连接上连续发送请求。当服务器端想明确断开连接时，则指定Connection首部字段的值为Close。
HTTP/1.1之前的HTTP版本的默认连接都是非持久连接。为此，如果想在旧版本的HTTP协议上维持持续连接，则需要指定Connection首部字段的值为Keep-Alive。

Cache-Control

ps : 浏览器的缓存机制 ！！！ http1.0 硬缓存 expires 协商缓存 last-Modified http 1.1 硬缓存 cache-control 协商缓存 Etag
功能

• 操作缓存机制
• 参数多个 可选 下面是一些重点参数

参数	功能
public	其他用户也可以使用缓存
private	响应只以特定的用户作为对象
no-cache	表示客户端将不会接收缓存过的响应。于是，“中间”的缓存服务器必须把客户端请求转发给源服务器。同时可以写参数例如 Cache-control：no-cache=Location 这种时候客户端接收到这个被指定参数值的首部字段对应的响应报文 将不能使用缓存
no-store	真的不缓存
s-maxage	指定缓存期限 功能和max-age相似 但是 s-maxage 提供适用于多位用户使用的公共缓存服务器
max-age	设置缓存时间 超过则转发给源服务器
min-fresh	超过这个时间的资源不新鲜 过了的就不要了
max-stale	指定的缓存资源过期也接受
only-if-cache	表示客户端仅在缓存服务器本地缓存目标资源的时候才会要求返回 也就是要求缓存服务器不重新加载响应 如果不能从缓存服务器得到响应 则返回504

HTTP协议的进化

HTTP2

• 二进制传输
• 多路复用
• 头部压缩
• server push

HTTP3

• 基于QUIC协议