前端星2020_4_9课程笔记

时间 2020-04-10

标签前端课程笔记繁體版

原文原文链接

怎样写好JavaScript

分工原则

JavaScript不要越俎代庖css

考虑可复用性
- 面向对象
  
  例 UI组件的实现（轮播图组件例子）
  - 第一步固然是创建适当的html css格式肯定基本的需求所须要的值和方法（列表型结构，全部图片实际上重叠在一个位置，切换动画，切换状态）
  - 针对功能设置apihtml
    - getSelectedItem
    - getSelectedItemIndex （这两个api为了找当前的图片的目标在构造函数里把图片存进去这样就在内存中保存了图片的位置）
    - slideTo (位置的切换)
    - slideNext
    - slidePrevious （这两个是给先后切换的小箭头用的api 实际上也是slideTo）
  - 逐步实现功能web
    1. 自动换页这个只须要初始化上面的对象以后设置定时器定时切换
    2. 增长控制部分也就是下面的按钮和左右的箭头实现方法是在初始化的时候将控制器元素分别绑定事件（自定义事件）可是其实这个时候构造函数我以为已经很臃肿了
    3. 优化编程
      - 依赖注入/插件模式依赖注入其实是控制反转的一种实践方式咱们的目的其实是把这个组件的控制权交给控制部分咱们选择将控制部分所须要的“依赖”也就是咱们当前的组件传给控制部分这样完成了一部分的解耦合
      - 改进插件/模板化实际上就是在上面的基础上将html css 部分也封装进来这个主要是为了封装在一块儿复用
      - 组件模型抽象以前的操做主要是集中在轮播图上到了这步咱们从各个组件中提取出共性的方法属性好比render函数其实就是面向对象继承思想
- 过程抽象（主要是函数式）
  
  例只执行一次的函数
  - 在特定的场景下咱们实际上是经过执行的时候将标识符抹杀掉来作的（卸磨杀驴）
  - 若是咱们把杀驴的过程抽象出来就好比抽象成一个屠宰场好了（感受更像高速收费站QAQ 那就假设是个高速杀驴站好了）只要想要上只执行一次的高速公路就要把驴杀掉，就应该先在收费站注册一下（好像圆上了 QAQ）
  - 高阶函数像前面提的杀驴站在这里就是一个高阶函数进去一个驴车出来仍是个车可是驴没了QAQ（让子弹飞一下子）
  - 固然过程抽象实际上是用来优化局部API

WEB标准

HTTP 标准

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

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 和完整的实体内容

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

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

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

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相同

（当30一、30二、303响应状态码返回时，几乎全部的浏览器都会把POST改为GET，并删除请求报文内的主体，以后请求会自动再次发送。30一、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协议