因为BS技术发展太快了,我们多了解一下历史,防止自己走上了错误的道路。
1982年,Tim Berners-Lee 建立 HTML
1993年,大学生的 Marc Andreessen 在他的 Mosaic 浏览器加入 标记,从此可以在Web页面上浏览图片
1993年6月,HTML 由 IETF 工作小組发布草案
1994年10月,W3C 成立, 网络应用发展的标准规范交由 W3C 协会制定及推广
1995年11月,HTML 2.0,2000年6月被宣布已经过时
1996年1月 ,HTML 3.2 由 W3C 推荐为标准规范
1997年11月,HTML 4.0
1999年12月,HTML 4.01 以 XML 语法重新构建,较为严格,W3C推荐标准
2000年1月,XHTML 1.0,W3C推荐标准
2001年5月,XHTML 1.1,W3C推荐标准
2004年,WHATWG小组成立,由各大浏览器开发商组成,重拾HTML 4规格,开发 HTML 5规格
2006年,W3C认输,承认 XHTML 2.0不会成功
2007年,W3C重新成立 HTML工作小组,参考 WHATWG 的规格发展期HTML规格
2009年,XHTML 2.0被放弃,全面投入 HTML 5 规格的发展
2011年6月,Google宣布全面采用 HTML 5 技术
2012年, HTML 5被选为候选标准
2014年10月28日,HTML 5.0,W3C正式发布HTML 5.0推荐标准
也就是说现在最新的标准是HTML5,再看以前的老书都是很有可能走偏了,比如HTML4.01与HTML5就有一些不同。
动态网页发展史
HTML只是链接了万事万物,你可以从这个页面随便跳到另一个页面,也可以从这个网站跳到那个网站。
整个90年代,受限于网速,网页都是静态页,显示非常单一,前端的工作大部分都只是让美工来切切图和写写HTML CSS。也因此,在90年代,前端还处在一种萌发期的状态,前端工程师这一工种也没有明确出现。
HTML它们大都是静态的,有人就想,这些页面有些都是结构相似的,那能不能不变的地方就放在HTML页面的,动的内容放在数据库里。
于是WEB1.0技术出现了,将程序与页面混合在一起,用特殊的标记分开,并且把页面的名字由HTML变成了ASP,PHP,JSP等等,这样web服务器就会识别为需动态加载的页面,从而调用ASP等对应的CGI程序来解释它,这也是极简VFPBS入门开发讲的内容。
代码语言:javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>smarty test1</title>
</head>
<body>
它的名字叫<%=name %>
</body>
</html>
后端的工作越来越多,后端程序就开始分层。就像在小公司里,大家啥都干,但公司规模大了之后,就要分部门,职责明确,代码也从揉在一起发展到Model,View和Controller,分别负责不同的功能。
这就是后端MVC模式的盛行,让我们可以在模板里写上要展现的数据。以前的代码都是所有内容写在一起,现在就会用Model负责数据。
后端渲染页面之前,会把数据库的数据显示在前端。动态页面使得前端本身的丰富程度大大提升。这一下子迎来了整个互联网开发的繁荣时期,但这种模式下的任何数据更新,都需要刷新整个页面,并且在带宽不足的年代,这样做会耗费不少加载网页的时间。
所以这个时代的网页主要还是以显示数据和简单的特效为主,比如当时众多的门户网站,也都没有太多的用户交互,主要就是显示后端存储的新闻。
WEB2.0的发展
WEB1.0前面提前了加载慢,它有一个天生弊端,一个是加载页屏白屏,无论现在浏览器障眼法多少,只要网页一卡,白屏必然出现。比如你公众号打开一个网页,刚开始加载的时候,是不是白屏。第二每交互一次,都要把整个页面提交给后端,这样的效率极低。
VFP开发平台群里面有一位PHP的人,牛皮吹得震天响,说自己的PHP用得多好多好,顺利截图发群里,你们研究学习的BS,PHP早就都咋样咋样。后来我们聊到了AJAX技术,他竟然不知道,他的页面也没有用到这个。在VFP开发平台群里面,装大师可是要被嘲笑的,当然我们也没有怎么回击,但可能自觉丢脸了吧,从此再也没有群里露面发言过了,唉,甚是可惜。
AJAX(异步JavaScript和XML)只是微软无心插柳的作品,XMLHttpRequest一开始只是微软浏览器提供的一个接口,后来各大浏览器纷纷效仿也提供了这个接口。
2004年,Google发布了Gmail,用户可以在不刷新页面的情况下进行复杂的交互,之后,Ajax逐渐成为网页开发的技术标准,也不断地被应用于各种网站。Ajax这个技术让我们可以异步的获取数据并且刷新页面,从此前端不再受限于后端的模板,这也宣告了Web2.0时代正式到来。至此,前端工程师也正式作为一个独立工种出现。
在Gmail诞生后,大家意识到前端也可以做出复杂应用。但这个这时候,浏览器有ie6.0-8.0,还有其它公司的浏览器,支持的标准和特性都不一样,这个是战国时代,浏览器的混战和兼容性问题很大,比如绑定事件不同的浏览器就要写不同的代码,但而jQuery的出现迅速风靡全球,一个$走天下,学会jQuery就等同于学会了前端,在这之后,前端的具体开发不再被JavaScript的兼容性问题所困扰。大家前端开发就是jQuery Bootstrap一把梭,成为了前端开发领域的主流技术,前端代码内嵌在后端的项目中,写完直接发布,通篇都是如下的代码:
代码语言:javascript复制$('#alert-btn').on('click',function(){
$('#app .input').val('hi')
})
那个时候写代码,就是找到某个标签,然后进行操作,特别像铁器时代的拼刺刀,随着前端项目规模的逐渐提升,前端也需要规模化的时候,在2009年AngularJS和Node.js的诞生,也宣告前端工业革命的到来。
前端三大框架
现代前端框架都是是利用数据驱动页面,但是怎么处理数据的变化,各个框架走出了不同的路线。
这些框架要回答的核心问题就是,数据发生变化后,我们怎么去通知页面更新。
各大框架在这个步骤上,各显神通:
Angular1就是最老套的脏检查。所谓的脏检查,指的是Angular1在对数据变化的检查上,遵循每次用户交互时都检查一次数据是否变化,有变化就去更新DOM这一方法。这个方法看似简单粗暴,但算是数据驱动页面早期的实现,所以一经推出,就迅速占领了前端市场。
后面Angular团队自断双臂,完全抛弃Angular1,搞了一个全新的框架还叫Angular,引入了TypeScript、RxJS等新内容,虽然这些设计很优秀,但是不支持向前兼容,抛弃了老用户。这样做也伤了一大批Angular1用户的心,微软搞WP8,抛弃了WP7开发者,至此WP平台玩完。这大概也是也是Angular这个优秀的框架现在在国内没有大面积推广的原因。
而Vue的解决方案,就是使用响应式,初始化的时候,Watcher监听了数据的每个属性,这样数据发生变化的时候,我们就能精确地知道数据的哪个key变了,去针对性修改对应的DOM即可,这一过程可以按如下方式解构:
在上图中,左边是实际的网页内容,我们在网页中使用{{}}渲染一个变量,Vue1就会在内容里保存一个监听器监控这个变量,我们称之为Watcher,数据有变化,watcher会收到通知去更新网页。
数据变,页面变。
Facebook的React团队提出了不同于上面的Angular、Vue的的解决方案,他们设计了React框架,他们在浏览器数据结构之上,搞了一个叫虚拟DOM的东西,也就是用一个JavaScript对象来描述整个浏览器的数据结构-DOM树。修改只改虚拟DOM的结构,然后根据通过虚拟DOM计算出变化的数据,去进行精确的修改实际浏览器的结构。
这种形式不仅让性能有个很好的保障,我们还多了一个用JSON来描述网页的工具,并且让虚拟DOM这个技术脱离了Web的限制。因为积累了这么多优势,虚拟Dom在小程序,客户端等跨端领域大放异彩。
虚拟Dom在运行的时候就是这么一个JS对象:
代码语言:javascript复制{
tag: "div",
attrs: {
id: "app"
},
children: [
{
tag: "p",
attrs: { className: "item" },
children: ["Item1"]
},
{
tag: "div",
attrs: { className: "item" },
children: ["Item2"]
}
]
}
原来是JQuery是直接改浏览器的标签,现在是直接改这样的JS对象,再由框架更新到相应的标签位置。
由于浏览器操作DOM一直都是非常慢的,虚拟DOM的计算数据Diff的方式,能够确保尽可能少的操作DOM,这也是虚拟DOM驱动的框架性能一直比较优秀的原因之一。