3.1JavaScript语言的发展介绍

1995年之前,大多数用户使用28.8kbit/s的调制解调器上网,想象一下,你填写完表单,单击“提交”按钮,等30秒处理,然后收到一条消息,告诉你有一个必填字段没填,就这样每次需要与服务器之间往返通信,缓慢的体验极大地考验着人们的耐心。

1995年,网景公司一位名叫 Brendan Eich 的工程师为即将发布的Netscape Navigator 2开发了一个叫做 Mocha 的脚本语言,让客户端代替服务端处理某些验证。由于当时的计划是在客户端和服务器端使用它,于是更名为LiveScript(客户端)和LiveWire(服务器端)。为了赶上发布时间,网景公司与 SUN 公司结为联盟, 共同完成 LiveScript 的开发,就在正式发布Netscape Navigator 2的时候,网景把 LiveScript 更名为 JavaScript,以便搭上媒体当时热烈炒作 Java 的顺风车。

1996年,微软重磅进入了 Web 浏览器领域,发布了IE3,其中包含了JScript,于是,当时的市场上出现了两个版本:Netscape Navigator中的JavaScript,IE中的JScript。两个版本之间的冲突日益凸显,于是,1997年,ECMA(欧洲计算机制造商协会)第39技术委员会(TC39)承担了制定一套标准规范的任务,命名为ECMA-262,也就是ECMAScript。ECMAScript只是语言规范,并没有定义语言的实现与HTML之间的规范,于是,1998年,万维网联盟(W3C,World Wide Web Consortium)开始制定了语言的实现与HTML之间的规范,命名为DOM(文档对象模型)。以及后制定的语言的实现与浏览器之间的规范,命名为BOM(浏览器对象模型)。

狭义的JavaScript可以近似于ECMAScript,其实完整的JavaScript包含了ECMAScript(语言规范),DOM(文档对象模型),BOM(浏览器对象模型)等。

JavaScipt是ECMAScript在浏览器端的实现,Node.js是ECMAScript在服务器端的实现。

众所周知,HTML控制文档的内容,CSS控制文档的样式,JavaScript控制文档的行为。

写过JavaScript的同学都有一种感受,就是DOM和BOM操作的时候代码量非常大以及可读性不佳,于是jQuery应运而生,jQuery是一个类库,大大地简化了DOM和BOM的操作,说白了是DOM和BOM的二次封装。

jQuery虽然简化了DOM和BOM的操作,但是并没有解决DOM和BOM量很大难于管理的问题,于是AngularJS和Backbone应运而生。

AngularJS和Backbone虽然解决了DOM和BOM难于管理的问题,但同时性能开销也随之增长,性能问题成了困扰前端开发的难题,于是React、Angular、Vue应运而生,他们都使用类似Virtual DOM的方式,使性能立即得到了大幅度的提升。

我们再来回顾一下,JavaScript的出现是为了解决网速慢与服务器之间频繁通信体验差的问题,从而更改为与客户端通信,即客户端渲染。

局部应用(客户端渲染)

大多数网站不是、也不需要单页面应用程序,所以你只想在现有页面中“局部地添加交互性”,可以通过仅仅几行代码并且无需使用构建工具使用React、Angular 、Vue。实际上,此时React、Angular 、Vue替代了传统的jQuery的工作。

单页面应用(客户端渲染)

当应用为局部应用的时候,React、Angular 、Vue客户端渲染弊端并不能暴露出来,所以当应用为单页面应用的时候,React、Angular 、Vue虽然优点是页面切换快,但会出现首屏加载慢、SEO不友好等客户端渲染的缺点。

单页面应用(服务端渲染)

单页面应用(服务端渲染)的出现就是解决客户端应用的弊端,于是,React、Angular 、Vue对应配套的Next.js、Nest.js、Nuxt.js服务端渲染框架应运而生。技术架构如下:

//React服务端渲染
React+Next.js+API
//Angular服务端渲染
Angular+Nest.js+API
//Vue服务端渲染
Vue+Nuxt.js+API

单页面应用(Inertia&Livewire)

Inertia目前仅支持客户端渲染功能,服务器端渲染 (SSR)还处于抢先体验阶段,仅供Inertia的赞助商使用。

此处Livewire与上文中的LiveWire并非一个概念,两者毫无关联。

Inertia

Vue+Inertia+Laravel/RubyonRails
React+Inertia+Laravel/RubyonRails
Svelte+Inertia+Laravel/RubyonRails

Livewire

Blade+Livewire+Laravel

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/basic/js/5660.html

发表评论

登录后才能评论