jQuery都过时了,那还学它干嘛

开发 前端
到了 2018 年,几乎已经没有新项目会使用 jQuery 来开发了;即使有,也是一件不值得拿出来炫耀的事情。那为什么我还是建议学习 jQuery 呢?原因如下。

jQuery都过时了,那还学它干嘛

请问现在我还需要学习 jQuery 吗?听你在知乎说 jQuery 已经过时了,是不是就不用学了?

短答案:

jQuery 还是可以学一学的,学了之后对写代码和封装库很有帮助。

现在的「新人」依然可以学习 jQuery 的思想,因为以「新人」的水平,直接理解 Vue / React 的思想难度较大,jQuery 是一个很不错的中间过渡,因为 jQuery 也蕴含了非常多的编程套路。

但是如果你不想学,就不学吧。直接去学 Vue / React 会难一点,但也能学会。

长答案:

jQuery 当然过时了

当年我在大学的技术小组里做 C# 网站开发,需要用到 jQuery 特效,组里的一名小伙伴会用一点 jQuery,很快就用 .animate 做出了让我啧啧称奇的特效。我觉得 jQuery 好神奇啊,虽然我当时连 JS 都不会。

于是我立马买了一本《锋利的 jQuery》,硬看。

什么叫「硬看」呢?因为我不会 JS,而且我并没有照着书上敲代码,仅仅使用眼睛「看 jQuery 代码」。神奇的是——我居然很快看懂了几乎整本书。以至于那位会用 jQuery 的小伙伴遇到 bug 问我时我能直接给出解答,看起来他并没有看《锋利的 jQuery》这本书(笑)。

到了 2018 年,几乎已经没有新项目会使用 jQuery 来开发了;即使有,也是一件不值得拿出来炫耀的事情。那为什么我还是建议学习 jQuery 呢?

原因如下。

jQuery 教你如何设计 API

上文说到我一个不会 JS 的人居然能看懂 jQuery 的书,其实这不是因为我厉害,而是因为 jQuery 的 API 设计得太人性化了!

举几个例子给大家看看:

***个是 jQuery 对事件监听的简化

 

  1. // 那时,如果不用 jQuery,监听事件(兼容 IE 6)你要这么写 
  2. if (button.addEventListener)  
  3.  button.addEventListener('click',fn); 
  4. else if (button.attachEvent) {  
  5.  button.attachEvent('onclick', fn); 
  6. }else { 
  7.  button.onclick = fn; 
  8. // 但是如果你用 jQuery,你只需要这么写 
  9. $(button).on('click', fn) 

第二个是 jQuery 对元素选择的简化

 

  1. // 如果你想获取 .nav > .navItem 对应的所有元素,用 jQuery 是这样写的 
  2. $('.nav > .navItem'
  3. // 在 IE 6 上,你得这么写 
  4. var navItems = document.getElementsByClassName('navItem'
  5. var result = [] 
  6. for(var i = 0; i < navItems.length; i++){ 
  7.  if(navItems[i].parentNode.className.match(/nav/){ 
  8.  result.push(navItems[i]) 
  9.  } 

有没有发现 jQuery 的代码一读就读懂了?可读性非常强!

当时我作为一个新人,每每看到 jQuery 那优雅的 API,都禁不住去思考 jQuery 到底是怎么实现的,我自己能不能实现出来(但我并不推荐看 jQuery 源码)。本着这样的想法,我学会了很多编程技巧。

为什么有些人代码水平老是提不高了,就是因为不会造轮子,不会设计优雅的 API,更不会实现优雅的 API,只会调用其他库或框架提供的功能(中枪的举手)。

而 jQuery 则提供了一个简单而又经典的范例供大家学习。

不信的话我们就来看看 jQuery 用到了哪些所谓的设计模式(其实就是编程套路)吧。

一、发布订阅模式

 

  1. var eventHub = $({}) 
  2. eventHub.on('xxx'function(){ console.log('收到') }) 
  3. eventHub.trigger('xxx'

二、用原型继承实现插件系统

  1. $.fn.modal = function(){ ... } 
  2. $('#div1').modal() 

Vue 2 的插件也是类似的思路哦

三、事件委托

 

  1. $('div').on('click''span'function(){...}) 

说实话,你在 2018 年找前端让他写一个事件委托,我保证 90% 写出来的代码都是有「明显」bug 的。

四、链式调用

 

  1. $('div').text('hi').addClass('red').animate({left: 100}) 

五、函数重载(伪)

 

  1. $(fn) 
  2. $('div'
  3. $(div) 
  4. $($(div)) 
  5. $('span''#scope1'

你会发现 $ 这个函数的参数可以是函数、字符串、元素和 jQuery 对象,甚至还能接受多个参数,这种重载是怎么做到的?

六、命名空间

 

  1. // 你的插件在一个 button 上绑定了很多事件 
  2. $button.on('click.plugin'function(){...}) 
  3. $button.on('mouseenter.plugin'function(){...}) 
  4. // 然后你想在某个时刻移除以上所有事件 
  5. $button.off('.plugin'

如果你不用 jQuery 就很麻烦了。

七、高阶函数

 

  1. var fn2 = $.proxy(fn1, asThis, param1) 

$.proxy 接受一个函数,返回一个新的函数。

其他就不一一列举了。

jQuery 的 API 风格依然在流行

我们把 jQuery 和 Axios 做一下对比:

 

  1. $.ajax({url:'/api', method:'get'}) 
  2. $.get('/api').then(fn1,fn2) 
  3. axios({ url: '/api', method: 'get'}) 
  4. axios.get('/api').then(fn1, fn2) 

为什么 2018 年流行的 axios 跟 jQuery.ajax 这么相像呢?

因为 jQuery 的 API 实在太好用了!搞得新库根本没法超越它,没有办法设计出更简洁的 API 了。毕竟 jQuery 也是在前端界流行近十年。

所以你学了 jQuery 很容易过渡其他类似的新库。

jQuery 也能做 MVC

很多人以为前端框架是从 Vue、React 和 Angular 才开始的,其实 jQuery 时代早就有基于 jQuery 的 MV* 库了,比如著名的 Backbone.js 和 Marionette.js。

看看下面的 Backbone 应用代码

 

  1. var TodoView = Backbone.View.extend({ 
  2.     tagName: 'div'
  3.     template: _.template($('#item-template').html()), 
  4.     events: { 
  5.         'click .toggle''xxx'
  6.     }, 
  7.     initialize: function () { 
  8.         this.listenTo(this.model, 'change', this.render); 
  9.     }, 
  10.     render: function () { 
  11.         if (this.model.changed.id !== undefined) {return; } 
  12.         this.$el.html(this.template(this.model.toJSON())); 
  13.         return this; 
  14.     } 
  15. }); 

AngularJS、Vue 1.x、Vue 2.x 其实都是顺着 Backbone MVC 的思路慢慢优化、改造得来的,如果你提前了解 Backbone 作为知识铺垫,那么理解 Vue 是非常容易的。如果面试官问你 MVC 和 MVVM 的区别,你也是很容易就可以答出来的。 

 

责任编辑:庞桂玉 来源: 今日头条
相关推荐

2019-04-09 09:22:32

Redis内存缓存

2022-04-08 10:15:29

VueReacHooks

2020-11-02 13:25:45

Redis数据库开源

2012-12-10 13:53:55

ITCIOGartner

2020-05-29 11:36:32

协议通信网络

2022-01-20 11:01:33

勒索软件即服务RaaS网络犯罪

2019-12-09 10:00:46

Python语言Java

2022-11-02 08:46:42

Go设计模式流程

2018-01-24 17:07:22

大数据炒作麦肯锡

2019-07-03 14:47:43

程序员祼辞就业

2021-01-18 23:01:04

机器学习技术人工智能

2017-08-24 13:10:09

IT

2021-09-15 09:31:39

前端开发工具

2017-04-25 10:29:12

数据中心网络堆叠技术

2015-03-10 10:29:26

微软Windows 7Azure云服务

2011-10-18 10:30:55

Unix

2017-08-21 17:39:34

微型机

2020-10-13 16:30:31

语言链表数组

2021-05-07 06:15:32

编程开发端口扫描

2016-12-02 08:36:33

苹果三星科技新闻早报
点赞
收藏

51CTO技术栈公众号