前端知識(shí)突擊

ShevaKuilin 發(fā)布于2019-08-26 13:58 / 371人閱讀

摘要：清空中所有信息它實(shí)現(xiàn)了瀏覽器和服務(wù)器全雙工通信建立在傳輸層上它允許服務(wù)端向客戶(hù)端傳遞信息，實(shí)現(xiàn)瀏覽器和客戶(hù)端雙工通信。

JS判斷對(duì)象中是否有某屬性

通過(guò). 或者[]

let test = {
    name: "leemo"
}

test.name 
test["name"]

test.age //undefined

可根據(jù) Obj.x!== undefined 判斷是否有該屬性，但是不能判斷屬性存在且值等于undefined的情況

如果指定的屬性存在于對(duì)象或原型鏈中，返回true

"name" in test //true

無(wú)法分辨該屬性存在于本身還是原型鏈上

hasOwnProperty()

test.hasOwnProperty("name")

只能判斷自身屬性

node.js自己寫(xiě)服務(wù)器的方法

//引入http模塊
var http = require("http");
//設(shè)置主機(jī)名
var hostName = "127.0.0.1";
//設(shè)置端口
var port = 8080;
//創(chuàng)建服務(wù)
var server = http.createServer(function(req,res){
    res.setHeader("Content-Type","text/plain");
    res.setHeader("Access-Control-Allow-Origin","*")//解決跨域
    res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); //解決跨域
    res.end("hello world");
});
server.listen(port,hostName,function(){
    console.log(`服務(wù)器運(yùn)行在http://${hostName}:${port}`);
});

在html代碼中添加

  function getText(){
        $(".text").load("http:127.0.0.1:8080");
    }

即可用該頁(yè)面請(qǐng)求我們寫(xiě)的web服務(wù)器
參考文檔

React兄弟組件間通信

原理：先把一個(gè)子組件數(shù)據(jù)傳輸?shù)礁附M件，通過(guò)父組件傳輸?shù)搅硗庖粋€(gè)子組件，實(shí)現(xiàn)兄弟件組件通信

*待續(xù)

react 16.0以后的生命周期函數(shù)

鉤子函數(shù)componentDidCatch 如果render()函數(shù)拋出錯(cuò)誤，則會(huì)觸發(fā)該函數(shù)

16.3引入的兩個(gè)全新的生命周期函數(shù)：
getDerivedStateFromProps
首先以前需要利用被刪除的那些生命周期函數(shù)才能實(shí)現(xiàn)的功能，都可以通過(guò) getDerivedStateProps 的幫助來(lái)實(shí)現(xiàn)。
另外對(duì)于 React16 架構(gòu)最大的變動(dòng)就是 Fiber 了，在 Fiber 架構(gòu)下啟用了啟用 async render 之后，render 之前的生命周期函數(shù)可能會(huì)被調(diào)用多次，如果在 componentWillMount 進(jìn)行 AJAX 請(qǐng)求可能會(huì)導(dǎo)致無(wú)謂地多次調(diào)用AJAX。

其次在 React v16.3 剛發(fā)布這個(gè)函數(shù)的時(shí)候，getDerivedStateFromProps 這個(gè)生命周期函數(shù)，我在從它的名字來(lái)看的時(shí)候，還以為它主要是為了代替 componentWillReceiveProps 的，但進(jìn)過(guò)了解后發(fā)現(xiàn)，這樣說(shuō)其實(shí)并不準(zhǔn)確。因?yàn)?componentWillReceiveProps 只在因?yàn)楦附M件而引發(fā)的Updating過(guò)程中才會(huì)被調(diào)用。而getDerivedStateFromProps在Updating和Mounting過(guò)程中都會(huì)被調(diào)用。還需要注意的是，同樣是 Updating 過(guò)程，如果是因?yàn)樽陨磉M(jìn)行的 setState 或者 forceUpdate 所引發(fā)的渲染，getDerivedStateFromProps 也不會(huì)被調(diào)用。

那 getDerivedStateProps 究竟是啥東西呢？首先 getDerivedStateProps 生命周期函數(shù)是一個(gè)靜態(tài)函數(shù)，所以函數(shù)體內(nèi)不能訪問(wèn)this。

getSnapshotBeforeUpdate
這函數(shù)會(huì)在render之后執(zhí)行，而執(zhí)行之時(shí)DOM元素還沒(méi)有被更新，給了一個(gè)機(jī)會(huì)去獲取DOM信息，計(jì)算得到一個(gè)snapshot，這個(gè)snapshot會(huì)作為componentDidUpdate的第三個(gè)參數(shù)傳入。

getSnapshotBeforeUpdate(prevProps, pr

在17.0移除了三個(gè)生命周期函數(shù)
componentWillMount
componentWillReceiveProps
componentWillUpdate
即render之前的生命周期函數(shù)除了shouldUpdateComponent都被刪除了

flex垂直水平居中

display: flex;
justify-content: center; /* 水平居中 */
align-items: center;     /* 垂直居中 */

generator co async

generator
特點(diǎn)
function*
可以使用yield返回多次

co模塊思路
co 模塊的思路就是利用 generator 的這個(gè)特性，將異步操作跟在 yield 后面，當(dāng)異步操作完成并返回結(jié)果后，再觸發(fā)下一次 next() 。當(dāng)然，跟在 yield 后面的異步操作需要遵循一定的規(guī)范 thunks 和 promises。

sync優(yōu)點(diǎn)
內(nèi)置執(zhí)行器。 Generator 函數(shù)的執(zhí)行必須靠執(zhí)行器，所以才有了 co 函數(shù)庫(kù)，而 async 函數(shù)自帶執(zhí)行器。也就是說(shuō)，async 函數(shù)的執(zhí)行，與普通函數(shù)一模一樣，只要一行。
更好的語(yǔ)義。 async 和 await，比起星號(hào)和 yield，語(yǔ)義更清楚了。async 表示函數(shù)里有異步操作，await 表示緊跟在后面的表達(dá)式需要等待結(jié)果。
更廣的適用性。 co 函數(shù)庫(kù)約定，yield 命令后面只能是 Thunk 函數(shù)或 Promise 對(duì)象，而 async 函數(shù)的 await 命令后面，可以跟 Promise 對(duì)象和原始類(lèi)型的值（數(shù)值、字符串和布爾值，但這時(shí)等同于同步操作）。

webStorage

LocalStorage/SessionStorage
**(LocalStorage&SessionStorage)&&Cookie: cookie服務(wù)端 webstorage服務(wù)于本地
1都是用來(lái)存儲(chǔ)客戶(hù)端臨時(shí)信息的對(duì)象
2均只能存儲(chǔ)字符串類(lèi)型的對(duì)象
3LocalStorage的生命周期為永久，除非在瀏覽器上的UI清楚信息，否則永遠(yuǎn)存在
SessionStorage的生命周期為當(dāng)前窗口/網(wǎng)頁(yè)，一旦關(guān)閉該標(biāo)簽、窗口，存儲(chǔ)的數(shù)據(jù)就被清空了
4不同瀏覽器不能共享L或者S的信息。
相同瀏覽器的不同頁(yè)面（頂級(jí)窗口）可以共享相同的LocalStorage但是不能共享SessionStorage
如果是嵌入式框架(iframe) 則可以共享S信息
localStorage和sessionStorage使用時(shí)使用相同的API：
localStorage.setItem("key","value");//以“key”為名稱(chēng)存儲(chǔ)一個(gè)值“value”
localStorage.getItem("key");//獲取名稱(chēng)為“key”的值
localStorage.removeItem("key");//刪除名稱(chēng)為“key”的信息。
localStorage.clear();//清空l(shuí)ocalStorage中所有信息

websocket

https://www.jianshu.com/p/2ba...
它實(shí)現(xiàn)了瀏覽器和服務(wù)器全雙工通信建立在傳輸層上
它允許服務(wù)端向客戶(hù)端傳遞信息，實(shí)現(xiàn)瀏覽器和客戶(hù)端雙工通信。
彌補(bǔ)了HTTP不支持長(zhǎng)連接的特點(diǎn)
，，只建立一次連接連接不會(huì)斷服務(wù)端有數(shù)據(jù)就會(huì)自動(dòng)返回?cái)?shù)據(jù)給客戶(hù)端
因?yàn)槭且淮伍L(zhǎng)連接就不用一次次加入cookie
，，服務(wù)器和瀏覽器只需要做一個(gè)握手的動(dòng)作，
然后在瀏覽器和服務(wù)器之間就形成了一條快速通道
兩者之間就可以通過(guò)TCP連接直接交換數(shù)據(jù)
獲取web socket連接后可以用過(guò)send（）方法向服務(wù)器發(fā)送數(shù)據(jù)
通過(guò)onmessage接受返回的數(shù)據(jù)