前端知識突擊

hearaway 發布于2019-08-02 15:11 / 3038人閱讀

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

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

通過. 或者[]

let test = {
    name: "leemo"
}

test.name 
test["name"]

test.age //undefined

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

如果指定的屬性存在于對象或原型鏈中，返回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接受返回的數據

云服務器 GPU云服務器前端知識前端知識阿里云 html前端知識前端開發基礎知識

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53952.html

前端知識突擊

摘要：清空中所有信息它實現了瀏覽器和服務器全雙工通信建立在傳輸層上它允許服務端向客戶端傳遞信息，實現瀏覽器和客戶端雙工通信。 JS判斷對象中是否有某屬性通過. 或者[] let test = { name: leemo } test.name test[name] test.age //undefined 可根據 Obj.x!== undefined 判斷是否有該屬性，但是不...

ShevaKuilin 2019-08-26 13:58 評論0 收藏0
前端知識突擊

摘要：清空中所有信息它實現了瀏覽器和服務器全雙工通信建立在傳輸層上它允許服務端向客戶端傳遞信息，實現瀏覽器和客戶端雙工通信。 JS判斷對象中是否有某屬性通過. 或者[] let test = { name: leemo } test.name test[name] test.age //undefined 可根據 Obj.x!== undefined 判斷是否有該屬性，但是不...

yagami 2019-08-30 11:00 評論0 收藏0
初學者福音！可能是最適合你的Java學習路線和方法推薦。

摘要：學習完多線程之后可以通過下面這些問題檢測自己是否掌握，下面這些問題的答案以及常見多線程知識點的總結在這里。可選數據結構與算法如果你想進入大廠的話，我推薦你在學習完基礎或者多線程之后，就開始每天抽出一點時間來學習算法和數據結構。我自己總結的Java學習的系統知識點以及面試問題，已經開源，目前已經 35k+ Star。會一直完善下去，歡迎建議和指導，同時也歡迎Star： https://...

yanest 2019-08-16 17:28 評論0 收藏0
20W字囊括上百個前端面試題的項目開源了

摘要：字囊括上百個前端面試題的項目開源了這個項目是什么項目內容這個項目目前在上剛剛開源主要內容如下前端面試題主要整理了高頻且有一定難度的前端面試題對這些面試題進行解讀前端原理詳解針對一些有一定難度面試題涉及的知識點進行詳解比如涉及的編譯原理響應式 20W字囊括上百個前端面試題的項目開源了這個項目是什么? 項目內容這個項目目前在GitHub上剛剛開源,主要內容如下: 前端面試題: 主要整...

Euphoria 2019-08-26 10:49 評論0 收藏0
作為一技術人員，面試前都需要做哪些準備？

摘要：部分公司會存在其他部門領導，例如騰訊在較高級別崗位面試時，跨部門的交叉面試，面試內容與三面基本相同。如何在面試時穩定發揮一面試考查點是可以在短期內突擊的，也是面試前需要重點準備的內容。 showImg(https://segmentfault.com/img/remote/1460000019309535); showImg(https://segmentfault.com/img/r...

chengtao1633 2019-08-16 17:42 評論0 收藏0