Можете ли вы объяснить этот метод jQuery? - PullRequest
3 голосов
/ 11 ноября 2009

Пытаясь понять, как jquery работает под прикрытием, в чем разница:

jQuery.fn и jQuery.prototype

jQuery = window.jQuery = window.$ = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context );
},

и затем:

jQuery.fn = jQuery.prototype = {
    init: function( selector, context ) {

Ответы [ 3 ]

8 голосов
/ 11 ноября 2009

Первый фрагмент гарантирует, что при использовании jQuery всегда будет вызываться функция init для прототипа jQuery.

$() == jQuery() == new jQuery() == new jQuery.prototype.init()

Второй фрагмент позволяет получить доступ к прототипу jQuery из fn. Присваивая функции свойству fn, они также присваиваются $ .prototype. Это позволяет вызывать эти методы для объектов, возвращаемых из $:

jQuery.fn.example = function() { alert(this.id); }
$('#some-id').example(); // alerts 'some-id'
4 голосов
/ 17 апреля 2010

jQuery.fn - это прототип, на котором основаны все новые экземпляры jQuery. Он существует для того, чтобы сторонний код (и сам jQuery!) Мог расширять jQuery, используя такой код:

jQuery.fn.myMethod = function() {...}

Однако в настоящее время в jQuery все следующие четыре являются ссылками на один и тот же объект!

  • jQuery.fn
  • jQuery.prototype
  • jQuery.fn.init.prototype
  • jQuery.prototype.init.prototype

И это еще не все: поскольку jQuery и $ (обычно) являются псевдонимами друг друга, вы можете заменить jQuery на $ в любом из вышеперечисленных, сделав 8 ссылок на jQuery.fn.

Так почему же они дали одно и то же всем этим разным именам? Частично исторический, частично необходимый для наследования прототипа.

jQuery.fn очень важен, потому что и сам jQuery, и множество существующего кода полагаются на него таким образом при расширении jQuery, вот почему это так. Это также красиво и коротко, что делает его более удобным для ввода и чтения, чем два других, хотя я должен сказать, что имя 'fn' сбивает меня с толку.

Что касается jQuery.prototype , то после создания этой ссылки она никогда не упоминается в самом jQuery, поэтому неясно, что она там делает. Зная о наследовании прототипов, вы можете подумать, что он существует, поэтому вы можете использовать jQuery с оператором new, например так:

obj = new jQuery(selector);

но конструктор jQuery () не использует новый объект, который будет создан внутри него, а вместо этого возвращает объект, созданный в другом месте - фактически в jQuery.fn.init (). jQuery.prototype не требуется. Предположительно, он существует для совместимости со сторонними разработчиками, поэтому сторонний код может взаимозаменяемо использовать jQuery.fn и jQuery.prototype.

Что приводит нас к jQuery.fn.init.prototype . Эта ссылка необходима, поскольку она служит прототипом для конструктора jQuery.fn.init (). Именно в этой функции конструктора происходит фактическое создание новых объектов jQuery, и в этом случае они создаются с использованием наследования прототипа, который ссылается на свойство конструктора, называемое «прототип», при создании нового объекта, предоставляя этот новый объект конструктор как ключевое слово this.

Наконец, jQuery.prototype.init.prototype является просто сумасшедшим следствием того, что jQuery.fn и jQuery.prototype ссылаются на одно и то же. Вы бы не использовали его.

Обратите внимание, что следующие 4 выражения все эквивалентны в jQuery, хотя не все они могут быть рекомендованным способом. Все они возвращают новый объект, который использует jQuery.fn в качестве прототипа - фактически все они вызывают jQuery.fn.init () в качестве конструктора. И не забывайте, что вы обычно можете заменить jQuery на $.

jQuery()
new jQuery()
new jQuery.fn.init()
new jQuery.prototype.init()

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

3 голосов
/ 11 ноября 2009

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

Затем во втором фрагменте jQuery.fn задается как расширенная версия самого объекта jQuery, содержащая все фактические методы. Он расширяется с помощью свойства prototype, которое не имеет ничего общего с самим jQuery.

http://mckoss.com/jscript/object.htm на Javascript ООП

Надеюсь, это поможет ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...