JavaScript復(fù)習(xí)
-
變量
- 類型
- 值類型
-
typeof：值[開新空間]/引用[引用堆空間]/函數(shù)
-
- 引用類型
- 對象
- 深拷貝
Object.create()
- 深拷貝
- 對象
- 值類型
- 類型
-
原型與原型鏈
-
class- 實例的隱式原型===對象的顯式原型
- 子類的顯式原型的隱式原型===父類的顯式原型
-
-
異步
- 單線程
- 應(yīng)用場景
- 網(wǎng)絡(luò)請求
- 定時任務(wù)
- 回調(diào)函數(shù)嵌套
-
DOM- 樹：
createElement()/appendChild()/removeChild() -
property:JS對象/attribute:HTML
- 樹：
-
BOM- 瀏覽器類型
URL- 主要內(nèi)容：
navigator/screen/location/history-
location:href/protocol/host/search:?/hash:#/pathname -
history:.back()/.forward()
-
-
ajaxXMLHttpRequest狀態(tài)碼：
readyState：4/status：2xx/304[意義:301/2/4:永久/臨時重定向/沒跳轉(zhuǎn)用緩存]/403[沒權(quán)限]/5xx[服務(wù)端出錯]-
跨域
-
同源策略
- 瀏覽器要求網(wǎng)頁與服務(wù)器同源：協(xié)議/域名/端口一致
- 可跨域
- 圖片[發(fā)統(tǒng)計打點請求]/
CSS/JS[CDN/JSONP] - 需要服務(wù)端配合
- 圖片[發(fā)統(tǒng)計打點請求]/
-
解決方案
-
JSONP：<!--index.html--> <script> window.abc=function (data){ console.log(data); } </script> <script src="非本域名/getData.js?callback=abc"></script> <!--以上內(nèi)容可方便地封裝成工具-->//getData.js callback({ "name":zhangsan }) //jsonp $.ajax({ type:'POST', url:'域名?一些參數(shù)=value', contentType:"application/json;sharset=UTF-8", //dataType:'jsonp', jsonCallback:'callback', data:JSON.stringify(list), success:function (data){ //console.log(data); //... }, error:function(e){ console.log(e.status); } }) CORS：response.setHeader("Access-Control-Allow-...","...");
-
-
常用
API：jsonp/fetch/axios
-
存儲
-
cookie：HTTP中借用來做本地存儲，與服務(wù)端通訊 -
H5：localStorage/sessionStorage- 每個域名最大
5M set/getItem('name','value')-
localStorage永久存儲 -
sessionStorage只存在當(dāng)前會話，瀏覽器關(guān)了就沒了
- 每個域名最大
- 區(qū)別：容量/
API易用性/HTTP
-
-
開發(fā)環(huán)境
git-
git diff/showgit checkout -b feature-
git stash+git checkout -b feature+git stash pop
webpack-
babel- 模塊化
- 生產(chǎn)-哈希
-
運行環(huán)境
-
性能優(yōu)化
- 基本原則：空間換時間
- 多用內(nèi)存、緩存等
- 減少計算量，減少網(wǎng)絡(luò)加載
- 怎么做？
- 加載
- 減少體積[壓縮代碼]
- 減少訪問次數(shù)[合并代碼[雪碧圖]/
SSR服務(wù)端渲染/緩存]- 緩存：hash放在文件名/不變就找自動生成的緩存/304
- 服務(wù)端渲染：網(wǎng)頁和內(nèi)容一起加載一起渲染/
vue SSR
-
CDN分發(fā)[基于地域的static靜態(tài)文件服務(wù)]
- 渲染
-
CSS放<head>里/JS放<body>底部/JS：DOMContentLoaded/懶加載- 懶加載：
src="preview.png" real-src="real.png"滑到了再加載
- 懶加載：
-
DOM查詢緩存/要插入的DOM元素先放進document fragment/節(jié)流防抖RAF：體驗流暢- 防抖：輸入暫停/結(jié)束再出結(jié)果[監(jiān)聽輸入框/
keyup/...]- 弄一個
timer，有就清除定時函數(shù)，沒有就干活并清空
- 弄一個
- 節(jié)流
- 弄一個
timer，有就返回，沒有就干活并清空
- 弄一個
-
RAF: requestAnimationFrame(func)自動定時函數(shù)
- 防抖：輸入暫停/結(jié)束再出結(jié)果[監(jiān)聽輸入框/
-
- 加載
- 基本原則：空間換時間
-
安全
-
XSS- 用戶輸入惡意腳本
- 轉(zhuǎn)換特殊字符
-
XSRF- 跨站請求偽造
- 用
post請求/進行驗證
-
-
