大前端之——数据交互

　　做为一名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。基础打很差，任何东西都是玩不转的。若是基础好，玩什么都是尽在掌握而已。