Понимание объекта возврата jQuery

Я пытаюсь понять, как jQuery создает возвращаемый объект при поиске элементов DOM. Я прошел через источник, но я не совсем уверен, что понимаю, и надеялся, что кто-то здесь может дать мне некоторое представление.

Из того, что я могу собрать, прочитав исходный код, при запросе jQuery DOM, jQuery находит соответствующие элементы DOM, а затем добавляет соответствующий элемент DOM в качестве объекта, используя индекс элемента в качестве ключа для нового объекта.

if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
    for ( match in context ) {
       // Properties of context are called as methods if possible
       if ( jQuery.isFunction( this[ match ] ) ) {
             this[ match ]( context[ match ] );    
            // ...and otherwise set as attributes
       } else {
            this.attr( match, context[ match ] );
       }
    }
}    
return this;

Возвращая this, возвращается весь объект jQuery, который включает в себя все методы. Правильно ли я понял это?

Теперь появляются все функции, такие как css, find, ajax, hide и т.д. находятся в объекте jQuery.fn.

Как-то (и я думаю, что это то, где я его не вижу), эти функции вызываются не самим элементом DOM, а через access.js https://github.com/jquery/jquery/blob/master/src/core/access.js

var access = jQuery.access = function( elems, fn, key, value, chainable, emptyGet, raw ) {

используя css в качестве примера, мы имеем

jQuery.extend({
    css: function( elem, name, extra, styles ) {...

jQuery.fn.extend({
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 );

Я думаю, что мне не хватает, как мы получили вызов $('div').css(...) к вызову метода jQuery.fn.extend.css, а оттуда метод доступа, вызываемый с другой подписью, к методу доступа инициализируется в основном jQuery?

Кроме того, если мы постоянно заменяем jQuery[0],jQuery[1], как я могу это сделать:

var divs = $('div');
var spans = $('span');

Поддерживать два разных набора тегов документа, если они возвращают один и тот же объект jQuery? Я думал, что объект будет обновлен.

Я полностью недопонимаю, как все это работает?

Ответы

Ответ 1

Из того, что я могу собрать, чтобы прочитать источник, при запросе jQuery DOM, jQuery находит соответствующие элементы DOM, а затем добавляет согласованный DOM элемент как объект, используя индекс элемента в качестве ключа для новый объект.

Да. Экземпляры jQuery в основном представляют собой объекты типа массива.

if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
    for ( match in context ) {
       // Properties of context are called as methods if possible
       if ( jQuery.isFunction( this[ match ] ) ) {
             this[ match ]( context[ match ] );    
            // ...and otherwise set as attributes
       } else {
            this.attr( match, context[ match ] );
       }
    }
}    
return this;

Но это не то, что происходит в этом цитированном разделе кода. Здесь вы видите код для обработки jQuery(html, attributes) signature - когда второй аргумент является объектом, а первый - автономным тегом html, затем вызовите соответствующие методы или установите атрибуты в новой коллекции (this).

Возвращая это, возвращается весь объект jQuery, который включает все методы. Теперь появляются все функции, такие как css, find, ajax, hide и т.д. находятся в объект jQuery.fn.

Да. Объекты, возвращаемые конструктором jQuery, наследуют эти методы от объекта прототипа $.fn.

Как-то (и я думаю, что это то, где я его не вижу), эти функции вызываются не самим элементом DOM, а через access.js https://github.com/jquery/jquery/blob/master/src/core/access.js

access - это только внутренняя вспомогательная функция. Все методы jQuery вызываются в экземплярах jQuery.

используя css в качестве примера, мы имеем

jQuery.extend({
    css: function( elem, name, extra, styles ) {...

jQuery.css() - это просто "статическая" внутренняя вспомогательная функция для вычисления вычисленных значений css. Ничто из того, что вы когда-либо использовали бы непосредственно сами.

jQuery.fn.extend({
    css: function( name, value ) {
        return access( this, function( elem, name, value ) {
            …
        }, name, value, arguments.length > 1 );
    }

Я думаю, что мне не хватает, как мы получили от вызова $('div'). css (...) к вызову метода jQuery.fn.extend.css

Нет метода jQuery.fn.extend.css. Этот вызов jQuery.fn.extend() определяет метод jQuery.fn.css. И это просто метод, который вы называете - он прототипно унаследован $('div').

и оттуда метод доступа, вызываемый с другой подписью к методу доступа, инициализированному в ядре jQuery?

Нет, почему вы так думаете?

// the signature:
access = function( elems, fn, key, value, chainable, emptyGet, raw )
// the call:
access( this, // array-like collection
        function(…){…}, // callback
        name, // string
        value, // whatever
        arguments.length > 1 // boolean whether it a getter
        // undefined, implicit
        // undefined, implicit
      )

Кроме того, если мы постоянно заменяем jQuery [0], jQuery [1]

Нет, нет? Где вы это видели?

как это возможно: var divs = $('div'); var spans = $('span');Поддержание двух разных наборов тегов документа, если они оба возвращает тот же объект jQuery?

Это не так. Оба вызова действительно создают новые экземпляры jQuery.

Я думал, что объект будет обновлен.

Нет, экземпляры jQuery совершенно неизменяемы.