2

Как jQuery удается реализовать следующие:
Если сделать запрос в виде $('div') - он вернет HTMLCollection без каких-то дополнительных методов и свойств библиотеки. При этом сохраняет возможность под названием "цепочка вызовов". Например, вызов $('div').css('width',100) выполнится без проблем. Изначально я думал, что методы "навязываются" на HTMLCollection. Но посмотрев, я понял, что ошибся.
Кто знает ответ, пожалуйста напишите фрагмент кода, как это реализовано. Спасибо за внимание

Дополнение:

var a = function(q){    
     q = document.querySelectorAll(q);  
     console.log('1');  
     return this;  
}  
a.prototype.t = function(){  
   console.log('2');  
   return this;
}  

function _(b){  
   return new a(b);  
}  
_('div').t()
2
  • Что значит "он вернет HTMLCollection без каких-то дополнительных методов и свойств библиотеки"? Вывожу console.log($("div").__proto__) и вижу объект с прототипом JQuery объекта, никаких чистых объектов HTMLCollection. Если не так и я что-то не понял, можете собрать тут сниппет?
    – Alex Krass
    19 ноя 2016 в 8:11
  • В дополнение к вышесказанному и ссылкой на исходник в ответе @Andrew B, обращаю ваше внимание на следующую строку: init.prototype = jQuery.fn; и комментарий к ней "// Give the init function the jQuery prototype for later instantiation" в 126,127 строках. Поэтому функции передаются в прототипе, никакой магии.
    – Alex Krass
    19 ноя 2016 в 8:24

1 ответ 1

3

Обычный if (проверить что передали) {} и method chain

Про method chain простой пример можно посмотреть здесь (нужно нажать решение). Смысл в том, что метод/функция возвращает this, т.о. вы можете вызывать другие функции/методы того же объекта.

Про магию с определением того, что передали можно глянуть исходный код

Вот кусочек исходника:

// https://github.com/jquery/jquery/blob/2.2-stable/src/core.js
// Define a local copy of jQuery
jQuery = function( selector, context ) {

    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    return new jQuery.fn.init( selector, context );
}

// https://github.com/jquery/jquery/blob/2.2-stable/src/core/init.js
jQuery.fn.init = function( selector, context, root ) {
    var match, elem;

    // HANDLE: $(""), $(null), $(undefined), $(false)
    if ( !selector ) {
        return this;
    }

    ...

    // Handle HTML strings
    if ( typeof selector === "string" ) {

        ...

    // HANDLE: $(DOMElement)
    } else if ( selector.nodeType ) {

        ...

    // HANDLE: $(function)
    // Shortcut for document ready
    } else if ( jQuery.isFunction( selector ) ) {

        ...

    }

    if ( selector.selector !== undefined ) {
        this.selector = selector.selector;
        this.context = selector.context;
    }

    ...
};

Как видите, простой перебор вариантов, который в некоторых случаях возвращает this.

Добавлено

Если я правильно понял, Вы хотите добиться подобного результата:

// Создадим функцию, которая возвращает нам новый объект "класса" worker (чтобы самим не писать new - по аналогии с jQ)
var Styler = function(selector) {
  // Т.к. используем new, то у функции worker будет свой this
  return new Styler.worker(selector);
};

// Добавим нашей функции Styler статическое поле worker, в котором будет храниться наш класс
Styler.worker = function(selector) {
  // Назначим экземпляру объекта worker поле elements и сохраним в него список найденных элементов
  this.elements = document.querySelectorAll(selector);
  return this;
}

Styler.worker.prototype.css = function(name, value) {
  for (var i = 0; i < this.elements.length; i++) {
    // Т.к. в данный момент мы находимся в экземпляре объекта worker, то используем назначенное в конструкторе значение elements
    this.elements[i].style[name] = value;
  }
  return this;
}

Styler('div').css('color', 'blue');
Styler('div').css('font-size', '26px');
Styler('div').css('font-family', 'Arial').css('font-style', 'italic');
<div>Подопытный DIV</div>
<div>Подопытный DIV № 2</div>

8
  • Не получается, что-то не доходит до меня. Я вот пример сделал и не получилось сделать, что хотел ( Дополнение в вопросе).
    – Node_pro
    19 ноя 2016 в 1:38
  • @Node_pro, не до конца понял вопрос. Ответ дополнен. Посмотрите, пожалуйста, это ли вы имели в виду.
    – Andrew B
    19 ноя 2016 в 9:17
  • Спасибо за ответ, но чуть не в ту сторону. Если вызвать Styler('div') - хотел чтобы оно вернуло HTMLCollection, при этом методы Styler('div').сss() и другие, какие я задал тоже работали.
    – Node_pro
    19 ноя 2016 в 15:14
  • @Node_pro, думаю, так получится сделать только пропатчив HTMLCollection и NodeList. $('div') возвращает не HTMLCollection, а объект jquery
    – Andrew B
    19 ноя 2016 в 20:50
  • я тоже так считаю, но вот попробуйте вывести в консольке браузера как я сказал и посмотрите =)
    – Node_pro
    19 ноя 2016 в 21:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.