大前端之——数据交互

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