Demo了解Meteor初步



通过Demo了解Meteor7大技术原则


现在的操作不太一样了,现在是手机的版本。


0.png


在浏览器的debug模式的network中,就可以看到你这次的与服务器的请求做了怎么的交互。


1.png


如果你没用过这个浏览器的debug模式的话,我这里简单讲一下。NetWork可以看到你的浏览器与服务器之间上行下行做了哪些交互。


2.png


这个filter你可以把这些内容给过滤一下。


3.png


我们现在把这个浏览器的过滤切换到all,就是全部都显示,然后我们刷新这个页面,就可以在这里看到浏览器在访问这个页面的时候到底干了哪些事情。


4.png


我们现在就来看看浏览器到底干了哪些事呢?


通常的来讲,如果不是meteor APP,而是普通的APP的话。那么首先是请求服务器。


5.png


然后,服务器会下行一个html过来,正常情况下都是这样的。


6.png


然后页面里面显示的所有内容都是html文件里面传回来的有的。


7.png


但是,我们现在看一下这个meteor APP是怎么做的?


8.png


你们看,这里面的body没有东西。


9.png


但是在header里面的东西可不少,有一大堆的script文件。这个说明了什么呢?我们记得以前提到过。meteor里面,在网上向下行的数据里面是没有html的。你的这页面的内容不是在server端渲染好了送给你的。像LAMP那种架构是需要在服务器端把html渲染好了,然后送回到前端来显示的。现在meteor不是这样的。


那它是怎样的呢?实际上都是它传回来的这些JavaScript文件去画出来的。这后面的一长串,一大堆都是JavaScript文件。


90.png


在服务器端的源文件中有这么一个文件。


91.png


它的开始标签是template,不是html。这是html5的一种写法。然后基本还是html,除了里面有一些大括号括起来的东西,这些是handle bar的一些写法,是控制逻辑,是内容替换。比如这个user id替换成了用户的id。


92.png


这个文件是最终没有被传到client端的。而是,把这个文件编译成为了一个JavaScript文件,还包括和它对应的js文件。


93.png


那么这个js和html的文件就会被编译成一个单独的js文件,最终传到了浏览器,这里就是这个文件。


94.png


后面这个数字,就相当于打穿一个cache,相当于标识一个版本号一样。


95.png


实际传回来之后,是编译成为了这个样子的一个JavaScript文件。


96.png


这个JavaScript文件不是你写的,这个也不太好读,但是还是能读的。这个文件就是最终在浏览器端执行的,它执行的结果就是在浏览器上画出这样的一些页面来。


97.png



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

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

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

客服热线 400-862-8862

回到顶部