En jQuery, he visto tanto en las siguientes formas de definir una función jQuery:
$.fn.CustomAlert = function() {
alert('boo!');
};
$.CustomAlert = function() {
alert('boo!');
};
entiendo que están unidos al objeto jQuery (o $), pero ¿cuál es la diferencia entre los dos? ¿Cuándo debería usar uno u otro?
Gracias.
Estoy seguro de que esta pregunta se ha hecho varias veces antes, pero no puedo encontrar el enlace.
$.fn apunta al jQuery.prototype. Cualquier método o propiedad que agregue estará disponible para todas las instancias de los objetos envueltos jQuery.
$.something agrega una propiedad o función al objeto jQuery.
Utilice el primer formulario $.fn.something cuando se trata de elementos DOM en la página, y su complemento hace algo con los elementos. Cuando el complemento no tiene nada que ver con los elementos DOM, use el otro formulario $.something.
Por ejemplo, si has tenido una función de registro, que no tiene mucho sentido para usarlo con elementos DOM como en:
$("p > span").log();
Para este caso, usted sólo tiene que añadir el método de registro para el objeto jQuery vacación por sí misma:
jQuery.log = function(message) {
// log somewhere
};
$.log("much better");
Sin embargo, cuando se trata de elementos, que se quiere utilizar la otra forma. Por ejemplo, si tiene un complemento de gráficos (plotGraph) que toma datos de <table> y genera un gráfico, usted usaría el formulario $.fn.*.
$.fn.plotGraph = function() {
// read the table data and generate a graph
};
$("#someTable").plotGraph();
En una nota relacionada, supongamos que tiene un plugin que podría ser utilizado ya sea con elementos o independiente, y que desea acceder a él como $.myPlugin o $("<selector>").myPlugin(), se puede reutilizar la misma función para ambos.
Digamos que queremos una alerta personalizada donde la fecha se antepone a cada mensaje de alerta. Cuando se utiliza como una función independiente, le pasamos el mensaje como un argumento, y cuando se utiliza con los elementos, se utiliza el text del elemento como el mensaje:
(function($) {
function myAlert(message) {
alert(new Date().toUTCString() + " - " + message);
}
$.myAlert = myAlert;
$.fn.myAlert = function() {
return this.each(function() {
myAlert($(this).text());
});
};
})(jQuery);
Está envuelto en una función de aplicación directa por lo Myalert no se extiende al alcance global. Este es un ejemplo o una funcionalidad de reutilización entre ambos formularios de complemento.
Como se mencionó anteriormente, es una buena práctica devolver el elemento envuelto jQuery ya que no se desea interrumpir el encadenamiento.
Por último, me encontré con preguntas similares :-)
Un
$.a = function() {
return "hello world";
};
alert($.a());
B
$.fn.b = function() {
return "hello " + $(this).length + " elements";
}
alert($("p").b());
Aprender el desarrollo plugin de jQuery, hay que saber acerca de la función global. jQuery tiene capacidades incorporadas a través de la función que hemos estado llamando función global. Estos son métodos de jQuery, pero son funciones dentro de un espacio de nombres jQuery.
Para agregar una función para el espacio de nombres de jQuery, sólo tiene que añadir nueva función como propiedad del objeto jQuery:
jQuery.globalFunction = function() {
alert('Hi.. just test');
};
Para usarlo, podemos escribir:
jQuery.globalFunction();
O
$.globalFunction();
La adición de métodos instand es similar, pero en su lugar ampliamos el objeto jQuery.fn.
jQuery.fn.myMethod = function() {
alert('Hello...!');
}
Podemos llamar a este nuevo método usando cualquier expresión selector de
$('div').myMethod();
Para una explicación completa por favor refiérase a This Link
Tenía una mirada antes de hacer la pregunta y no pudimos encontrar nada tampoco. – Russell
Prácticamente, ¿cuándo usarías uno u otro? – Russell
Eso tiene sentido, muchas gracias. :) – Russell