Qual è il significato di questa definizione di funzione?

Question

capisco come definire le funzioni in questo modo:

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

Ma non questa:

<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> 

Quanto sopra

è una parte di una libreria che sto utilizzando, ma semplicemente non può capire la $.fn.idle bit.

Cosa sta facendo? Sta definendo una funzione chiamata 'idle', in qualche modo, ma per quanto riguarda lo $.fn? E la parte (function ($) {? Ancora una volta, capisco $(document).ready(function() { ma (function ($) { è completamente alieno. È una mano corta?

E qual è il significato dello (jQuery)); nella parte inferiore?

Answer 1

Un immediately invoked function expression che alias jQuery alla $ all'interno del suo campo di applicazione:

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

crea ed esegue immediatamente una funzione. In questo modo è possibile utilizzare $ all'interno della funzione per fare riferimento a jQuery indipendentemente dal riferimento a $ globale. Utile per le pagine che utilizzano jQuery.noConflict(). Anche le variabili dichiarate all'interno di IIFE non perdono per lo scopo globale.

---

Come per l'altra parte della domanda, $.fn === jQuery.prototype. Quindi, aggiungendo un metodo al prototipo jQuery, puoi chiamarlo su qualsiasi oggetto jQuery. Es .:

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

Ulteriori informazioni su jQuery plugin authoring.

Answer 2

Questo è noto come IIFE - Espressione funzione immediatamente richiamata.

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

jQuery viene importato al corpo funzione $, e la funzione viene eseguito immediatamente.

// inside stuff 

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

$.fn è equivalente a jQuery.fn e jQuery.fn.idle è semplicemente una proprietà su jQuery.fn che punta a una funzione.

Un altro punto interessante, è che jQuery.fn è un alias per jQuery.prototype, vale a dire che sono la stessa cosa.

Un sacco di alias qui rende il codice un po 'più complicato di quanto non sia in realtà.

Questa è una struttura comune che si vedrà per l'aggiunta di plug-in/mix in una libreria.

Spero, l'ho tagliato per bene.

Answer 3

L'aggiunta di funzioni a $.fn li rende disponibili per l'uso su oggetti jQuery.

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

Answer 4

questo è l'assegnazione di una funzione a una variabile:

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

Una funzione assegnata a una variabile è anche chiamato un 'funzione anonima' perché non ha un nome, si è spesso usato per passare una funzione come parametro ad un'altra funzione.

In javascript, una variabile può iniziare con un $ e utilizzato da jQuery. jQuery è un oggetto, che ha proprietà, una delle quali è chiamata fn. questa proprietà può anche avere proprietà, in questo caso idle.

così $.fn.idle = function() {}; si riduce a questo:

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

Questo è indicato anche come 'namespacing' anche se questo può avere altre sfumature pure. anche essere consapevoli del fatto che la si può assegnare solo oggetti da oggetti esistenti:

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