JQuery. access source code analysis, jquery. access source code

JQuery. access source code analysis, jquery. access source code
Basic understanding

Jquery.attris the underlying support provided by jquery.attr, jquery.prop, jquery.css. A special feature in jQuery is function overloading, such as attr.

• $ ('# Box'). attr ('title ')
• $ ('# Box'). attr ('title', 'title ')
• $ ('# Box'). attr ({title: 'title', data-menu-toggle: 'dropdown '})
• $ ('# Box'). attr ('title', function (){....})

But throughout the jQuery. attr code, I didn't judge whether the value exists or not. OK, you guessed it, and implemented it in access.

jQuery.fn.extend({    attr: function (name, value) {        return jQuery.access(this, jQuery.attr, name, value, arguments.length > 1);    },    removeAttr: function (name) {        return this.each(function () {            jQuery.removeAttr(this, name);        });    },    prop: function (name, value) {        return jQuery.access(this, jQuery.prop, name, value, arguments.length > 1);    }
});

 

General idea of source code analysis

Source code

// Multifunctional method to get and set values of a collection // The value/s can optionally be executed if it's a function/** attr: function (name, value) {return jQuery. access (this, jQuery. attr, name, value, arguments. length> 1) ;}, ** @ param elems jQuery's this * @ param fn function * @ param key attribute * @ param value * @ param chainable can be chained or not, if it is a get action, it is false. If it is a set action, it is true * @ param emptyGet if jQuery The returned value * @ param raw value is the raw data. If raw is true, the value is the raw data. If raw is false, raw is a function * @ returns {*} */access: function (elems, fn, key, value, chainable, emptyGet, raw) {var I = 0, length = elems. length, bulk = key = null; // bulk volume, capacity; majority, majority; bulk // Sets partition values/*** if the parameter key is an object, to set multiple attributes, traverse the parameter key and call the access method ** $ ('# box '). attr ({data: 1, def: 'addd'}); */if (jQuery. type (key) = "object ") {Chainable = true; // indicates that you can call for (I in key) {jQuery. access (elems, fn, I, key [I], true, emptyGet, raw);} // Sets one value/*** $ ('# box '). attr ('customvalue', 'abc') * $ ('# box '). attr ('customvalue', function (value) {}); */} else if (value! = Undefined) {chainable = true; if (! JQuery. isFunction (value) {raw = true;} if (bulk) {// if (key = null & value! = Undefined) // Bulk operations run against the entire set/*** $ ('# box '). attr (undefined, 'abc') ** jQuery. attr. call (elems, value); after the call is complete, set fn to null */if (raw) {fn. call (elems, value); fn = null ;//... when t when executing function values/*** $ ('# box '). attr (undefined, function () {}) ** fn = bulk = jQuery. attr; ** fn = function (elem, key, value) {* return jQuery. attr. call (jQuery (elem), val Ue); *} **/} else {// if the key has a value, it is easy. The bulk here is to save a variable and store fn with bulk, then encapsulate the fn call bulk = fn; fn = function (elem, key, value) {return bulk. call (jQuery (elem), value) ;}}// jQuery. access (elems, jQuery. attr,) // if fn exists, call every element, no matter whether the key has a value or not, this judgment will be taken to execute the set action if (fn) {// recursive call of for (; I <length; I ++) {fn (elems [I], key, raw? Value:/*** if the value is the original data, the value is taken. If the value is a function, the value of this function is called * $ ('# box '). attr ('abc', function (index, value) {index points to the index of the current element, and value points to oldValue ** first calls jQuery. attr (elements [I], key) obtains the current value, and then calls the incoming fn value *}); */value. call (elems [I], I, fn (elems [I], key) ;}}/ *** if chainable is true, it indicates a set method, elems * is returned. Otherwise, the get Method * 1 is returned. if bulk is true, there is no key value. Call fn to pass elems to * 2. if bulk is false, it indicates that the key has a value. Then, determine whether the element length is greater than 0*2.1. If it is greater than 0, call Use fn to input elems [0] and key. If get * 2.2 is set to 0, it indicates that there is a problem with passing the parameter. The specified null value emptyGet */return chainable? Elems: // Gets bulk? Fn. call (elems): length? Fn (elems [0], key): emptyGet ;},

 

FlexSetter method in ExtJS

This reminds me of Ext's flexSetter method. For details about this method, please refer to the following section for more information: Ext. Function. flexSetter.

Usage:

Var ele = document. getElementById ('box'); function setAttribute (name, value) {ele. setAttribute (name, value);} var flexSetAttribute = Ext. function. flexSetter (setAttribute); flexSetAttribute ('title', 'title'); flexSetAttribute ({'abc': 'otherbu Bu ', 'other': 1 });

 

Source code

/*** 1. about Ext. implementation of enumerables ** the bug * var o = {toString: 111, valueOf: 222} that cannot be traversed by built-in methods such as toString and valueOf Some browsers to be compatible }; ** for (var oo in o) * {alert (oo);} **/var enumerables = [// 'hasownproperties', 'isprototypeof ', 'propertyisenumerable ', 'valueof ', 'tolocalstring', 'tostring', 'constructor']; for (I in {toString: 1}) {enumerables = null;} Ext. function = {flexSetter: function (setter) {retur N function (name, value) {// returns a closure var k, I; if (name! = Null) {if (typeof name! = 'String') {// if the name is not a string, it is considered as an object and the for in for (k in name) {if (name. hasOwnProperty (k) {setter. call (this, k, name [k]); // call setter one by one} if (Ext. enumerables) {for (I = Ext. enumerables. length; I --;) {k = Ext. enumerables [I]; if (name. hasOwnProperty (k) {setter. call (this, k, name [k]) ;}}} else {setter. call (this, name, value); // if it is a string, it is called directly.} return this ;};}};

 

Conclusion: Obviously, Ext flexSetter is not powerful but rigorous enough, jQuery. access makes a unified arrangement for the functions of setting parameters flexibly for upper layers such as prop and attr, which facilitates calling and saves bits.

Jquery source code analysis

The understanding of objects and prototypes will be very helpful.
But it is better to look at the source code after getting familiar with jquery, which will be helpful for understanding and easy to understand.

It is better to look at $. fn. init from the core of jquery and then look at other $. extend.

JQuery Source Code cannot be understood. Why is there a book explaining jQuery source code?

I don't know if there are any books, but there are some source code analysis articles on the Internet. I recommend one for you:
Www.cnblogs.com/..3.html