首页 > 代码库 > 大前端之——数据交互

大前端之——数据交互

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

  

  

大前端之——数据交互