Cómo escribir el complemento jquery
Generalmente hay tres formas de desarrollar complementos de jquery:
Extender jQuery a través de $.extend()
Usar $ .fn a jQuery agrega nuevos métodos
Crear aplicando la fábrica de widgets de jQuery UI a través de $.widget()
El primer $.extend() es relativamente simple y rara vez es independiente. El widget () se crea utilizando la fábrica de widgets de jQuery UI.
El primer $.extend() es relativamente simple y, en general, es raro desarrollar complementos complejos de forma independiente. El tercero es un modo de desarrollo avanzado. , que no se trata en este artículo. El segundo método se utiliza generalmente para desarrollar complementos. Este artículo se centra en el segundo método.
Desarrollo de complementos
El segundo método de desarrollo de complementos generalmente se define de la siguiente manera
$.fn.pluginName = function() {
/ /tu código aquí
}
En el desarrollo de complementos, generalmente utilizamos la forma de pensar orientada a objetos
Por ejemplo, definir un objeto
definir un objeto
Utilizamos el pensamiento orientado a objetos. >Por ejemplo, defina un objeto
var Haorooms= function(el, opt) {
this.$element = el,
this.defaults = {
'color': 'rojo',
'fontSize'.'12px',
'textDecoration': 'ninguno'
},
this.options = $.extend({}, this.defaults, opt)
}
//Definir los métodos de haorooms < / p>
haorooms.prototype = {
changecss: function() {
return this.$element.css({
'color' : this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
El {} en $.extend({}, this.defaults, opt) se usa principalmente para crear un nuevo objeto y conservarlo. el objeto el valor predeterminado.
$.fn.myPlugin = function(options) {
//Crear entidad haorooms
var haorooms= new Haorooms(this, options);
p>
// Llama a su método
return Haorooms.changecss();
}
El método para llamar a este complemento -in es el siguiente
$(function()){
$('a').myPlugin({
'color': '#2C9929 ',
'fontSize': '20px'
});
})
Problemas con el método de desarrollo anterior
El método de desarrollo anterior tiene un problema grave: define Haorooms globalmente, lo que va en detrimento de la compatibilidad de los complementos y todos los demás aspectos. Si usas Haorooms en otro lugar, ¡tu código será terrible! Ahora, si envolvemos el código anterior con una función anónima autollamada (a veces llamada alcance de bloque o alcance privado), ¡este problema no ocurrirá! Lo mismo ocurre con el desarrollo de complementos js. Si utilizamos funciones anónimas de autollamada para encapsular el código que escribimos, ¡no habrá ningún problema! El método de encapsulación es el siguiente:
(function(){
})()
Simplemente encapsúlelo usando el método anterior.
Pero hay otro problema. Cuando estudiamos el código de Daniel, a menudo vemos ";" al frente.
Por ejemplo, definamos una función aleatoria:
var haoroomsblog=function(){
}
(function() {
})()
Debido a haoroomsblog, no hay punto y coma al final de la función, lo que provoca errores de código. Para evitar esta situación, generalmente es así. escrito así!
;(function(){
})()
Envuelva el código de su complemento en el código anterior y tendrá un complemento simple. (Tenga en cuenta que esto es cierto tanto para los complementos js como para los complementos jquery)
Una pregunta más
Envuelva su complemento
;(function(){
})()
Básicamente, se podría decir que es perfecto. Sin embargo, para que el complemento que desarrolle tenga una gama más amplia de aplicaciones y una mejor compatibilidad, también debe tener en cuenta algunas prácticas especiales de las personas que utilizan el complemento, por ejemplo, para evitar conflictos entre jquery. y zeptojs, algunos amigos cambiaron el prefijo de jquery a "$", lo cambiaron a "jQuery" y algunos amigos cambiaron el documento predeterminado y otros métodos. Para mantener el complemento en funcionamiento mientras se solucionan estos problemas, lo que hacemos es ajustar el código a lo siguiente:
;(function($,window,document,undefinido){
p >
//Nuestro código.
})(jQuery, ventana, documento);
¡Esto puede evitar algunos de los problemas anteriores!
¡En este punto, el complemento que desarrollaste es perfecto!