作為一名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。基礎打不好，任何東西都是玩不轉的。如果基礎好，玩什麽都是盡在掌握而已。

大前端之——數據交互