聊聊前端技术的发展史

落日映苍穹つ 2023-07-08 12:27 8阅读 0赞

### web的起源 ###

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

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

![聊聊前端技术的发展史][watermark_size_16_text_QDUxQ1RP5Y2a5a6i_color_FFFFFF_t_100_g_se_x_10_y_10_shadow_90_type_ZmFuZ3poZW5naGVpdGk]

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

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

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

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

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

洛杉矶湖人队曾打造出两个“湖人王朝”，明星队员有科比·布莱恩特、奥尼尔等。

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

后来经过小强的一系列奇思妙想，把标记做了升级，  
使用<li></li>表示列表，<table></table>表示表格，<img></img>表示图片等等。

原来的浏览器只能显示文本和链接，现在多了这些标记之后，浏览器可以根据标记显示相应的内容。这样一来，小强发明的超文本丰富多彩起来了。这时，小强才意识到，自己定义的原来是一套描述界面的标记语言，即HyperText Markup Language，简称**HTML**。

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

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

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

洛杉矶湖人队曾打造出两个“湖人王朝”，明星队员有<a href='[http://192.168.0.1/NBA/科比·布莱恩特.html'>科比·布莱恩特</a>、<a][http_192.168.0.1_NBA_.html_a_a] href='[http://192.168.0.1/NBA/奥尼尔.html'>奥尼尔</a>等][http_192.168.0.1_NBA_.html_a]。

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

`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”属性进行设置。比如设计一张图片：

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

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

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

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

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

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

### Web应用的出现 ###

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

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

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

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

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

### 组件化思想 ###

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

[watermark_size_16_text_QDUxQ1RP5Y2a5a6i_color_FFFFFF_t_100_g_se_x_10_y_10_shadow_90_type_ZmFuZ3poZW5naGVpdGk]: https://s1.51cto.com/images/blog/202002/18/d69bf83227e88a0ee7662b23b810194f.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[http_192.168.0.1_NBA_.html_a_a]: http://192.168.0.1/NBA/%E7%A7%91%E6%AF%94%C2%B7%E5%B8%83%E8%8E%B1%E6%81%A9%E7%89%B9.html'%20rel=
[http_192.168.0.1_NBA_.html_a]: http://192.168.0.1/NBA/%E5%A5%A5%E5%B0%BC%E5%B0%94.html'%20rel=