Geekly Articles each Day
📜 ⬆️ ⬇️

18 surprises when reading jQuery source code

Translation of the article "18 Surprises From Reading jQuery's Source Code", David Aragon.

I love jQuery, and although I consider myself to be an advanced JavaScript developer, I have never, until now, read the jQuery source from start to finish. Here are a few things that I learned:

Note: I use the $.fn.method() syntax to indicate a method call on a selection of elements. For example, when I write $.fn.addClass , it denotes uses like $('div').addClass('blue') or $('a.active').addClass('in-use') . $.fn is the prototype for jQuery element wrappers.

  1. Sizzle Weight: Sizzle is a jQuery engine for samples from the DOM by CSS selectors. This is what makes $('div.active') into an array of elements that you can operate on. I knew that Sizzle makes up most of the jQuery, but I was surprised to find out how huge it really is. This is the biggest feature, in terms of the number of lines, in the jQuery source code. According to my calculations, it makes up 22% of the entire code base. This overshadows the next largest thing in jQuery - $.ajax , which takes up only 8% of library code.
    ')
  2. $ .grep: This method is similar to the Underscore _.filter method, it also takes two arguments, an array of elements and a function, and returns the elements that passed the function test.

  3. Bubbling cautions: jQuery prohibits bubbling one type of event. This is a load event. Inside, jQuery passes the special flag noBubble: true for all load events, so that image.load events cannot pop up to the window object (which can be mistakenly perceived as window.load).

  4. Default animation speed: jQuery animates elements by changing their styles in quick succession. Each of these quick changes is called a “tick”. The default speed for animation is a tick every 13 milliseconds, you can adjust this by overriding jQuery.fx.interval to your own number.

  5. $ .fn.addClass accepts a function: We usually pass a string with class names to the $ .fn.addClass function. But it also takes over the function. The function passed must return a string with the class names separated by a space. As a bonus, this function takes an element index from the list of elements to which it applies, which allows you to build smart class names.

  6. The same can and $ .fn.removeClass: This method also accepts a function, as in the method above. The function passed also takes an element index.

  7. Pseudo-selector: empty This convenient pseudo-selector selects elements without child nodes.

  8. Pseudo-selectors: lt and: gt: These pseudo-selectors select elements by their index in the sample. For example, $('div:gt(2)') return all divs except the first three (indexing starts from zero). If you pass a negative number to the argument, jQuery counts back from the end of the sample.

  9. $ (document) .ready () uses promises: It turns out that jQuery uses its own product. Inside, good old $(document).ready() used by jQuery deferred to determine when the DOM is fully loaded.

  10. $ .type: I'm sure you're all familiar with typeof , but did you know that jQuery provides a .type() method? The jQuery version is more reasonable than the native browser version. For example, typeof (new Number(3)) returns “object,” while $.type(new Number(3)) returns “number.” Added: As the ShirtlessKirk indicated in the comments, $ .type returns the return type of the method .valueOf ( ). So it is more correct to say that $ .type will tell you the type of the return value of the object.

  11. $ .fn.queue: You can get the effects queue of an element with the following code: $('div').queue() . This is useful if you need to know how many effects still need to be applied to the element. It is even more useful to add effects to the queue yourself. From jQuery docks:

     $( document.body ).click(function() { $( "div" ) .show( "slow" ) .animate({ left: "+=200" }, 2000 ) .queue(function() { $( this ).addClass( "newcolor" ).dequeue(); }) .animate({ left: "-=200" }, 500 ) .queue(function() { $( this ).removeClass( "newcolor" ).dequeue(); }) .slideUp(); });

  12. Click events are forbidden on inactive (disabled) elements: jQuery does not handle click events on disabled elements, good optimization, which removes the obligation to check it yourself.

  13. $ .fn.on accepts an object: Did you know that $.fn.on accepts an object to connect to multiple events at the same time? Example from jQuery docks:

     $( "div.test" ).on({ click: function() { $( this ).toggleClass( "active" ); }, mouseenter: function() { $( this ).addClass( "inside" ); }, mouseleave: function() { $( this ).removeClass( "inside" ); } });

  14. $ .camelCase: This helper method turns the hyphen string into camelCase.

  15. $ .active: A call to $.active returns the number of active XHR requests. This can be useful for limiting the number of concurrently active AJAX calls.

  16. $ .fn.parentsUntil / $ .fn.nextUntil / $ .fn.prevUntil: I am well aware of the methods .parents() , .next() and .prev() , but I did not know that there were Until versions of these methods. Essentially, these methods will select the parents / next / prev elements until they reach the transmitted stopping element.

  17. Arguments $ .fn.clone: When you clone an element, you can also clone its data attributes and events by passing true first argument to the clone method.

  18. Other $ .fn.clone arguments: In addition, you can clone the data attributes and events of the child elements by passing true to the second argument. This is called “deep cloning”. The second argument is the default of the first one (which, by default, is false). Thus, if the first argument is true and you want the second to be true , you can omit the second argument.


In an earlier version of this article, it was said that the return value of the argument function from Example 5 should be a string separated by commas. It turns out that this should be a string separated by spaces. Thank you, Jonathan!

Source: https://habr.com/ru/post/230449/

More articles:


All Articles