Detailed explanation of jQuery 3.0's setter and getter modes

jQuery's setter/getter share a function, and its meaning is indicated by whether to pass parameters. Simply put, if parameters are passed, it is a setter, and if parameters are not passed, it is a getter.

It is not uncommon in programming languages ​​for a function to have multiple meanings, such as function overloading: a group of functions with the same function name and different parameter lists is called an overloaded function. . The advantage of overloading is that it reduces the number of function names, avoids name space pollution, and is also very beneficial to the readability of the program.

Function overloading mainly reflects two aspects. One is the type of parameters. The same number of parameter types with different types can be called function overloading; the other is the number of parameters. Different numbers can also be called function overloading. It's called function overloading. Note that overloading has nothing to do with the function's return value.

Due to the weak type characteristics of JS, if you want to simulate function overloading, you can only achieve it through the second method: the number of parameters. Therefore, the arguments object within the function is very important.

The following is an example

function doAdd() {
var argsLength = arguments.length
if (argsLength === 0) {
return 0
} else if (argsLength === 1) {
return arguments[0] + 10
} else if (argsLength === 2) {
return arguments[0] + arguments[1]
}
}
doAdd() // 0
doAdd(5) // 15
doAdd(5, 20) // 25

doAdd realizes three meanings by overloading to determine the number of parameters of the function. When argsLength is 0, 0 is returned directly; when argsLength is 1, the parameter is the same as 10 is added; when argsLength is 2, the two parameters are added.

Using the function overloading feature to implement setter/getter

function text() {
var elem = this.elem
var argsLength = arguments.length
if (argsLength === 0) {
return elem.innerText
} else if (argsLength === 1) {
elem.innerText = arguments[0]
}
}

The above briefly explains function overloading and using it to implement setter/getter. That is, the "value taker" and the "assignor" are combined into one. Whether to get a value or assign a value is determined by the parameters of the function. Many jQuery API designs make heavy use of this pattern.

The following figure summarizes all APIs using this pattern in jQuery, with a total of 14 functions

All these functions internally depend on one another Function access, it is no exaggeration to say that access is the core of all these functions and the core of implementing setter/getter. The following is the source code of this function. It is a private function and cannot be called externally.

The source code of access is as follows

// Multifunctional method to get and set values of a collection
// The value/s can optionally be executed if it's a function
var access = function( elems, fn, key, value, chainable, emptyGet, raw ) {
  var i = 0,
    len = elems.length,
    bulk = key == null;
  // Sets many values
  if ( jQuery.type( key ) === "object" ) {
    chainable = true;
    for ( i in key ) {
      access( elems, fn, i, key[ i ], true, emptyGet, raw );
    }
  // Sets one value
  } else if ( value !== undefined ) {
    chainable = true;
    if ( !jQuery.isFunction( value ) ) {
      raw = true;
    }
    if ( bulk ) {
      // Bulk operations run against the entire set
      if ( raw ) {
        fn.call( elems, value );
        fn = null;
      // ...except when executing function values
      } else {
        bulk = fn;
        fn = function( elem, key, value ) {
          return bulk.call( jQuery( elem ), value );
        };
      }
    }
    if ( fn ) {
      for ( ; i < len; i++ ) {
        fn(
          elems[ i ], key, raw ?
          value :
          value.call( elems[ i ], i, fn( elems[ i ], key ) )
        );
      }
    }
  }
  return chainable ?
    elems :
    // Gets
    bulk ?
      fn.call( elems ) :
      len ? fn( elems[ 0 ], key ) : emptyGet;
};

The comment of this function mentions: This is a multi-functional function used to get and set elements of a collection Properties and values. value can be an executable function. This function has less than 60 lines of code in total. Reading from top to bottom, the first if is to set multiple value values ​​and is a recursive call. Excluding this recursive call, the code to set a single value is less than 50 lines. The writing is very concise and readable.

In order to understand the access function, I drew two diagrams

The two main branches inside access

The internal execution process of access

The formal parameters defined by access have 7

1.elems element collections, which are passed in the actual call. this, here this is the jQuery object. We know that the jQuery object itself is a collection with a length property and an index. Must pass.

2.fn The function that implements setter/getter means that there needs to be conditions in this function to determine which part is a setter and which part is a getter. Must pass.

3.key For example, which key value should be passed to the attr and prop methods to set or get. Some do not need to be passed, but are replaced by null for placeholder purposes, such as text and html methods. Optional.

4. Value should be passed only when it is a setter, that is, when the value is undefined, it is a getter, otherwise it is a setter. Optional.

5.chainable When true, it enters setter mode and returns a jQuery object. false to enter getter mode. Passed in arguments.length or arguments.length>1 when calling.

6.emptyGet When the jQuery object is empty, the returned result is undefined by default, and null is passed when the data method is called.

7.raw When value is a function type, raw is false, otherwise it is true.

As mentioned above, access is the core of all jQuery setter/getter functions. In other words, all 14 function setter/getter functions will call access internally. This is why access has 7 parameters and many branches. Because it has to deal with many conditions. But all these setters/getters have a lot of similar code and end up extracting a common function.

In order to facilitate understanding, I have classified access calls as follows to facilitate our understanding.

1. When calling access, the third parameter key is passed as null, which are the text/html methods.

text: function( value ) {
  return access( this, function( value ) {
    return value === undefined ?
      jQuery.text( this ) :
      this.empty().each( function() {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
          this.textContent = value;
        }
      } );
  }, null, value, arguments.length );
},
html: function( value ) {
  return access( this, function( value ) {
    var elem = this[ 0 ] || {},
      i = 0,
      l = this.length;
    if ( value === undefined && elem.nodeType === 1 ) {
      return elem.innerHTML;
    }
    // See if we can take a shortcut and just use innerHTML
    if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
      !wrapMap[ ( rtagName.exec( value ) || [ "", "" ] )[ 1 ].toLowerCase() ] ) {
      value = jQuery.htmlPrefilter( value );
      try {
        for ( ; i < l; i++ ) {
          elem = this[ i ] || {};
          // Remove element nodes and prevent memory leaks
          if ( elem.nodeType === 1 ) {
            jQuery.cleanData( getAll( elem, false ) );
            elem.innerHTML = value;
          }
        }
        elem = 0;
      // If using innerHTML throws an exception, use the fallback method
      } catch ( e ) {}
    }
    if ( elem ) {
      this.empty().append( value );
    }
  }, null, value, arguments.length );
},

The diagram shows where these two methods are executed inside access

为什么 key 传 null，因为 DOM API 已经提供了。text 方法使用 el.innerText 设置或获取；html 方法使用 innerHTML 设置或获取（这里简单说，实际还有一些异常处理）。

2. 与第一种情况相反，调用 access 时 key 值传了且不为 null。除了 text/html 外的其它 setter 都是如此

attr: function( name, value ) {
  return access( this, jQuery.attr, name, value, arguments.length > 1 );
},
prop: function( name, value ) {
  return access( this, jQuery.prop, name, value, arguments.length > 1 );
},
// Create scrollLeft and scrollTop methods
jQuery.each( { scrollLeft: "pageXOffset", scrollTop: "pageYOffset" }, function( method, prop ) {
  var top = "pageYOffset" === prop;
  jQuery.fn[ method ] = function( val ) {
    return access( this, function( elem, method, val ) {
      var win = getWindow( elem );
      if ( val === undefined ) {
        return win ? win[ prop ] : elem[ method ];
      }
      if ( win ) {
        win.scrollTo(
          !top ? val : win.pageXOffset,
          top ? val : win.pageYOffset
        );
      } else {
        elem[ method ] = val;
      }
    }, method, val, arguments.length );
  };
} );
css: function( name, value ) {
  return access( this, function( elem, name, value ) {
    var styles, len,
      map = {},
      i = 0;
    if ( jQuery.isArray( name ) ) {
      styles = getStyles( elem );
      len = name.length;
      for ( ; i < len; i++ ) {
        map[ name[ i ] ] = jQuery.css( elem, name[ i ], false, styles );
      }
      return map;
    }
    return value !== undefined ?
      jQuery.style( elem, name, value ) :
      jQuery.css( elem, name );
  }, name, value, arguments.length > 1 );
}
// Create innerHeight, innerWidth, height, width, outerHeight and outerWidth methods
jQuery.each( { Height: "height", Width: "width" }, function( name, type ) {
  jQuery.each( { padding: "inner" + name, content: type, "": "outer" + name },
    function( defaultExtra, funcName ) {
    // Margin is only for outerHeight, outerWidth
    jQuery.fn[ funcName ] = function( margin, value ) {
      var chainable = arguments.length && ( defaultExtra || typeof margin !== "boolean" ),
        extra = defaultExtra || ( margin === true || value === true ? "margin" : "border" );
      return access( this, function( elem, type, value ) {
        var doc;
        if ( jQuery.isWindow( elem ) ) {
          // $( window ).outerWidth/Height return w/h including scrollbars (gh-1729)
          return funcName.indexOf( "outer" ) === 0 ?
            elem[ "inner" + name ] :
            elem.document.documentElement[ "client" + name ];
        }
        // Get document width or height
        if ( elem.nodeType === 9 ) {
          doc = elem.documentElement;
          // Either scroll[Width/Height] or offset[Width/Height] or client[Width/Height],
          // whichever is greatest
          return Math.max(
            elem.body[ "scroll" + name ], doc[ "scroll" + name ],
            elem.body[ "offset" + name ], doc[ "offset" + name ],
            doc[ "client" + name ]
          );
        }
        return value === undefined ?
          // Get width or height on the element, requesting but not forcing parseFloat
          jQuery.css( elem, type, extra ) :
          // Set width or height on the element
          jQuery.style( elem, type, value, extra );
      }, type, chainable ? margin : undefined, chainable );
    };
  } );
} );
data: function( key, value ) {
  var i, name, data,
    elem = this[ 0 ],
    attrs = elem && elem.attributes;
  // Gets all values
  if ( key === undefined ) {
    if ( this.length ) {
      data = dataUser.get( elem );
      if ( elem.nodeType === 1 && !dataPriv.get( elem, "hasDataAttrs" ) ) {
        i = attrs.length;
        while ( i-- ) {
          // Support: IE 11 only
          // The attrs elements can be null (#14894)
          if ( attrs[ i ] ) {
            name = attrs[ i ].name;
            if ( name.indexOf( "data-" ) === 0 ) {
              name = jQuery.camelCase( name.slice( 5 ) );
              dataAttr( elem, name, data[ name ] );
            }
          }
        }
        dataPriv.set( elem, "hasDataAttrs", true );
      }
    }
    return data;
  }
  // Sets multiple values
  if ( typeof key === "object" ) {
    return this.each( function() {
      dataUser.set( this, key );
    } );
  }
  return access( this, function( value ) {
    var data;
    // The calling jQuery object (element matches) is not empty
    // (and therefore has an element appears at this[ 0 ]) and the
    // `value` parameter was not undefined. An empty jQuery object
    // will result in `undefined` for elem = this[ 0 ] which will
    // throw an exception if an attempt to read a data cache is made.
    if ( elem && value === undefined ) {
      // Attempt to get data from the cache
      // The key will always be camelCased in Data
      data = dataUser.get( elem, key );
      if ( data !== undefined ) {
        return data;
      }
      // Attempt to "discover" the data in
      // HTML5 custom data-* attrs
      data = dataAttr( elem, key );
      if ( data !== undefined ) {
        return data;
      }
      // We tried really hard, but the data doesn&#39;t exist.
      return;
    }
    // Set the data...
    this.each( function() {
      // We always store the camelCased key
      dataUser.set( this, key, value );
    } );
  }, null, value, arguments.length > 1, null, true );
},

图示这些方法在 access 内部执行处

更多jQuery 3.0 的 setter和getter 模式详解相关文章请关注PHP中文网！