码迷,mamicode.com
首页 > 其他好文 > 详细

聊聊前端技术的发展史

时间:2020-02-19 10:21:43      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:电商网站   复杂   事件   网页程序   硬件   用户   cas   lan   视频   

web的起源

给大家讲一个故事,在很久以前,互联网还没有出现,电脑虽然可以与另一台电脑通信,但是也就只能做一些发发邮件或者是用FTP传输一些文件的事情。

有个喜欢每天捣鼓新技术的程序员,名字我们暂且叫他小强吧。小强是一个球迷,每天都要看一些关于NBA球赛的新闻,而且搜集了很多有关球队介绍的资料保存在电脑的硬盘上。硬盘上的球队资料大概就是下图的效果。

技术图片

这样的文件有成百上千个,小强每天都要打开这些文件来欣赏各个球队的风采。有一天晚上,小强打开了“洛杉矶湖人队.txt”,文件中在介绍球队的时候,出现了一个词“科比·布莱恩特”,他灵机一动:这几个字上要是有个链接该多好啊!这样只需要轻轻一点,“科比·布莱恩特.txt”这个文件就能打开了,省的在硬盘上找来找去那么麻烦。对于程序员小强来说,这并不是什么难事,经过思考终于有了解决方案。

定义一个协议,让这些文件之间可以通过一些词链接起来,比如原来的文本是这么显示的:洛杉矶湖人队曾打造出两个“湖人王朝”,明星队员有科比·布莱恩特、奥尼尔等。

现在给这个纯文本的文字加一些标记:

洛杉矶湖人队曾打造出两个“湖人王朝”,明星队员有<a href=‘科比·布莱恩特.txt‘>科比·布莱恩特</a><a href=‘奥尼尔.txt‘>奥尼尔</a>等。

上面这些标记虽然能读懂,但是显示出来没什么用,于是小强就开发了一个软件,把带标记的这些文本显示成下面这个样子:

洛杉矶湖人队曾打造出两个“湖人王朝”,明星队员有<span style=‘color:blue;text-decoration:underline‘>科比·布莱恩特</span>、<span style=‘color:blue;text-decoration:underline‘>奥尼尔</span>等。

只要点击带下划线的文字,就可以打开对应的文件了!加了链接的文本就不是普通的文本了,而升级为超文本(HyperText)了!小强决定把这个软件成为浏览器,因为可以浏览这些文件,并且在各个文件中能够用链接来回跳转。

后来经过小强的一系列奇思妙想,把标记做了升级,使用&lt;li&gt;&lt;/li&gt;表示列表,&lt;table&gt;&lt;/table&gt;表示表格,&lt;img&gt;&lt;/img&gt;表示图片等等。原来的浏览器只能显示文本和链接,现在多了这些标记之后,浏览器可以根据标记显示相应的内容。这样一来,小强发明的超文本丰富多彩起来了。这时,小强才意识到,自己定义的原来是一套描述界面的标记语言,即HyperText Markup Language,简称HTML

小强觉得这个软件很好用,于是就把软件复制了好几份发给了自己的同学,有的同学喜欢足球,有的喜欢赛车,大家都可以把自己搜集的资料使用浏览器这个软件打开,方便快捷好用。但是在使用的过程中发现了一个问题,小明除了喜欢赛车之外,他也喜欢篮球,也想看小强电脑上的资料,但是关于球队和球员的介绍都在小强的电脑上,怎么查看呢?

这一下子就把小强给点醒了,每一台电脑的文档只有互联起来才有价值啊!一个单击运行的浏览器肯定是不行的,必须有网络,有了网络还不够,还得解决通信的问题!

于是小强又对浏览器进行了扩展,把文件格式定义为.html,并且把这种以.html格式的文件允许通过网络访问。那么之前的关于湖人队的介绍就变成了:

洛杉矶湖人队曾打造出两个“湖人王朝”,明星队员有&lt;a href=‘http://192.168.0.1/NBA/科比·布莱恩特.html‘&gt;科比·布莱恩特&lt;/a&gt;&lt;a href=‘http://192.168.0.1/NBA/奥尼尔.html‘&gt;奥尼尔&lt;/a&gt;等。

当别人在自己电脑的浏览器中点击科比·布莱恩特这个链接时,浏览器就发送一个请求:

GET http://192.168.0.1/NBA/科比·布莱恩特.html

小强有开发了一个软件,专门在自己的电脑上接收这种请求,接收到请求之后,会根据链接中的路径找到指定的文件,比如在“NBA”的目录下,找到了“科比·布莱恩特.html”的文件,然后通过网络告诉对方查找的结果,例如 “200” 表示找到了,“404”表示没找到,“500”表示小强电脑上的这个软件内部出错了。在找到对应文件之后,把.html文件发送过去,然后对方的浏览器中就可以显示关于该文件的内容了。

这个软件很像是一位贴心的服务于,专门在网络上为别人提供服务,那就叫它网络服务器吧,可以起一个洋气的名字,叫Apache

小强这时意识到,自己已经把“.txt”的普通文件变成了“.html”的超文本文件了,还定义了一套规范用于在浏览器和服务器之间传输超文本,那这个规范就叫做超文本传输协议(HyperText Transfer Protocol)吧,简称HTTP

小强用Apache搭建了一个网络服务器,把自己搜集的资料统统放上去,起了一个名字叫“NBA英雄榜”。小明也搭建了一个网络服务器,把自己搜集的资料放上去,叫作“汽车之家”。隔壁的小王一看,这东西真不错,于是就把自己珍藏多年的电影拿出来,也搞了一个网络服务器,叫“好看电影”……我们把这些网络服务器统称为网站,把网站与网站之间用超文本链接起来,方便大家使用。

网站之间的互联很快以燎原之势发展,向全国、全世界发展,最后形成了一个全世界互通互联的大网,称为World Wide Web,即WWW

让网页丰富起来

随着互联网的发展,越来越多的用户使用互联网获取信息,但此时的网页还是一个非常简单的“.html”文件,没有太多的样式修饰。当网页中的信息越来越多,也越来越丰富,人们就不再满足与只有文字和图片的单页。张大胖是一个对美有很高追求的一个程序员,他喜欢用编程创造各种颜值比较高的软件,每每当他看到如此单调的网页时,都有一种想要改造它的想法。终于有一天,张大胖实在受不了这种简单枯燥的网页了,于是他就用自己对HTML标记的了解,改造起了这种简单的标记语言。

如何把制作.html的网页文件像绘画一样操作呢?这是张大胖想到了每个标记都有自己的属性,索性就定义一个“style”属性,把需要的样式都用“style”属性进行设置。比如设计一张图片:

&lt;img style=‘width:100px;height:80px‘&gt;&lt;/img&gt;

通过width可以设置图片的宽度,height设置图片的高度,这样就改变图片的大小了。如果当设置的内容比较多时,可以单独定义一个&lt;style&gt;&lt;/style&gt;的标记,把标记的样式都放到style标记中进行设置,这样学习起来既简单,又可以设计精美的网页。后来大家就把这种可以单独编写的代码叫做层叠样式表(Cascading Style Sheets),简称CSS

再后来,又有人觉得,网页如果能有更加有趣的操作就好了,程序员可以按照自己的创意设计各种应用,比如在网页中嵌入一个计算器,或者是把一个好玩的游戏放到网页中等等。这时有一个叫王大明的程序员就按照Java这种编程语言的语法设计了一种脚本语言,并且可以在浏览器中解释执行,从此之后,浏览器中除了更够文本、图片之外,还可以播放声音、显示动画,还能玩各种游戏,大家的网上冲浪方式发生了翻天覆地的变化。

很多优秀的程序员们都想设计一款自己的浏览器,并且在自己开发的浏览器软件中制定独特的脚本编写方法,供大家学习和开发。时间久了,大家都犯起了选择困难症,不知道该使用哪种方式再浏览器中编写脚本程序。就在大家都感觉迷茫之际,最初设计浏览器,发明超文本的小强站了出来发言了,“大家应该遵守统一的规范,这样才能玩的更好嘛!”于是乎,就集百家之长,指定了一系列的标准。这些标准一直被大家所使用,后来起了个名字叫W3C

到此,网页开发三剑客:HTML、CSS、JavaScript,携手驰骋在互联网的江湖中。

其实,在互联网发展的早期,前端还不是一个独立的岗位,无论是要制作简单还是复杂的网页,都要使用到这三门编程语言。HTML的标记就相当于网页的骨架,需要在网页中显示什么元素,只要编写指定的标记就可以了。CSS就相当于是网页的油漆桶,通过改变元素的位置、颜色、大小等操作,让网页布局排版更加美观。JavaScript就是网页的魔术师,可以与用户完成各种交互,通过用户操作的事件完成动态的网页效果。

而且浏览器就是为渲染HTML标记而生的,加结合对JavaScript这种脚本语言的解释执行,就可以开发出我们需要的网页了。所以,无论是学习前端多么复杂的框架技术,都离不开这三个语言基础。

Web应用的出现

随着互联网商业化的发展,出现了很多依托互联网生存的公司,例如:电商网站、视频网站、新闻资讯网站、游戏网站等等,很多事物的快速发展都是离不开利益的推动,前端开发岗位的出现也不例外。

当用户量越来越大之后,互联网产品也就越来越多,在这个看脸的时代里,颜值决定了用户对产品的第一印象,而且前端是直接可以与用户进行交互的,所以在功能上要求也是很高的。这就迫使前端工程师们,发挥自己的聪明才智,“取悦”用户。随之而来的,就是各种JS插件库和框架的诞生。

在大家还没有反应过来的时候,随着硬件设备的升级,各种端如雨后春成般生根发芽茁壮成长。Web、APP、小程序都需要考虑,各种设备的适配和兼容也要考虑,端多了,人也就多了,做一个产品的周期也就长了,更要命的是维护的成本也就高了。

天下武功,唯快不破,如何能够利于市场的不败之地是互联网产品公司考虑的首要问题。时间成本、人力成本、研发成本等等,这些都是决定了公司的利润,利润有决定了公司的生存,降低成本变得尤为重要。

Web应用就是在这种市场环境下应运而生,浏览器可以解决PC端的问题,那么也可以解决移动端的问题。我们用Web开发的网页程序,只要有浏览器就能够运行,而且还可以和服务器进行通信。那么就以浏览器内核为基础,开发适合在各种设备上运行的程序,然后我们只需要适配设备屏幕的不同页面就可以了。这样既减少了人力成本,也缩短了开发周期,便于维护。

组件化思想

组件化并不是前端所特有的,一些其他的语言或者桌面程序等,都具有组件化的先例。确切的说,只要有UI层的展示,就必定有可以组件化的地方。简单来说,组件就是将一段UI样式和其对应的功能作为独立的整体去看待,无论这个整体放在哪里去使用,它都具有一样的功能和样式,从而实现复用,这种整体化的细想就是组件化。不难看出,组件化设计就是为了增加复用性,灵活性,提高系统设计,从而提高开发效率。

聊聊前端技术的发展史

标签:电商网站   复杂   事件   网页程序   硬件   用户   cas   lan   视频   

原文地址:https://blog.51cto.com/6323662/2472062

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!