JQuery逐渐退出前端历史舞台?

现在各大技术论坛经常有类似的问题出现,PHP是否过时了,JQuery是否已经被淘汰?前段时间GitHub宣布改版,并且放弃了JQuery依赖,而且发布文章详细的解释了为什么放弃JQuery。这里贴下GitHub英文原版文章:

https://github.blog/2018-09-06-removing-jquery-from-github-frontend/

正如GitHub文章里面所说,在JQuery发展鼎盛时期为什么会被广泛使用呢?我觉得主要有以下几个原因:

当时没有标准的方法来通过css选择器查询DOM元素。
当时没有标准的方法来实现动画的视觉效果。
IE的XMLHttpRequest接口存在浏览器的兼容问题。

JQuery使得开发人员操作DOM元素、实现动画效果以及发起ajax请求变得很简单,所以JQuery从中脱颖而出,最重要的一点是JQuery对于浏览器的兼容问题处理的比较到位。

那为什么GitHub这样的公司都会逐渐把JQuery慢慢剥离呢?因为现在web标准越来越完善,我们使用JQueryAPI的时候会习惯性与标准API进行比较,我们可以随便举几个例子:

$(selector)完全可以使用querySelectorAll()进行替代。
css类名切换可以使用Element.classList.
css现在支持在样式表实现动画。
发起ajax请求完全可以使用axios替代,并且性能更高。
addEventListenner监听支持跨平台使用。
随着JavaScript的高速发展,JQuery提供的语法糖变得越来越多。

也就是说,我们一直以来依靠JQuery来做的事情,现在通过原生JS完全可以做到的。JQuery具有独特的链式语法和短小清晰的功能接口,具有灵活的css选择器,而且在浏览器兼容处理做的非常好,而不用管原生JS是否会支持,这就是JQuery在前端领域一直备受重视的原因。很多开发者现在更倾向于使用三大现代框架Vue/React/Angular进行前端开发,Vue这种现代框架有什么优点呢?最显著的特点应该就是:

现代框架为了性能也为了代码便于维护,开发者无法直接操作DOM树。

框架会维护一个virtual DOM,组件有进行改动自动渲染DOM到页面中,所以我们使用Vue之类的框架我们只需要关心如何去实现组件,如何处理请求数据,不用和JQuery去对DOM元素进行操作了,大大简化了开发者的工作量。但是我们可以发现三大现代框架相比较JQuery存在着一个显著的缺点:

使用三大现代框架进行前后端分离开发,对搜索引擎SEO不友好。

搜索引擎SEO的原理是通过URL,获取网页源代码进行解析。如果我们使用现代框架进行开发实现数据渲染,SEO最终获取到的是模型界面而不是数据渲染界面。当然,业界都会提供对应的解决方案,比如我拿vue做示例,一般有三种解决方案:

页面预渲染
服务端渲染
路由采用 H5 history模式

那我们现在再次提出这个问题:JQuery会最终退出前端的历史舞台么?我们不得不先说的是JQuery目前存在几个比较显著的缺点:

JQuery项目过去庞大,有很过实际无用的的功能存在。所以存在着很多精简版的JQuery项目。
JQuery全是对DOM元素进行操作,一旦改动页面结构,解耦性太紧,一般都需要大幅度改动。
无法避免大量拼写html字符串的操作。
无法从根本上解决XSS攻击隐患。

虽然官方不愿承认,而且一直促使JQuery跟随潮流往MVVM概念进行更新,甚至制定了移动端定制库,但是依旧越来越多的项目抛弃了JQuery。但是我觉得JQuery是不可能完全过时的,JQuery的开发思想是永远不会过时的。JQuery能在前端领域被广泛使用十来年,绝对不是偶然因素。因为JQuery的选择符,API,浏览器间兼容,DOM元素的处理,这些都有实际存在的强大的应用。所以说我们依然要学习JQuery的思想,可以对我们写代码以及封装库起到一定的帮助。为何会对我们写代码和封装库起到帮助呢,我可以举个例子给大家看看:

如果我们使用原生JS实现按钮监听,我们可能需要这样:

if (button.addEventListener)
    button.addEventListener('click', function(err, data){
// to do sth
    });
else if (button.attachEvent) {
    button.attachEvent('onclick', function(err, data){
// to do sth
    });
} else {
    button.onclick = function(err, data){
// to do sth
    };
}

但是如果使用JQuery,我们可以把逻辑简化成几行代码:

$(button).on('click', function(err, data){
// to do sth
});

我们可以发现,JQuery的代码可读性非常强。我们平时写代码就可以学习JQuery的思想尽可能去设计优雅的API。很多人就是不会自己设计优雅的API,只懂得一直调用框架提供的功能,所以技术水平一直被局限。

JQueryGitHub移除所有的依赖,但是并没有选择使用任何现代化框架,而是选择用原生JS去重构。所以,从这件事来判定JQuery已经过时是不对的。我们应该以这样的眼光去看待:现在web标准越来越完善,而且越来越多的优秀框架不断涌现,不再是JQuery一枝独秀的时代了。我们准备开发一个项目时我们会更多开始用JQuery是否适合?如果项目涉及很多动态数据渲染,我们用JQuery可能会是更合适的选择。如果需要频繁的对DOM元素进行增删改查,可能我们会偏向于选择Vue之类的现代框架。用MVVM我们只需要操作数组,非常的方便。反之JQuery各种操作DOM,各种html字符串拼接,我相信没几个人会不感到厌倦的。

使用现代框架进行前后端分离开发,一般前后端协作都是以CORS跨域的方式进行协作开发。后端开放权限,前端发起请求。但是如果涉及不得不用JSONP的时候,现代框架处理是比较麻烦的,而这种情况下我们使用JQueryajax请求是非常方便的。

我对技术没有偏见,随着时代的发展,JQuery的市场占有率越来越少,也许有一天真的完全被抛弃。但是它也在不断去除自身的糟粕,而JQuery的精华有些也演化成了Web标准。短期内JQuery还不会退出历史舞台,目前网站里面至少有90%目前还依赖着jQuery,这个逐步退出的过程还会持续很多年。当然这也改变不了它最终的宿命,jQuery很好地完成了前端发展的历史使命,精华部分被JS标准吸收,前端开发也过了纯操作DOM的年代,程序员可以更好地专注于业务逻辑,这代表时代是在向前发展,对于开发者来说其实是一件好事。

本文分享自微信公众号 - 程序猿周先森(zhanyue_org)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏黯羽轻扬

Web Components

也就是说,Web Components是Web组件模型标准,由浏览器提供原生特性支持,包括Shadow DOM,Custom Elements,HTML Imp...

19920
来自专栏全栈修炼

尤雨溪 6 月 4 日的 Vue 技术分享

Vue 团队成员简介:https://vuejs.org/v2/guide/team.html

26330
来自专栏前端菜鸟变老鸟

Vuex详细介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。这是官网的说法,其实很简单:就是一个加强版的data! 在单页应用中会有一个data函数,里面...

27810
来自专栏智慧协同

Vue cli3 添加插件支持build自动删除console.log调试日志

37860
来自专栏Golang开发

Vue开发环境搭建

nodejs中集成了npm 因此需要安装nodejs,官方地址是https://nodejs.org/en/ 查看当前npm版本

30840
来自专栏智慧协同

Vuejs中父组件主动调用子组件的方法

我们都知道,vue是单向流,但是有时候我们需要在父组件中主动通知子组件一些信息,使其做出一些响应变化,那么如何在父组件中去主动调用子组件的方法呢?Vue当然给我...

1.1K30
来自专栏前端词典

【前端词典】Vue 响应式原理其实很好懂

这是十篇 Vue 系列文章的第三篇,这篇文章我们讲讲 Vue 最核心的功能之一:响应式原理。

19340
来自专栏JAVA葵花宝典

八个开源的 Spring Boot 学习资源,你值得拥有

Spring Boot 算是目前 Java 领域最火的技术栈了,松哥年初出版的 《Spring Boot + Vue 全栈开发实战》迄今为止已经加印了 3 次,...

15720
来自专栏智慧协同

jQuery动态改变Input/Textarea值Vuejs数据没有绑定的解决办法

大概的意思是Vue只监听浏览器原生事件,而jQuery改变输入框的值属于jQuery定义的事件,这个Vue是无法监听到的。

18430
来自专栏张培跃

vue归纳笔记:对vue中nextTick()的理解及应用场景说明

请记住:vue是依靠数据驱动视图更新的,该更新的过程是异步的。即:当侦听到你的数据发生变化时, Vue将开启一个队列(该队列被Vue官方称为异步更新队列)。视图...

14930

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励