大前端之——數據交互

　　做爲一名web前端工程師，不少人認爲前端不就是用來作頁面的嗎。在上一篇文章我已經說過了，前端可不只僅作頁面，今天我就來簡單的介紹工做中的數據處理問題。

　　從傳統的開發過程來講，前端的主要做用是頁面模板，數據渲染都交給的後端去了，到如今，還有不少公司是這種模式。若是你不幸是這個體制下的前端worder，那就要多注意了，如今主流乃至將來的前端的工做流程是怎樣的了：

　　跟傳統模式同樣，第一步永遠是基本的頁面架構，也是咱們平時比較熟悉的HTML+CSS。第二部分，也是你們學習過程當中不多有機會練習到的數據傳輸渲染方面。那麼平時具體工做中到底怎麼實現這些數據綁定的了。

　　通常狀況下，這些數據是之後臺的數據接口形式傳輸的，數據經過用戶不一樣的操做指令顯示渲染再頁面中。這個數據模型，控制，視圖渲染的模式也就是咱們常常據說但一直都不知道是啥的MVC模式。簡單來講就是model，view，controller，包括近幾年衍生出來的MVVM，MVP模式都是一種解決方案而已。對與前端來講，這些模式在前端框架出來以前是很陌生的，由於你們根本就用不上，你寫的頁面模板就是給後臺人員作視圖渲染去了。

　　但近幾年的大環境是怎麼樣的，前端框架井噴式爆發，包括比較火熱的vue，angular，react，等等。這些框架都各有千秋，並且基本都是基於視圖這個功能，也就是說，數據渲染部分開始由前端在控制了，然後臺如今在專心處理數據以及服務器就能夠了。

　　那麼咱們的數據怎麼接收，怎麼發送了。這就須要咱們瞭解一點基本的HTTP協議，基於TCP連接的，說簡單點，也就是說經過HTTP協議訪問的網站實際是在請求一個服務器上的頁面資源而已，創建連接後，服務器返回資源，客戶機下載資源並解析咱們的前端代碼。因此，前端的代碼是客戶機內編譯的，然後臺的代碼通常是在處理服務器的事務邏輯。

　　數據最簡單的就是表單傳輸:

<form action="/login" method="post">
    <input type="text" name="user">
    <input type="text" name="pwd">
</form>

　　上面這段代碼的意思相信有基礎的學員都能看懂。咱們把數據user和pwd經過post傳輸的/login中，這個/login就是咱們所說的路由了，若是後臺處理了/login的post的請求，那麼就能夠返回原頁面一個數據以表示收到了登陸請求，至於能不能輸入密碼成功並登錄成功，可能後臺會控制跳轉，也有可能AJAX接受這個/login返回的結果來判斷是否登錄成功或者失敗；

　　這是最簡單的方法，也是表單傳輸最多見的方式。

　　接下來另一種方式，也就是咱們不少學JS的同窗比較崇拜的一個知識點：AJAX（Asynchronous JavaScript and XML）異步的Javascript和XML。

　　有時候我很納悶，不少同窗學這一塊不知道爲何一直抓不到重點是什麼，重點只有一個，異步啊！！

　　一樣是數據傳輸，異步這個東西就頗有意思了；傳統數據IO傳輸方式是一個線程處理一個IO，或者說一個線程處理多個IO，若是線程不夠，那麼IO就須要排隊。而異步最大的特色就是不排隊。這個IO請求後，下一個IO請求接着上，這樣就不會出現IO傳輸阻塞的現象，天然而然會充分利用到了服務器的性能，不浪費任何一絲資源。爲何Node如今不少在作高併發的企業在部署服務器的時候都會加入一個Node分支來處理這些高併發，這樣咱們服務器的處理能力以及效率相比之前的傳統方法高出N倍，這樣的說法絕不誇張。好比咱們在網上買一個1G的雲服務器，能處理的併發量能夠達到40W。這個數字很驚人，這了這個概念的存在，咱們不再用擔憂要在昂貴的服務器上投入過多的成本了。這對後臺來講，這是一個福音。

　　以上兩種就是數據傳輸的方式，如今看起來是否是很簡單？每每不少前端學習者JS都玩不溜就去玩框架，這是一個誤區，這些框架的出現除了Node之外，其他的都是各類自身機制，各類開發模式的數據渲染，樣式渲染而已，並無多麼複雜的東西。

　　因此，包括不少大神寫的文章中提到過，咱們不要由於框架忘記了咱們的自己，前端三板斧HTML+CSS+JS。基礎打很差，任何東西都是玩不轉的。若是基礎好，玩什麼都是盡在掌握而已。