JQuery老矣,尚能饭否

jQuery · pierre · 2019-01-12 · 1 次阅读

文章来源: https://juejin.im/post/5c2d932c5188254fef2360fa, 本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。

write less, do more -- John Resig

​ 在2005年8月的某一天,有一位叫 John Resig 的美(guo)人,在blog上连发3个栗子公开怼了 PrototypeBehaviour 的代码冗长,在那之后没多久就开源了风靡全球的利器JQuery,还兼容了IE5.5,解决了开发者兼容性处理的心头大患,之后 JQuery 就一发不可收拾,很快就统一了整个浏览器世界...

​ 随着时代的发展、各个浏览器逐渐趋向统一以及 node 的出现,兴起了许多现代化的工具,例如: react , vue , angularjswebpackgulp 等可以解放开发者双手,加快开发效率的库与框架;并且浏览器端的API也日渐完善,ES6改革性的出现, JQuery 的代替方案变得越来越多,也因此对 JQuery 不满甚至要完全废弃 JQuery 的声音也越来越多。

后现代的 JQuery

JQuery 已经到了暮年,该退出浏览器的舞台....了吗?

体积过大?

​ 很多人诟病 JQuery 体积很大,占用资源很多,但是让我们来看一下最新的 JQuery.min.js 的大小。

JQuery老矣,尚能饭否

事实上,最新的 JQuery 压缩完之后也就85KB,这点开销,在现代设备中都不是什么问题,移动设备4G甚至可以达到数MB每秒,PC端就更不用说了,所以说JQuery体积多大,占用多大资源这一条在一般情况下是不成立的!

DOM操作很麻烦?

有人说, dom 操作太麻烦,还是用 MV** 框架直接操作数组来得快一些....

​ 现在 github 已经移除了 JQuery 的依赖,但是并没有使用任何现代化框架,而是用 原生JS 去进行了重构,我个人认为, JQuerygithub 移除不能说明 JQuery 不中用了,只能说明是浏览器端API以及 ECMAScript 已经日渐完善了。

​ 对于常规的DOM增删改查,在 MV** 里只需要操作数组,是比较方便,但是在 JQuery 里我们也可以用操作数据的思维去实现,封装好要处理的DOM结果,用观察者模式去监听数据源的变动从而更改DOM不一样也可以很快嘛?

面条式代码很丑?

一长串的链式调用,看着就很烦。

JQuery老矣,尚能饭否

​ 这锅, JQuery 是不背的。。。因为这就是个人写代码能力的问题了。。。。

JQuery老矣,尚能饭否

跨域处理的优势

JQuery 在跨域中发挥的作用

​ 现代化的前后端协作通常都会以跨域的方式进行,一般方式都是 CORS 了,后端开好权限,按AJAX的方式去请求,真香~

​ 但是,如果在一些不得已要用 JSONP 的场合,例如第三方SDK使用,现代的框架处理起来就比较难受了,这里用JQuery就很方便了

const getJSON = async () => {
    try {
        const res = await $.ajax({
            url,
            dataType: 'jsonp',
            jsonp: 'cb',
        });
    } catch (error) {
        // do something;
    };
};
复制代码

​ 单纯地用 ES6 + JQuery 也是可以很好的完成任务

动画处理

JQuery 在动画处理上也发挥了很大的作用

​ 虽然现在很多人写动画会用 CSS3 的属性, Web Animations API 或者 JSON 去写,但是如果要写一些step的动画,用JQuery也是很好的选择

const step1 = () => $.when(
    dom1.animate({
        left,
        top
    }, delay),
    dom2.animate({
        width,
        height
    }, delay)
).promise();

const step2 = () => $.when(
    dom1.animate({
        left,
        top
    }, delay),
    dom2.animate({
        width,
        height
    }, delay)
).promise();

const move = async () => {
    await step1();
    dom1.delay(500);
    await step2();
};
复制代码

​ 其实这样也可以把动画写得很好看

后记

在我心里, JQuery 永远是个王者

JQuery老矣,尚能饭否

​ 我对技术没有偏见,不管是 JQuery 也好, 原生JS 也好或者层出不穷的框架,都是工具,只要能好好的完成任务就是好技术。

​ 随着时代的发展, JQuery 的市场占有率是越来越少,以后会不会完全被抛弃,这我不知道。只是 JQuery 代表的是一个时代,是浏览器发展的见证者,也是我心目中的王者,虽然我以后也很有可能会完全弃用它,但是它在我心目中的地位是不变的!

JQuery ,荣耀!

以上所述就是小编给大家介绍的《JQuery老矣,尚能饭否》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

码农书籍
游戏引擎架构

游戏引擎架构

[美] Jason Gregory (杰森.格雷戈瑞) / 叶劲峰 / 电子工业出版社 / 2014-1 / 128.00元

《游戏引擎架构》同时涵盖游戏引擎软件开发的理论及实践,并对多方面的题目进行探讨。本书讨论到的概念及技巧实际应用于现实中的游戏工作室,如艺电及顽皮狗。虽然书中采用的例子通常依据一些专门的技术,但是讨论范围远超于某个引擎或API。文中的参考及引用也非常有用,可让读者继续深入游戏开发过程的任何特定方向。《游戏引擎架构》为一个大学程度的游戏编程课程而编写,但也适合软件工程师、业余爱好者、自学游戏程序员,以及游戏产业的从业人员。通过阅读《游戏引擎架构》,资历较浅的游戏工程师可以巩固他们所学的游戏技术及引擎架构的知识,专注某一领域的资深程序员也能从本书更为全面的介绍中获益。內容包括:-游戏开发中的大规模C++软件架构-游戏编程所需的数学-供调试、源代码控制及性能剖析的游戏开发工具-引擎基础系统、渲染、碰撞、物理、角色动画、游戏世界对象模型等引...

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具