Почему эти функции JavaScript не определены?

Question

Я пытаюсь понять вывод this jsFiddle.

Я загружаю пользовательский интерфейс jQuery через Google's CDN, используя опцию «Внешние ресурсы» слева.

Некоторые вещи озадачивают меня ...

• JQuery UI частично работы. Я могу перетащить div «перетащить меня».

  Так jQuery UI .draggable() (docs) является хорошим.

  С другой стороны, .button() (docs) не применяется к теме jQuery UI CSS.

  Зачем нужен .draggable(), но не .button()? (Синтаксическая ошибка?)

• Как можно draggable быть undefined?

  Он работает, поэтому он должен быть функцией, верно?

• 0 Как есть click be undefined?

  click() is from jQuery, а $ - это функция. Разве не было бы click?

Вот JS ...

(function() { 

    $(document).ready(function() { 

    $('.dr').draggable(); 

    $('.btn').button(); 

    $('.btn').click(function(event) { 
     alert('Clicked'); 
    }); 

    $('.output').append('typeof $: ' + typeof $ + '<br />'); 

    $('.output').append('typeof draggable: ' + typeof draggable + '<br />'); 

    $('.output').append('typeof click: ' + typeof click + '<br />'); 

    $('.output').append('typeof button: ' + typeof button + '<br />'); 

    }); 

}()); 

Выход я получаю ...

typeof $: function // As expected. 
typeof draggable: undefined // How can it be undefined and still work? 
typeof click: undefined // ??? 
typeof button: undefined 

Answer 1

Функции, используемые выше, являются $().draggable, $().click и $().button, не draggable, click и button, которые в этой области видимости, в конечном итоге ищет window.draggable, window.click и window.button.

Другой способ получения типа $().draggable, $().click и $().button через $.prototype, который обычно с псевдонимом $.fn. Итак:

$().draggable, $().click и $().button или $.prototype.draggable, $.prototype.click и $.prototype.button или $.fn.draggable, $.fn.click и $.fn.button одинаковы.И они отличаются от draggable, click и button, которые в вашей функции аналогичны window.draggable, window.click и window.button.

Answer 2

Это потому, что вы не связывая тем ни к чему, так это заканчивается, глядя на window.

Вы должны смотреть $.fn.

Answer 3

Функции отличаются от методов. draggable не равно $('.dr').draggable и т. Д.