Today, a new student asked me: Do I still need to learn jQuery? You said in Zhihu that jQuery is out of date, don’t you need to learn it?

The short answer:

You can learn a thing or two about jQuery, and it’s very useful for writing code and wrapping libraries.

New people can still learn from jQuery because it’s hard to understand Vue/React directly at a new level. JQuery is a great way to transition from Vue to React because there are so many programming routines in jQuery.

But if you don’t want to learn, don’t. Learning Vue/React is a little harder, but it’s still possible.

The long answer:

JQuery is certainly out of date

It’s probably been almost two years since I last used jQuery in a project (except for a demo in class). It’s amazing how I learned jQuery.

When I was in a technical group at university doing C# website development, I needed to use jQuery effects. One of my friends in the group knew how to use a little jQuery and soon created.animate effects that amazed me. I thought jQuery was amazing, even though I didn’t know JS at the time.

So I immediately bought a copy of Sharp jQuery and stuck to it.

What is “hard look”? Because I don’t know JS, and I didn’t write the code from the book, just “look at the jQuery code” with my eyes. Amazingly — I managed to read almost the whole book very quickly. So that when my friend who knows how to use jQuery asks me a question about a bug, I can answer it directly. He doesn’t seem to have read the book Sharp jQuery. (Laughs)

In 2018, almost no new projects will be developed using jQuery; Even if there is, it is not something worth showing off. So why do I recommend learning jQuery?

Here’s why.

How to design aN API

It is not because I am good at javascript, but because the API of jQuery is designed so humanly.

Let me give you some examples:

The first is jQuery’s simplification of event listening

// At that time, if you don't use jQuery, listen on events (compatible with IE 6)if (button.addEventListener)  
  button.addEventListener('click',fn);
else if (button.attachEvent) { 
  button.attachEvent('onclick', fn);
}else{ button.onclick = fn; } // But if you use jQuery, you just need to write $(button).on('click', fn)
Copy the code

The second is jQuery’s simplification of element selection

// If you want to get all the elements corresponding to. Nav >. NavItem, jQuery says $('.nav > .navItem') / / in IE 6, you have to write so var navItems = document. GetElementsByClassName ('navItem')
var result = []
for(var i = 0; i < navItems.length; i++){
  if(navItems[i].parentNode.className.match(/\bnav\b/){
    result.push(navItems[i])
  }
}
Copy the code

Do you find that you understand the jQuery code at first reading? Very readable!

As a newcomer, I couldn’t look at jQuery’s elegant API without wondering how it was implemented and if I could do it myself (but I don’t recommend looking at the source code). With that in mind, I learned a lot of programming skills.

The reason why some people don’t code well is because they can’t build wheels, can’t design elegant apis, can’t implement elegant apis, and can only call functions provided by other libraries or frameworks (hands up if you’re shot).

JQuery provides a simple and classic example to learn from.

If you don’t believe me, let’s take a look at some of the so-called design patterns that jQuery uses.

Publish and subscribe mode

var eventHub = $({})
eventHub.on('xxx'.function(){ console.log('received') })
eventHub.trigger('xxx')
Copy the code

Implement plug-in system with prototype inheritance

$.fn.modal = function(){ ... }
$('#div1'The plugin for.Modal () Vue 2 works in a similar wayCopy the code

3. Event delegation

$('div').on('click'.'span'.function() {... })Copy the code

Honestly, if you go to the front end and ask him to write an event delegate in 2018, I guarantee that 90% of the code that comes out is “obviously” buggy.

4. Chain call

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

Five, function overload (fake)

$(fn)
$('div')
$(div)
$($(div))
$('span'.'#scope1')
Copy the code

You’ll notice that the $function can take functions, strings, elements, and jQuery objects, and can even take multiple arguments. How does this overload work?

Namespaces

// Your plugin binds many events to a button$button.on('click.plugin'.function() {... })$button.on('mouseenter.plugin'.function() {... }) // Then you want to remove all of the above events at some point$button.off('.plugin')
Copy the code

If you don’t use jQuery, you’re in trouble.

Higher order functions

var fn2 = $.proxy(fn1, asThis, param1)
Copy the code

$.proxy takes a function and returns a new function.

The others are not enumerated.

JQuery’s API style is still popular

Let’s compare jQuery to Axios:

$.ajax({url:'/api', method:'get'})
$.get('/api').then(fn1,fn2)

axios({ url: '/api', method: 'get'})
axios.get('/api').then(fn1, fn2)
Copy the code

Why does 2018’s popular Axios look so much like jquery.Ajax?

Because the jQuery API is so good! The new library won’t be able to beat that and design a cleaner API. After all, jQuery has been popular in the front-end world for nearly a decade.

So if you learn jQuery, it’s easy to transition to a new library like this.

JQuery can also do MVC

Many people think that front-end frameworks started with Vue, React, and Angular. In fact, there are MV* libraries based on jQuery in the era of jQuery, such as backbone. js and Marionette.js.

See the Backbone application code below

var TodoView = Backbone.View.extend({
	tagName:  'div',
	template: _.template($('#item-template').html()),
	events: {
		'click .toggle': 'xxx',
	},
	initialize: function () {
		this.listenTo(this.model, 'change', this.render);
	},
	render: function () {
		if(this.model.changed.id ! == undefined) {return; }
		this.$el.html(this.template(this.model.toJSON()));
		returnthis; }});Copy the code

AngularJS, Vue 1.x and Vue 2.x are all optimized and reformed along with Backbone MVC. It’s easy to understand Vue if you know Backbone in advance. If an interviewer asks you the difference between MVC and MVVM, you can easily tell them.

Finally, I will quote one of my previous answers to illustrate the significance of learning jQuery:

Fully understand jQuery source code, what level in the front-end industry?

Explain that you are 1 familiar with regular expressions 2 familiar with closures 3 familiar with prototype chains 4 familiar with DOM APIS 5 Familiar with various design patterns (events, Promises, pseudo-overloading, decorator patterns, etc.) 6 familiar with DOM events 7 Familiar with old browser features (bugs) 8 familiar with modularity 9 Understand browser rendering principle 10 proficient in AJAX 11 understand HTTP request can kill 80% of China's front-end in a second.Copy the code