Contenido

Haz que tus scripts en Javascript se puedan extender fácilmente

13 Sep

+ 13

Estoy adaptando heySilver para que funcione con jQuery. Actualmente tengo una versión funcional, pero no compatible con las versiones anteriores, es lo único que me falta.

Para conseguir esta compatibilidad, he pensado en como podría hacer que el script se extendiera sin necesidad de cargar el script que actualmente veo bastante compacto y ligero. Y me ha venido a la cabeza la API para plugins de Wordpress.

Tras revisar el código de algunos de los plugins que tengo por aqui he pensado que sería una buena idea implementar algo parecido para heySilver. De esta forma puedo dejar unos lanzadores en puntos estratégicos y añadirles funciones desde código externo al script.

Os pongo un ejemplo:

function miScript(str) {
	do_action("mi-script", str);
	alert("Pasamos do_action: " + str);
}
function cambiaFruta(param) {
	alert("Iniciamos script: " + param)
}
add_action("mi-script", cambiaFruta);

miScript("Melon");

Como vemos en el ejemplo, hemos añadido una línea a nuestra script, do_action(). Y después, hemos añadido la acción fuera del script lo que nos da una mayor flexibilidad y capacidad de extender nuestros scripts.

Veamos la API y las funciones que nos permite hacer esto:

add_action()

add_action(where, action)

Esta función, nos permite añadir funcionalidades que será ejecutadas al pasar por el lanzador definido com where. El parámetro action debe ser una función que puede recibir un parámetro que indicamos en el do_action.

do_action("mi-script", str);
function cambiaFruta(param) {
	alert("Iniciamos script: " + param)
}
add_action("mi-script", cambiaFruta);

remove_action()

remove_action(where, action)

Con esta función podemos eliminar una acción definida previamente. Para ello deberemos informar el lanzador y la función que deseamos eliminar.

function cambiaFruta(param) {
	alert("Iniciamos script: " + param)
}
add_action("mi-script", cambiaFruta); // Añadimos acción
remove_action("mi-script", cambiaFruta); // Eliminamos acción

do_action()

do_action(what, param)

Esta función es la que se encarga de ejecutar el listado de acciones definidas para un lanzador. La función nos devuelve el resultado de la ejecución de la acción.

do_action("mi-script", str);

Veamos el código

Aún tiene un par de fallos que se deberían corregir, pero como idea que creo que vale para extender nuestros scripts.

// Objeto de acciones
var actions = {};

/*
*	add_action()
* 	Añade una acción
*/
function add_action(where, action) {
	if (typeof actions[where] == 'undefined') actions[where] = new Array();
	actions[where].push(action);
}
/*
*	remove_action()
* 	Elimina una acción
*/
function remove_action(where, action) {
	if (typeof actions[where] == 'undefined') return;
	var j = 0;
	while (j < actions[where].length) {
		if (actions[where][j] == action) { actions[where].splice(j, 1);}
		else { j++; }
		}
}
/*
*	do_action()
* 	Ejecuta el listado de acciones previamente definidas
*/
function do_action(what, param) {
		if (typeof actions == 'undefined') return;
		if (typeof actions[what] == 'undefined') return;
		var param = param || {};
		for (var x=0; x<actions[what].length; x++) actions[what][x](param);
}

Bueno, ¿que os parece?

Hola Andres, como sabras no entiendo nada de esto :P
Pero por lo que lei vos sabes mucho, espero que resulte todo bien :)

Un abrazo,
Lucas.

Esta excelente andres, el API de plugins de Wordpress esta muy buena yo hice algo igual para un CMS personal que hice en PHP claro con algunos detalles.

Y este en Javascript te quedo excelente muchas felicidades viejo.

Feliz dia para vos y para todos los programadores que visitan este blog.

Saludos!

Es una buena idea. Yo uso un script en el que básicamente se crea un objeto al que se le pasan dos funciones. Al invocar a una de las funciones siempre se ejecuta la otra pasada como parámetro, ya que el objeto lo que hace es sobreescribir la primera de las funciones.

Hace un tiempo te mandé el script por correo por si lo considerabas interesante. La principal ventaja es que no tienes que poner ningún código en las funciones, es decir, no te haría falta escribir “do_action(”mi-script”, str);”. Gracias a esto puedes sobreescribir funciones de scripts no realizados por ti.

¿Vas a liberarlo cuando lo tengas listo?

@dav: Pues no recuerdo que me lo pasaras, tiene buena pinta podrías pasármelo de nuevo.

Saludos
@elvenbyte: ¿el que? ¿heySilver? Si claro :D

@Wyd: Lucas, ¿como es eso de que no has entendido nada? ¿No ha quedado claro?

Está genial; y espero si puede ser, la publicación del código de @dav, que aparenta muy bueno.

Y una pregunta: ¿Cuál es la diferencia, en concepto, de éstas ‘actions’ con los ‘eventos’? (sí entiendo que con ésto se permite tener eventos personalizados, pero entonces ¿no es mejor usar una api como la de jQuery para manejar todo tipo de eventos -los incluidos en DOM y personalizados?-).

Un saludo. gran blog!

@juan: Revisa el fichero plugin.php de la carpeta wp-includes/ de Wordpress, ahí tienes el código.

Saludos

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.