前端星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