GithubHelp home page GithubHelp logo

Comments (3)

mgol avatar mgol commented on June 11, 2024

Thanks for the report. This is on the main branch, isn't it? That's code for future jQuery 4.0 which is not stable yet. When building for production use, it's recommended to check out the latest tag and build there.

In jQuery 3.x, the ATTR filter uses find.attr:

var result = find.attr( elem, name );

defined in the same file:

jquery/src/selector.js

Lines 853 to 876 in 87467a6

find.attr = function( elem, name ) {
// Set document vars if needed
// Support: IE 11+, Edge 17 - 18+
// IE/Edge sometimes throw a "Permission denied" error when strict-comparing
// two documents; shallow comparisons work.
// eslint-disable-next-line eqeqeq
if ( ( elem.ownerDocument || elem ) != document ) {
setDocument( elem );
}
var fn = Expr.attrHandle[ name.toLowerCase() ],
// Don't get fooled by Object.prototype properties (see trac-13807)
val = fn && hasOwn.call( Expr.attrHandle, name.toLowerCase() ) ?
fn( elem, name, !documentIsHTML ) :
undefined;
if ( val !== undefined ) {
return val;
}
return elem.getAttribute( name );
};

On the main branch, I removed the selector version and started using jQuery.attr:

var result = jQuery.attr( elem, name );

which lies outside of this module and this dependency was not made explicit.

Depending on attr.js is a bit hard because that module depends on selector itself:

import "../selector.js";

but that's mostly an artifact from jQuery 3.x previously depending on jQuery.find.attr from the selector module here:
ret = jQuery.find.attr( elem, name );

while on the main branch a native getAttribute is used:
ret = elem.getAttribute( name );

We should remove the dependency on selector.js from attr.js. As for fixing the selector issue, we have then two options:

  1. Move from using jQuery.attr to the native getAttribute directly - this is more in line with what jQuery 3.x was doing as the find.attr wrapper was in most cases deferring to the native method. However, that avoids attrHooks for attribute matching which is consulted when using the jQuery attr method.
  2. Add the dependency on attr.js to selector.js. That will make attrHooks respected.

I'm gravitating towards the first option for the following reasons:

  1. It's more in line with the current selector behavior that has been followed for many years.
  2. There are not that many built-in attrHooks left on the main branch. There's one for type but that's just for IE and only a setter (selector only needs getters) and there's one for boolean attributes - this latter one may actually constitute a breaking change as the value for all boolean attributes is always its lowercase name.

from jquery.

mgol avatar mgol commented on June 11, 2024

Actually, I was wrong about the logic change. Expr.attrHandle used to be populated in src/attr.js in 3.x:

attrHandle = jQuery.expr.attrHandle;

attrHandle = jQuery.expr.attrHandle;

On the 4.x line, this has been moved to be a regular member of jQuery.attrHooks:

jQuery.each( jQuery.expr.match.bool.source.match( /\w+/g ), function( _i, name ) {
jQuery.attrHooks[ name ] = {
get: function( elem ) {
var ret,
isXML = jQuery.isXMLDoc( elem ),
lowercaseName = name.toLowerCase();
if ( !isXML ) {
ret = elem.getAttribute( name ) != null ?
lowercaseName :
null;
}
return ret;
},
set: function( elem, value, name ) {
if ( value === false ) {
// Remove boolean attributes when set to false
jQuery.removeAttr( elem, name );
} else {
elem.setAttribute( name, name );
}
return name;
}
};
} );

Thus, the logic is fine, we just need to declare the dependency explicitly.

I submitted removing unneeded selector.js dependencies in PR #5383, I'll submit a separate one to add the dependency on attr.js to selector.js.

from jquery.

mgol avatar mgol commented on June 11, 2024

PR: #5384

from jquery.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.