Spying on jquery--for JavaScript programmers

When JQuery came out in January 2006, my first impression was that it was a very smart thing to build. Based on CSS selector (CSS selectors) to manage everything, its thinking is very clever (reference getelementsbyselector). But the chain-box fortifications (chaining stuff) look more like gimmicks, and as a whole, the functionality that the jquery library provides does not cover everything that is fundamental. So I conclude that jquery is only a flash in the pan.

For months I have come to understand that I am mistaken. jquery is very aggressive in terms of technical considerations. It encapsulates a large number of commonly used functions in a concise way, and provides a sophisticated plug-in API to meet the implementation of functional modules outside the standard library. The core of jquery is the collection of DOM elements (usually a collection of children)--it takes the collection of elements as a fundamental and abstracts the heights. Most importantly, this abstraction that follows best practices allows jquery to get along with other JavaScript code.

Many of the introductions to jquery are for designers and junior developers. Next I want to explain why jquery also attracts experienced developers.

Namespace (namespacing)

The key to writing reusable, good JavaScript code is the active control of namespaces. JavaScript has only a single, global namespace (that is, a Window object), and many programmers (and some libraries) arbitrarily add things to it. To know the global variable is the devil! Smart developers use techniques like component patterns to try to reduce the number of global objects.

jquery introduces only one tag to the global namespace: the jquery function/object. The rest is either the direct attribute of jquery (the original ' Directy property ' is a clerical error, it should be ' direct '), or the method that calls the object returned by the jquery function.

What about the "language Upgrade" (Language enhancements)? Most libraries provide mappings, filtering, stripping, and often the features that are missing from the browser's JavaScript engine. There are also libraries that directly extend the string and array classes built into JavaScript, but this is a risky approach. String.prototype and Array.prototype also have their own namespaces, in which the attributes added to the conflict, the risk is no less than in the global environment of carelessness.

In terms of language upgrades, jquery provides a number of functions (functions), But each function is assigned to the properties of the JQuery object: Jquery.each,jquery.extend,jquery.grep,jquery.map,jquery.merge and Jquery.trim. As a result, they do not conflict with other code.

Notorious $ functions (the infamous $ function)

As I said, jquery is the only global tag introduced, but it's not necessarily: the $ tag is also introduced as a shortcut to jquery. Thankfully, $ 's presence does not have a negative impact: if you need to get the original $ back to the dead (for example, your code used prototype before), you can call Jquery.noconflict () to restore it.

If you want to have the convenience of $ and don't want jquery to conflict with other code that uses the global $ function as well, follow the usual method suggested by the jquery document:

(function($) {
　　// 在这个函数体里，$可作为jQuery的引用
　　// 很方便，对吧？
})(jQuery);

The practice of attaching everything to the $ tag has made me think that jquery is flashy. However, looking at this design from a system perspective is clear-though I often like to define my own $ shortcuts in code.