В чем смысл определения этой функции?

Я понимаю, как определить такие функции:

function myfunc(x,y,z) {
   alert("Just an example " + x + y + z)
}

Но не это:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>
        (function ($) {
        $.fn.idle = function (x, y, z) {
            alert("Just an example " + x + y + z)
    }(jQuery));
    </script>

Вышеприведенная часть является частью библиотеки, которую я использую, но я просто не понимаю бит $.fn.idle.

Что он делает? Он определяет функцию, называемую "idle", каким-то образом, но как насчет $.fn? А как насчет части (function ($) {? Опять же, я понимаю $(document).ready(function() {, но (function ($) { совершенно чуждо. Это короткая рука?

И каково значение (jQuery)); внизу?

Ответы

Ответ 1

An сразу вызывается выражение функции, которое сглаживает jQuery до $ внутри своей области:

(function($) {}(jQuery));

Он создает и выполняет функцию немедленно. Таким образом, вы можете использовать $ внутри функции для ссылки на jQuery независимо от того, к чему относится глобальная ссылка $. Полезно для страниц с использованием jQuery.noConflict(). Также переменные, объявленные внутри этого IIFE, не попадают в глобальную область.

Что касается другой части вопроса, $.fn === jQuery.prototype. Поэтому, добавив метод в прототип jQuery, вы можете вызвать его на любом объекте jQuery. Например:.

$.fn.doSomething = function(){}; //add a method to the jQuery prototype
$('selector').doSomething(); //then you may call it on any jQuery object

Подробнее о jQuery для создания плагинов.

Ответ 2

Это называется выражением IIFE - вызывается с немедленным вызовом.

(function ($) {
    // inside stuff
}(jQuery));

jQuery импортируется в тело функции как $, и функция запускается немедленно.

// inside stuff

$.fn.idle = function (x, y, z) {
    alert("Just an example " + x + y + z)
} // added in missing parentheses

$.fn эквивалентен jQuery.fn, а jQuery.fn.idle - просто свойство на jQuery.fn, которое указывает на функцию.

Еще один интересный момент: jQuery.fn является псевдонимом для jQuery.prototype, т.е. они - одно и то же.

Много псевдонимов здесь делает код немного сложнее, чем на самом деле.

Это общая структура, которую вы увидите для добавления плагинов/микшинов в библиотеку.

Надеюсь, я хорошо это сделал для вас.

Ответ 3

Добавление функций в $.fn делает их доступными для использования в объектах jQuery.

$.fn.alertTitle = function() { alert( $(this).attr('title') ); };
$('#foo').alertTitle();

Ответ 4

это назначает функцию переменной:

var test = function () { alert('testing'); }
test(); // will alert testing

Функция, назначенная переменной, также называется "анонимной функцией", поскольку она не имеет имени, часто используется для передачи функции в качестве параметра другой функции.

В javascript переменная может начинаться с $, и это используется jQuery. jQuery - это объект, который имеет свойства, один из которых называется fn. это свойство также может иметь свойства, в данном случае idle.

поэтому $.fn.idle = function () {}; сводится к следующему:

$ = {
    fn: {
        idle: function () {}
    }
};

Это также называется "пространством имен", хотя это может иметь и другие нюансы. Также имейте в виду, что вы можете назначать свойства только существующим объектам:

var myVar = {};
myVar.test.foo = {}; // results in error because myVar.test is undefined
myVar.test = {
    foo: {}
}; // this is correct