Cómo empaquetar el complemento jquery
Introducción
Jquery es casi indispensable para el desarrollo web hoy en día. Incluso en la versión 2010, los maestros comenzarán a incorporar Jquery y ui en proyectos web. En cuanto a los beneficios de usar jquery, no entraré en detalles aquí, todos los que lo han usado lo saben. Hoy discutiremos el mecanismo de complemento de jquery. Hay miles de complementos de terceros para jquery. A veces escribimos una función independiente y queremos combinarla con jquery. Podemos usar la llamada en cadena de jquery. extendiendo jquery y escribiéndolo en forma de complemento. Por ejemplo, la siguiente es una demostración simple de cómo extender el objeto Jquery:
//sample:Extiende los métodos del objeto jquery, negrita( ) para fuentes en negrita.
(function ($) {
$.fn.extend({ "bold": function () { ///
/ / Fuente en negrita
//
return this.css({ fontWeight: "bold" });
}
});
})(jQuery);
Cómo llamar:
Esta es una extensión muy simple. Analicemos el código anterior paso a paso.
1. Mecanismo de complementos de jquery
Para facilitar la creación de complementos, jquery proporciona los métodos jQuery.extend() y jQuery.fn.extend().
1. El método jQuery.extend() tiene una sobrecarga.
Un parámetro de jQuery.extend(object) se utiliza para extender la clase jQuery en sí, es decir, para agregar nuevas funciones a la clase/espacio de nombres jQuery, o para llamar a métodos estáticos, como los integrados de jQuery. en el método ajax se llama usando jQuery.ajax(), que es un poco como ajax(), un poco como una llamada a un método estático de "nombre de clase. nombre de método". Escribamos también un ejemplo de jQuery.extend(object):
// Extiende el propio objeto jQuery jQuery.extend({ "minValue": function (a, b) { ///
// Compara dos valores y devuelve minValue
//
devuelve a < b ?a : b;
}, "maxValue": function (a, b) { ///
// Compara dos valores y devuelve el valor máximo
//< /summary>
return a > b ?maxValue(i, j); // max_v es igual a 101
Versión sobrecargada: jQuery.extend([deep] , destino, objeto1, ? [objetoN])
Extiende un objeto con uno o más objetos, devolviendo el objeto extendido.
Si no se especifica ningún destino, se utilizará el objeto extendido. el espacio de nombres de jQuery ayuda a los autores de complementos a agregar nuevos métodos a jQuery.
Si el primer parámetro se establece en "verdadero", jQuery devuelve una copia profunda, copiando recursivamente cualquier objeto encontrado y los objetos primitivos. .
Las propiedades no definidas no se copian, pero sí las propiedades heredadas del prototipo del objeto.
Parámetros
profundo:? Si se establece en verdadero, se producirá una fusión recursiva.
objetivo:?El objeto a modificar.
objeto1:? El objeto que se fusionará con el primer objeto.
objetoN:? El objeto que se fusionará con el primer objeto.
Ejemplo 1:
Fusionar configuraciones y opciones, modificar y devolver configuraciones.
var settings = { validar: falso, límite: 5, nombre: "foo" };?
var opciones = { validar: verdadero, nombre: "bar" };?
jQuery.extend(settings, options);
Resultado:
settings == { validar: verdadero, límite: 5, nombre: "barra" }
Ejemplo 2:
Fusionar valores y opciones predeterminados, pero no modificar los valores predeterminados.
var defaults = { validar: falso, límite: 5, nombre: "foo" };?
var opciones = { validar: verdadero, nombre: "bar" };?
var settings = jQuery.extend(empty, defaults, options);
Resultado:
settings == { validar: verdadero, límite: 5, nombre : "bar" }?
empty == { validar: verdadero, límite: 5, nombre: "bar" }
Al escribir complementos, generalmente usamos este método sobrecargado para anular los parámetros predeterminados del complemento con parámetros de complemento personalizados.
jQuery.fn.extend(object) extiende el conjunto de elementos jQuery para proporcionar nuevos métodos (comúnmente utilizados para crear complementos).
Primero echemos un vistazo a qué es fn. Esto es fácil de ver mirando el código jQuery.
jQuery.fn = jQuery.prototype = {
init: función( selector, contexto ) {.....}
}; p>
Resulta que jQuery.fn = jQuery.prototype es el prototipo del objeto jQuery. Entonces el método jQuery.fn.extend() es un método que extiende el prototipo del objeto jQuery. Sabemos que extender un método en un prototipo equivale a agregar un "método miembro" a un objeto, y el "método miembro" de una clase solo puede ser llamado por objetos de esa clase, por lo que jQuery.fn.extend(object) extends El método puede ser utilizado por instancias de la clase jQuery, y las instancias de la clase jQuery pueden usar jQuery.fn.extend (objeto). Se deben distinguir el método jQuery.fn.extend(object) y el método jQuery.extend(object).
II. Funciones/cierres anónimos autoejecutables
1. ¿Qué es una función anónima autoejecutable?
Es una función como esta: (función {// código})();
2. Pregunta por qué (función {// código})(); while function {// code}(); ¿algo saldrá mal?
3. Análisis
(1). Primero, debes comprender la diferencia entre los dos: (función {//código}) es una expresión y función {//código} es una declaración de función.
(2). En segundo lugar, js tiene una función de "precompilación": js interpreta las declaraciones de funciones en la etapa de "precompilación", pero ignora las expresiones.
(3). Cuando js se ejecuta en function() {//code}();, dado que function() {//code} se ha interpretado en la etapa de "precompilación", js se omitirá. function() {//code} e intenta ejecutar ();, por lo que se informará un error;
Cuando js ejecuta la función {//code})();, se informará un error;
p>
Cuando js ejecuta la función {//code}();, informará un error;
Cuando js ejecuta la función {//code}( );, informará un error;
Esta es una característica de js: js interpretará declaraciones pero ignorará expresiones.
En la función {// code})();, dado que (function {// code}) es una expresión, js intentará resolver la expresión para obtener el valor de retorno, y dado que el retorno El valor es una función, por lo que cuando se encuentra (); la función se ejecutará.
Además, convertir una función en una expresión no depende necesariamente del operador de agrupación (), también podemos usar el operador void, operador ~, !.
Por ejemplo:
El complemento en el marco de arranque está escrito como:
!function($){
/ /hacer algo;
}(jQuery);
y
(función($){
//hacer algo;
})(jQuery); es lo mismo.
Los usos más importantes de las funciones anónimas son crear cierres (que es una de las características del lenguaje JavaScript) y crear espacios de nombres para minimizar el uso de variables globales.
Por ejemplo:
var a=1;
(función()(){
var a=100;
})();
alert(a); //popup 1
Para obtener más cierres y funciones anónimas, consulte "Funciones anónimas y funciones automáticas en Artículo Javascript "Función de ejecución".
3. Empaquete gradualmente el complemento JQuery
A continuación, escribimos un complemento jqury resaltado
1 Configure un área de cierre para evitar el complemento. en "contaminación"
//Espacio de nombres calificado para cierre (función ($) {
}) (window.jQuery);
2. jQuery.fn.extend(object) extiende el método jquery para crear complementos
// Cierra el espacio de nombres calificado (función ($) {
$ .fn.extend({ "highLight":function(options){ // hacer algo }
});
})(window.jQuery);
3. Proporcione los parámetros predeterminados del complemento para implementar la función del complemento
// Espacio de nombres calificado para cierre (función ($) {
$.fn .extend({ " highLight": function (options) { var opts = $.extend({}, defaluts, options); //Utilice jQuery.extend para anular los parámetros predeterminados del complemento
this.each (función () { ?//este aquí está el objeto jQuery
//Al llamar a highLight(), el complemento es una colección, atraviesa todos los dom que se resaltarán.
var $this = $(this); //obtiene el objeto jQuery para el dom actual, donde este es el dom del bucle actual
/// Establece el estilo del dom según los parámetros
$this.css({
backgroundColor: opts. fondo,
color: opts. recepción
});
});
}
});
}); //Parámetros predeterminados
var defaluts = {
primer plano: 'rojo',