How to design aN API

In fact, it is not because I am good, but because the API design of jQuery is too human!

Here are some examples:

  • The first is jQuery’s simplification of event listening
If (button.addeventListener) button.addeventListener ('click',fn); else if (button.attachEvent) { button.attachEvent('onclick', fn); }else { button.onclick = fn; $(button). On ('click', fn)Copy the code
  • The second is jQuery’s simplification of element selection
$('.nav >.navitem ') $('.nav >.navitem ') 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

Did you find the jQuery code easy to read? Very readable!

Of course, as a newcomer, when I look at the elegant API of jQuery, I can’t help but wonder how jQuery is implemented and if I can do it myself (I don’t recommend looking at the source code). With this in mind, I learned a lot of programming skills.

The reason why some people keep failing to improve their code is because they can’t build wheels, can’t design elegant apis, and can’t implement elegant apis, and just call functionality provided by other libraries or frameworks (hand up if you’re shot).

JQuery provides a simple and classic example to follow.

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

1. Publish and subscribe

Var eventHub = $({}) eventHub. On (' XXX ', function(){console.log(' received ')}) eventHub.Copy the code

2. Implement the plug-in system with prototype inheritance

$.fn.modal = function(){ ... }
$('#div1').modal()
Copy the code

3. Event delegation

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

4. Chained calls

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

5. Function overload (pseudo)

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

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

6. Namespace

$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

7. 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 listed one by one.

The jQuery API style is still popular

Let’s compare jQuery. Ajax 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 easy to use! There’s no way to design a cleaner API. After all, jQuery has been popular in the front-end world for almost a decade.

So once you learn jQuery, it’s easy to transition to other new libraries like this.

AngularJS, Vue 1.x, and Vue 2.x are all gradually optimized and modified along the train of thought of Backbone MVC. If you know Backbone as a foundation of knowledge in advance, it is very easy to understand Vue. If the interviewer asks you the difference between MVC and MVVM, you can tell the difference easily.