热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

回顾前端历史,明晰前端未来web前端js

本篇文章适用于1-3年的WEB新人也同样适用于3-5年的前端老人。本文是回顾历史,预测未来的文章,所以会以时间线的形式一步一步过来,会有WEB的诞生,WEB发展的

回顾前端历史,明晰前端未来

 

本篇文章适用于 1-3 年的 WEB 新人也同样适用于 3-5 年的前端老人。本文是回顾历史,预测未来的文章,所以会以时间线的形式一步一步过来,会有 WEB 的诞生,WEB 发展的重大转折点。让你清晰明白 WEB 诞生的历史意义?没有浏览器人们如何查阅信息?IE 作为 windows 预装的浏览器为什么不如 Google 浏览器的市场份额大等等

1991 年 HTML 诞生了

在 web 诞生之前人们之间的信息查看极不方便。你可以试想一下你用命令行去浏览现在看的网页,上图就是当时用命令行做的纯文字游戏,如果你用过说明你真的是资深互联网人了。

如果能够通过更加直观的形式供大家预览将会是非常幸福的事情。于是 Tim Berners-Lee 博士提出了World Wide Web 的设计方案:包括浏览器、服务器、网络传输协议。于 1991 年对外发布,所以 1991 年是 web 的破蛋日。

1993 年 COOKIE 的诞生

写这篇文章的时候我查阅了大量的资料,但是大都没有讲到 COOKIE。但是他的重要性一点点都不亚于 JS 的诞生。http 协议是无状态的,这就表明没法做用户追踪,没有这个东西 web 就只是一个纸质书的替代品而已。但是有了这个东西,整个 web 就开始繁荣起来了,他不再是单项的沟通平台,他具备了双向沟通的潜力。他能够更好的服务用户提供更多的专属服务,所以我觉得有必要单独拿出来谈一谈 COOKIE。而且作为经典面试题 COOKIE,localStorage,sessionStorage 的区别你也应该更多的关注他。

1996 年相继诞生的 CSS,JS

谈到 JS 就必须要了解几个疑问。

1.为什么需要 JS

初期的浏览器只是纯粹的供大家浏览信息,最多的交互就是链接。单击一下弹出一个新的窗口看相关介绍。浏览器一定程度上就跟书一样是查阅资料的。后来有了 form 表单浏览器不仅能够查阅信息还能够收到用户反馈。但是也不能够随便反馈,需要添加一下限制,比如文字长度啊,填写格式啊。这个时候对于信息的处理都是放到服务器上的,要是信息不合格界面还不能保存用户输入的内容。输入了 100 个字告诉你你写的有问题重新写一遍气不气,而且当时的网络还极其差劲,提交一次就要等好几秒钟。于是为了提高用户体验 JS 就诞生了。

2. JS 的竞争对手有哪些,为什么最后 JS 独占鳌头?

跟 JS 同时代的强势竞争对手主要是IE 的 JScript,CEnvi 中的 ScriptEase。在角逐浏览器脚本的时候没有统一的规范,三大主要浏览器脚本各自发力同样的功能不一样的写法就好比如今的 IOS Android 一样。混乱不堪于是 JS 的创始人布兰登 * 艾克于1997年,以 Javascript1.1 为蓝本的建议提交给了欧洲计算机制造商协会也就是 ECMA 。该协会指定39号技术委员会来负责此事。这个时候就有了规范,后来想做浏览器的人都开始依照规范设计自己的出版,于是 ECMA 规范就越来越大众。文章开头提到了 IE 为什么被淘汰,就目前大众认为的原因性能差,界面混乱,功能不全。但其实根本原因是因为 IE 没有很好的支持 ECMA 规范导致程序员实现一个功能是很费劲的那实现不了在大众眼中不就是功能不全和界面混乱么。

3. JS 为什么会成为如今浏览器的标配,而且生命力至今生生不息。

这得益于当时 ECMA 规范的先进性。在制定第一版的时候就有3个很重要的原则:

  1. 把所有和浏览器相关的代码全部删掉,这也是Javascript1.2 与 Javascript1.1 不兼容的主要原因。
  2. 要求对象和平台无关。
  3. 全面支持Unicode的编码,这是为了以后能支持多语言的开发。

可以看出Js在设计之初就不是客户端语言,所以js可以在很多平台去使用,比如node.js,甚至在很多机顶盒里也在使用js。现在很多人开始叫 js 为 ECMAScript。从历史角度发展来看 js 应该包括 ECMAScript,因为一个完整的 JS 应该包括:

  • 核心(ECMAScipt)

  • 文档对象模型(DOM)

  • 浏览器对象模型(BOM)

4. JS 的风格为什么像面向对象语言又如此支持函数式编程?

这不得不说到 JS 的创始人 Brendan Eich 和 Brendan Eich 所在的网景公司。Brendan Eich 是函数式编程的信徒,并且还比较讨厌 JAVA,但是网景公司的创始人都是 java 的教徒,当时 java 作为唯一的跨平台语言魅力十足。于是 Brendan Eich 就不得不在公司的压力之下使得 JS 有很多面向对象的特性。为什么说 Brendan Eich 比较讨厌 JAVA 呢,看下面这句话:

"Java(对Javascript)的影响,主要是把数据分成基本类型(primitive)和对象类型(object)两种,比如字符串和字符串对象,以及引入了Y2K问题。这真是不幸啊。"

1998 年 ajax 的诞生

ajax 诞生是很早的,在 1998 年的时候就被微软实现了。但是直到 2005 年 2 月人们才发现他的作用,于是大规模普及开来。现在来看 ajax 是一个稀疏平常的事情,就像白开水一样理应存在。所以正如人没有水不能活一样, web 离开了 ajax 也不能活。你可以想一下现在用的最火的框架 Vue,Angular,React 页面呈现内容的方式都是通过 ajax 获取到内容然后渲染到页面上,没有了 ajax 就没有他们了。ajax 为 web 前端工程师的诞生创造了条件。

2005 年 “web工程师” 的诞生

虽然 web 诞生这么久,但是一直到 2005 年是都是没有 web工程师的。这个概念首次来自于淘宝,2005 年是淘宝的大规模扩充其,极高的用户访问量和并发量使得对于页面的交互跟响应速度都有了极高的要求,因此需要更加懂 web 的人来服务于此。因此 web 工程师诞生了。不再是切图仔,一直到今天 web 工程师的地位终于发生了聚变成了一个团队中的核心之一。

2006 年 jQuery 的诞生

1997 年虽然有了 ECMA 提供的标准但是各大浏览器厂商之间并不是完全兼容的,有的浏览器厂商会实现很多更加有好的特性来吸引开发者入住,吸引客户使用。于是战乱纷飞,即使到了今天写的代码也需要兼容比如 CSS 的前缀 -webkit-,-o-, childrens 获取子节点的不同表现。于是一套代码 多个 if else 。而处理的事情几乎相似 if 判断的是什么浏览器,以此写出这套浏览器的代码。就目前写出一套代码都相当困难更别说好几套了,不FQ都没有资料的,FQ了资料你也看不懂。即使就目前支持谷歌翻译了,这东西 emmmm。

于是 jQuery 诞生了。浏览器的兼容问题被解决了,而且当时的链式结构爽到不能再爽虽然在今天看来又被找到了瑕疵。。。

所以 jQuery 的诞生让 web 开发工程师的门槛大幅度降低使得 web 涌现出了惊人的活力。

2009 年 Node 的诞生

node是采用 js 语法使用 v8 引擎进行编译的一门语言。他的诞生使得web 工程师有了写服务端的能力,但是从前端的角度来讲我认为这只是次要的。真正的核心是他给了前端工程师操纵文件系统的能力,虽然一直有很多种语言都有这种能力,但是对于前端开发者来说并不友好,学习曲线是非常高的。而且大部分这类语言的能力者基本上工资都比前端工程师高,谁还愿意放着高薪不拿拿低薪呢。web 工程师要比任何其他工程师知道自己需要什么,好比 babel,css 预编译器。各种脚手架,各种打包器。这些 java 工程师也会做,但是他做了绝对没有几个 web 工程师搞得懂。但是 node 不一样了,天生的语法优势注定了他的辉煌。单独拿 babel 来说,从前大家都是等到标准一个阶段一个阶段确定了之后各个浏览器厂商再去实现它,有很多非常好用的功能必须要等好几个月甚至一年才能用上。但是有了 babel 就不一样了。能够将新的语法打包成目前浏览器支持的语法。node 让 web 开始变成一个越来越工程的化的东西,也使得前端的门槛变得更高但是却让互联网从业者的门槛变得更低。

也就是基于这个时代一边作图一边写页面的切图仔终于搞不定了, web 工程师开始广泛流行起来。

2012 年 MVVM 的时代拉开序幕

这一年谷歌发布了 angularjs 1.0 。mvvm 的时代拉开了序幕,之后紧接着诞生的 react,vue 都以其自身独有的优势开始抢占市场。也正是他们的出现 jQuery 的时代渐渐褪去。上面说过 jQuery 是帮助工程师兼容浏览器极大提高开发效率而诞生的巨头。但是随着浏览器的规范,js的发展以及内核的大一统 jQuery 的历史意义已经渐渐不存在了。所以渐渐褪去是必然的。

那么 vue,react,angular 他们存在的或者是解决的难题在哪里呢?他的主要优势是俩部分,一是前文说过完整的 js 包含三部分。

  • 核心(ECMAScipt)

  • 文档对象模型(DOM)

  • 浏览器对象模型(BOM)

三个肯定没有一个容易学,于是他们将三部分变成了一个部分。我相信任何一个经历过操作 DOM 时代过来的人都深有体会。数据跟试图同步绝对是阻碍 web 工程师效率的极大难题。

二是移动互联网的到来形成了新的信息分享方式,诞生出的 ios Android 俩大阵营。他们极大地冲击了 web开发工程师。但是他们有一个极大地缺点就是同样的东西需要写俩套,俩肯定没有一个容易。于是 js 的跨平台性展现出来了,能够写一套代码运行俩边,但是性能上有很大的局限性。于是 spa 模式的诞生大大提高了性能。

2014年 html5 css3 的诞生

随着日益快速的网络,性能更高的 js 引擎,要求越来越高的 UI 和交互 HTML5 和 CSS3 诞生了。CSS3 提供的旋转、阴影、3D,HTML5 提供的 video,localstorage 等等。进一步提高了 web 工程师的门槛

总结与明晰未来

重大历史节点还有很多,像 flash,asp,php,jsp 为 web 带来的影响。但是他们对于前端开发者来说意义并不大所以就不重点说了。

总结一人群 :使用者和制作者,从一次一次的重大事件中可以看到每一次变革都是服务于这俩类人的。JS 的诞生给使用者提供了更友好的交互,HTML5,CSS3 给使用者提供了更加丰富的界面展示。jQuery,Vue,React,Angular 极大地提高了制作者的开发效率以及降低了开发难度,node 赋予了制作者更多了能力。可以想象未来的重大节点也一定是给用户带来更好的服务,给制作者提供更好的工具和更快的开发效率。

总结二历史意义 :jQuery 的历史意义是兼容浏览器,后来兼容性问题渐渐不存在也就慢慢的被替代了。flash 为 web 提供了视频体验但是随着 html5 直接支持 video,flash 就慢慢的被替代了。php,jsp... 赋予了 html 编译的能力但是 vue,angular,react 赋予了这种能力更好的前景于是也慢慢被替代了。而 web 你可以看到他诞生的意义就是为了给用户一个信息交流的平台,信息交流肯定是贯穿整个人类历史以及未来的,因此 web 的初衷永远不会消失。web 消失的唯一可能就是新的替代品,目前的 PC ,手机市场已经相当成熟由此看来 web 也不会被替代。唯一有可能的是 VR 作为新的信息流通工具他的前景是广泛的并且不同于 PC 和 手机。VR 是以 3D 的场景作为一个载体,目前的交互方式是以类似遥控器的手柄为主。目前已经有很多成熟的软件和平台了,具体实现的语言我还没了解过,但是里面是没有体现出来 web 的使用场景的。但是目前阶段他是不会淘汰 PC 和 手机的使用场景的,后期即使做到了 能够手指控制赋予文字交流的能力可能会淘汰 PC 但是手机依然是很强力的产品,web 会被分流但是肯定不会被淘汰的。

总结三发展周期 :这个可以说是一个历史规律,没有发生只能说是时间还不够长。什么规律呢:从无到有,人有我优,人优我廉,人廉我走。可以看到 web 已经经过了从无到有的过程,目前正在人有我优的阶段,而且随着 web 高度的发展从制作者的角度出发这个阶段目前还是上升的趋势,从使用者的角度出发。用户体验已经到了一定的阶段了,除非 3D 的交互到来。所以这里面开始进入了人优我廉的阶段,所以随着前端开发者的涌入低阶从业者的市场价值开始走低,高端的会呈现上升趋势。

文章就到这里了,有不对的地方欢迎指出。后期还会有更多的优质文章并且会以系列的形式推出,不会杂乱无章,不想错过就关注我吧。你们的关注点赞是我开源的动力,毕竟我也是可以私藏的。


推荐阅读
  • TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得
    TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得 ... [详细]
  • CAS 机制下的无锁队列设计与实现 ... [详细]
  • 如何在Mac上构建高效的本地服务器环境
    在Mac上构建高效的本地服务器环境,首先需要了解基本步骤:1. 配置目录基础;2. 启动Apache服务;3. 添加自定义文档至本地服务器;4. 查看自定义效果。此外,还可以通过手机或其他电脑访问本机服务器,以确保跨设备的兼容性和调试效果。Mac系统自带的Apache服务为本地开发提供了便捷的工具,本文将详细介绍每个步骤的具体操作方法。 ... [详细]
  • 虚拟机网络设置与数据库远程连接优化指南
    本文针对个人计算机上虚拟机网络配置与数据库远程连接的问题,提供了一套详细的优化指南。在探讨远程数据库访问前,需确保网络配置正确,特别是桥接模式的设置。通过合理的网络配置,可以有效解决因虚拟机或网络问题导致的连接失败,提升远程访问的稳定性和效率。 ... [详细]
  • 理解和应用HTTP请求中的转发与重定向机制
    在HTTP请求处理过程中,客户端发送请求(通常简称为req),服务器进行相应处理后返回响应(通常简称为res)。理解和应用客户端的转发与重定向机制是前端开发的重要内容。这两种机制在Web开发中具有关键作用,能够有效管理和优化用户请求的处理流程。转发机制允许服务器内部将请求传递给另一个资源,而重定向则指示客户端向新的URL发起新的请求,从而实现页面跳转或资源更新。掌握这些技术有助于提升应用的性能和用户体验。 ... [详细]
  • MongoVUE基础操作指南:轻松上手数据库管理
    本文介绍了MongoVUE的基础操作,旨在帮助用户轻松掌握数据库管理技巧。MongoVUE是一款功能强大的MongoDB客户端工具,虽然需要注册,但其用户友好的界面和丰富的功能使其成为许多开发者的首选。文中详细解释了安装步骤、基本配置以及常见操作方法,并对一些常见的问题进行了修正和补充,确保用户能够快速上手并高效使用MongoVUE进行数据库管理。 ... [详细]
  • 在Python网络编程中,多线程技术的应用与优化是提升系统性能的关键。线程作为操作系统调度的基本单位,其主要功能是在进程内共享内存空间和资源,实现并行处理任务。当一个进程启动时,操作系统会为其分配内存空间,加载必要的资源和数据,并调度CPU进行执行。每个进程都拥有独立的地址空间,而线程则在此基础上进一步细化了任务的并行处理能力。通过合理设计和优化多线程程序,可以显著提高网络应用的响应速度和处理效率。 ... [详细]
  • HDU1176:免费馅饼问题的动态规划解法分析
    题目“免费馅饼”通过动态规划方法进行了解析。该问题的时间限制为 Java 2000ms 和其他语言 1000ms,内存限制为 Java 65536K 和其他语言 32768K。本文详细探讨了如何利用动态规划算法高效求解此问题,并对算法的时间复杂度和空间复杂度进行了深入分析。此外,还提供了具体的实现步骤和代码示例,帮助读者更好地理解和应用这一方法。 ... [详细]
  • 在处理遗留数据库的映射时,反向工程是一个重要的初始步骤。由于实体模式已经在数据库系统中存在,Hibernate 提供了自动化工具来简化这一过程,帮助开发人员快速生成持久化类和映射文件。通过反向工程,可以显著提高开发效率并减少手动配置的错误。此外,该工具还支持对现有数据库结构进行分析,自动生成符合 Hibernate 规范的配置文件,从而加速项目的启动和开发周期。 ... [详细]
  • 在HTML5应用中,Accordion(手风琴,又称抽屉)效果因其独特的展开和折叠样式而广泛使用。本文探讨了三种不同的Accordion交互效果,通过层次结构优化信息展示和页面布局,提升用户体验。这些效果不仅增强了视觉效果,还提高了内容的可访问性和互动性。 ... [详细]
  • 本文详细介绍了 jQuery 的入门知识与实战应用,首先讲解了如何引入 jQuery 库及入口函数的使用方法,为初学者提供了清晰的操作指南。此外,还深入探讨了 jQuery 在实际项目中的多种应用场景,包括 DOM 操作、事件处理和 AJAX 请求等,帮助读者全面掌握 jQuery 的核心功能与技巧。 ... [详细]
  • 在 JavaScript 中,变量前的加号(+)符号用于将变量转换为数字类型。例如,在 `if (+valueDistance) {}` 语句中,加号的作用类似于 `Number(valueDistance)`,会根据 Number 函数的规则将变量转换为数值或 NaN。这种用法常用于确保变量在进行数值运算时不会出现类型错误。 ... [详细]
  • 【Linux进阶指南】第一阶段第三课:体验与部署Ubuntu系统
    在正式踏上Linux学习之旅之前,本课程将引导你深入体验和部署Ubuntu系统。通过详细的操作步骤和实践演练,你将掌握Ubuntu的基本安装、配置及常用命令,为后续的进阶学习打下坚实的基础。此外,课程还将介绍如何解决常见问题和优化系统性能,帮助你更加高效地使用Ubuntu。 ... [详细]
  • 通过 NuGet 获取最新版本的 Rafy 框架及其详细文档
    为了帮助开发者更便捷地使用Rafy领域实体框架,我们已将最新版的Rafy框架程序集上传至nuget.org,并同步发布了最新版本的Rafy SDK至Visual Studio。此外,我们还提供了详尽的文档和示例,以确保开发者能够快速上手并充分利用该框架的强大功能。 ... [详细]
  • 概率与期望动态规划的深入探讨与应用分析
    本文深入探讨了概率与期望动态规划的基本原理及其在实际问题中的应用。概率是指某一事件发生的可能性大小,用P(A)表示。若某一事件的所有可能结果共有n种,且每种结果出现的概率相等,而事件A包含其中的m种结果,则该事件的概率P(A)为m/n。例如,在投掷骰子的情况下,如果事件A定义为掷出偶数点,由于共有3种偶数点(2、4、6),而总共有6种可能的结果,因此P(A)为1/2。文章进一步分析了概率与期望动态规划在复杂场景下的建模方法和求解策略,并通过具体实例展示了其在决策优化和风险管理中的应用价值。 ... [详细]
author-avatar
墨镜晴天的围脖_194
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有