前端知識突擊

JS判斷對象中是否有某屬性

• 經過. 或者[]

let test = {
    name: 'leemo'
}

test.name 
test["name"]

test.age //undefined

可根據 Obj.x!== undefined 判斷是否有該屬性，可是不能判斷屬性存在且值等於undefined的狀況

• in

若是指定的屬性存在於對象或原型鏈中，返回true

'name' in test //true

沒法分辨該屬性存在於自己仍是原型鏈上

• hasOwnProperty()

test.hasOwnProperty('name')

只能判斷自身屬性

---

node.js本身寫服務器的方法

//引入http模塊
var http = require("http");
//設置主機名
var hostName = '127.0.0.1';
//設置端口
var port = 8080;
//建立服務
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(`服務器運行在http://${hostName}:${port}`);
});

在html代碼中添加

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

便可用該頁面請求咱們寫的web服務器
參考文檔

---

React兄弟組件間通訊

原理：先把一個子組件數據傳輸到父組件，經過父組件傳輸到另一個子組件，實現兄弟件組件通訊

*待續

---

react 16.0之後的生命週期函數

• 鉤子函數componentDidCatch 若是render()函數拋出錯誤，則會觸發該函數
• 16.3引入的兩個全新的生命週期函數：
  getDerivedStateFromProps
  首先之前須要利用被刪除的那些生命週期函數才能實現的功能，均可以經過 getDerivedStateProps 的幫助來實現。
  另外對於 React16 架構最大的變更就是 Fiber 了，在 Fiber 架構下啓用了啓用 async render 以後，render 以前的生命週期函數可能會被調用屢次，若是在 componentWillMount 進行 AJAX 請求可能會致使無謂地屢次調用AJAX。

其次在 React v16.3 剛發佈這個函數的時候，getDerivedStateFromProps 這個生命週期函數，我在從它的名字來看的時候，還覺得它主要是爲了代替 componentWillReceiveProps 的，但進過了解後發現，這樣說其實並不許確。由於 componentWillReceiveProps 只在由於父組件而引起的Updating過程當中纔會被調用。而getDerivedStateFromProps在Updating和Mounting過程當中都會被調用。還須要注意的是，一樣是 Updating 過程，若是是由於自身進行的 setState 或者 forceUpdate 所引起的渲染，getDerivedStateFromProps 也不會被調用。

那 getDerivedStateProps 到底是啥東西呢？首先 getDerivedStateProps 生命週期函數是一個靜態函數，因此函數體內不能訪問this。

getSnapshotBeforeUpdate
這函數會在render以後執行，而執行之時DOM元素尚未被更新，給了一個機會去獲取DOM信息，計算獲得一個snapshot，這個snapshot會做爲componentDidUpdate的第三個參數傳入。

getSnapshotBeforeUpdate(prevProps, pr

• 在17.0移除了三個生命週期函數
  componentWillMount
  componentWillReceiveProps
  componentWillUpdate
  即render以前的生命週期函數除了shouldUpdateComponent都被刪除了

---

flex垂直水平居中

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

---

generator co async

generator
特色
function*
可使用yield返回屢次

co模塊思路
co 模塊的思路就是利用 generator 的這個特性，將異步操做跟在 yield 後面，當異步操做完成並返回結果後，再觸發下一次 next() 。固然，跟在 yield 後面的異步操做須要遵循必定的規範 thunks 和 promises。

sync優勢
內置執行器。 Generator 函數的執行必須靠執行器，因此纔有了 co 函數庫，而 async 函數自帶執行器。也就是說，async 函數的執行，與普通函數如出一轍，只要一行。
更好的語義。 async 和 await，比起星號和 yield，語義更清楚了。async 表示函數裏有異步操做，await 表示緊跟在後面的表達式須要等待結果。
更廣的適用性。 co 函數庫約定，yield 命令後面只能是 Thunk 函數或 Promise 對象，而 async 函數的 await 命令後面，能夠跟 Promise 對象和原始類型的值（數值、字符串和布爾值，但這時等同於同步操做）。

---

webStorage

LocalStorage/SessionStorage
**(LocalStorage&SessionStorage)&&Cookie: cookie服務端 webstorage服務於本地
1都是用來存儲客戶端臨時信息的對象
2均只能存儲字符串類型的對象
3LocalStorage的生命週期爲永久，除非在瀏覽器上的UI清楚信息，不然永遠存在
SessionStorage的生命週期爲當前窗口/網頁，一旦關閉該標籤、窗口，存儲的數據就被清空了
4不一樣瀏覽器不能共享L或者S的信息。
相同瀏覽器的不一樣頁面（頂級窗口）能夠共享相同的LocalStorage可是不能共享SessionStorage
若是是嵌入式框架(iframe) 則能夠共享S信息
localStorage和sessionStorage使用時使用相同的API：
localStorage.setItem("key","value");//以「key」爲名稱存儲一個值「value」
localStorage.getItem("key");//獲取名稱爲「key」的值
localStorage.removeItem("key");//刪除名稱爲「key」的信息。
localStorage.clear();//清空localStorage中全部信息

websocket

https://www.jianshu.com/p/2ba...它實現了瀏覽器和服務器全雙工通訊 創建在傳輸層上它容許服務端向客戶端傳遞信息，實現瀏覽器和客戶端雙工通訊。彌補了HTTP不支持長鏈接的特色，，只創建一次鏈接 鏈接不會斷 服務端有數據就會自動返回數據給客戶端由於是一次長鏈接 就不用一次次加入cookie，，服務器和瀏覽器只須要作一個握手的動做，而後在瀏覽器和服務器之間就造成了一條快速通道二者之間就能夠經過TCP鏈接直接交換數據獲取web socket鏈接後能夠用過send（）方法向服務器發送數據經過onmessage接受返回的數據