Node.js学习之MEAN



全栈工程师介绍从LAMP到MEAN再到Meteor


和前半截还是一样,我们从server请求开始。我们像server发出一个请求。那么server端这个时候,返回的html文件。也是开始开始先返回html文件。但这个html文件有一点儿不同,它后面带了好多scripts。这个JavaScript文件会发动客户端。首先这个html文件里面,已经包含了一些正文内容了。然后呢!会运行这个js文件在后边。这个js文件在运行的时候呢!是进行页面的局部渲染。


0.png


也就是说数据请求。当我做了一些请求的工作,比如说我这里有一个按钮,我想改变它的颜色。


1.png


那这种情况呢?如果以前没有ajax的话,恐怕我点击这个按钮之后,这个还会去请求server,server再给我html文件,把这个数据填到里面去。需要重新刷新一下页面。这样显然很不好,很慢,而且用户体验不好。现在ajax怎么做呢?当我点击这个按钮的时候呢!我并没有向服务器马上发起一个页面请求。而是通过触发这个js,用这个js想服务器发起的一个ajax请求。


这个ajax请求的返回结果。比如放到一个json(这个是我们必须得知道的东西)的包里边,就送到了这个浏览器这边。浏览器里边,也是这个js程序,它收到你返回的这个json文件里边,包括内容。它把得到的1000这个数字在DOM里边(Document Object Model),在浏览器里面找到应该修改的数据的位置。然后把这个1000填到这里边。这就完成了我们现在的这个工作。


那么这个好处,显而易见。用户不需要重新刷新页面,而是只是说我用我的JavaScript程序去server端请求。只是把数据拿过来。拿到了以后,我在页面中去修改这个某个单元的值。使其达到这个效果。那么这个已经是很大的一个改进了。因为这个用户没有太多的等待,所有的工作都是异步完成的。大家注意到,我刚才把这个CPU往这边挪了一点儿。


2.png



什么意思呢?这时候已经不完全把所有的任务都放在服务器端完成了。而是有很多的工作,包括点击事件的获取,请求数据,以及得到数据以后去改变DOM,改变这个页面某一个单元的文字或内容。这个工作都是由JavaScript在这个浏览器端完成的,所以它的CPU的运算量已经会利用到一些了。也就是说由前端和后端还有数据库我们共同分担整个的计算逻辑。


3.png


这样的话呢!已经不完全是压在服务器端了。这就形成了一个所谓的前端和后端的概念。我们在最早的时候,LAMP还没有什么前端和后端的概念。我们那时候只有后端,没有前端。但是到了ajax时代呢!已经有前端了,因为要用JavaScript写一些程序在浏览器里面跑。前端与后端之分,就产生了两种角色了。就是这个栈里边有两种角色。

前端栈,其实没得选择,就是html、css、JavaScript,因为JavaScript是事实上唯一可以在浏览器跑的脚本语言,其它的脚本语言就没有真正的被用起来。


4.png


后端就热闹了,后端就有一堆语言。所以组成了很多种不同的技术栈。而且每一个技术栈还有自己的适应的框架,每个框架都提供了很多便利的方法。


5.png


这就是所谓的前端和后端。通常后端的也不会懂得JavaScript。好在它们之间呢还有一个ajax这个东西在中间。所以不懂也没关系。所以呢!这就是前端和后端很有趣的这么几个架构。一直延续到现在,还是在互联网上的一个主流。在meteor来之前,仍然是互联网的一个主流。那么,在这个ajax之后,又出现了一个更新的。当我请求一个页面的时候。刚才我们讲了,如果我们从浏览器这边来请求一个东西。第一次请求html,返回来html数据。然后当用户点击了一个link的话,比如说这里边点了之后,它连接到本网站的另外一个页面。


6.png


那这个时候呢!实际上是会发另外一个新的请求到服务器。浏览器会把这个页面清空,然后重新请求来一遍。这个事情实际上也很正常,因为浏览器就应该是这样的。但是大家觉得这个体验不好,因为很多时候真的没必要去请求一个新的页面。前一个页面和后一个页面其实很多地方也是通用的。比如我们的框架,左边是一个菜单栏,顶部是一个header。内容在里边换。比如是常见的这种架构。


7.png


我在左边里面点击了某一个链接的话,实际上只需要将右边的内容换掉就可以了。我就没必要把整个的内容都换掉。这个东西呢!后来就出现了SPA(Single Page Application)。它的最大的不同之处就是内部有一个router(路由),它的任务就是看你这个页面的链接,决定是否让浏览器去服务器请求,而是自己来处理这个url。来决定该选些什么东西,渲染什么东西。然后还是由JavaScript来实现在页面内的渲染,这个JavaScript在里面所起的作用是非常大的。


那么在这个新的架构下面呢!浏览器和服务器的传播不再是以前那种方式了。现在是请求一次,第一次就把所有的js模板文件等等一起送过来。然后在本地跑js。由js控制这写所有的渲染,如果需要数据请求,再问服务器要。所以在这种SPA的架构下呢!这个js的功能就很强大了,而且作用也很重要。所以我这里又把CPU往这边挪了。


8.png


服务器这个时候已经变成一个比较次要的了。这个就是SPA,这个时代呢!就离我们现在越来越近了。下一步就是要提到这个MEAN了。我们在前面提到了前端语言JavaScript,后端这么多语言。那么就有人在想,前端是JavaScript已经是不可逆转的事实了。那么后端为什么非要搞那么多种不同的语言让人去学呢?为什么不把JavaScript在后盾也跑起来。这样前后端是一种语言。岂不是只是学习同一种技术,就把前后端的事情都做了。结果再几年前就出现了Node.js。


这个Node实际上就是原来把那个浏览器里边的,谷歌的Chrome浏览器渲染引擎V8,给挪到了服务器端了,在服务器端跑起来,这个运行环境就被称作Node。这个出来之后,有非常不错的效果,这个js的运行解析效率大大的提高了。让这个以前写js的前端工程师,能够去写后端了。而且JavaScript还有比较大的优点。JavaScript的function,单线程等是它的最大的优点。很多人会怀疑单线程怎么能算是优点呢?这个明明就是缺点,应该是多线程运行效率才高。其实这个单线程的好处是非常大的,尤其是对web服务器,做web来讲;用单线程运行效率才更高。


在新的Node出来以后,就出现了一堆新的框架。也是顺应而生的,其中一个就叫做MEAN的,我们刚才也解释了。这个是相当流行的。


9.png



这次的课程主要是讲Meteor,这些新的技术组合在一起,就叫做MEAN,是一种新的架构。



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
? 2012-2016 葡京国际首页 www.ybxiongdi.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

秋招大聚惠,豪华礼包你领了吗?

客服热线 400-862-8862

回到顶部