Continuum

Continuum

Continuum Chile: Agilistas y Desarrolladores Web en Java, Ruby, Rails ..Java, Python, Ruby, Javascript, Ajax, Web 2.0, ESB, SOA…
Continuum

Prototypejs y OO clásico en Javascript.

En javascript la herencia es de tipo prototipo, todos los objetos heredan de Object una propiedad llamada .prototype que es la referencia hacia el super-objeto donde buscar en caso de no encontrar un método o una propiedad en el objeto actual.

La librería «prototypejs» fue un poco más allá y le agregó a javascript sintaxis para simular herencia clásica, donde puedes definir clases con constructores, propiedades y métodos comunes a sus instancias, y heredar de estas usando una forma que si bien no se parece a ningún lenguaje que conozca simula la orientación a objetos clásica de lenguajes como Java, Ruby o Python, aunque de estos es a Ruby al que más se me parece por el método constructor “initialize”.

Yo lo he estado usando en un proyecto personal. Aquí va un fragmento de código que muestra como se usa el Class.create para generar los modelos de clases:

    model.actions.Action = Class.create({
        initialize: function(_object) {
          this.id = _object.id;
          this.target = _object.target;
          this.start_time = _object.start_time || 0;
          this.end_time = _object.end_time || 0.1;
          this.range = _object.range || true;
        },
        to_json: function() {
          return Object.toJSON(this);
        },
        render_to: function(element) {
          ...
          if (this.render_action && typeof this.render_action == 'function') {
            ...
          }
          ...
        },
    });

    model.actions.Walk = Class.create(model.actions.Action, {
      initialize: function($super, _object) {
        $super(_object);
        this.steps = _object.steps || 1;
        this.name = "walks";
        this.class_name = "Walk";
      },
      load_from_obj: function($super, _object) {
        return new model.actions.Walk(_object)
      },
      render_function: function() {
          ...
      },
      display: function() {
        return this.target + " " + this.name + " " + this.steps + " steps";
      }
    });

Luego es posible crear instancias que responden a estos modelos y permiten usar polimorfismo o delegación en forma natural, sin tener que preocuparnos por usar la propiedad .prototype o constructores de tipo función para simular estos comportamientos, por ejemplo:

      var w = new model.actions.Walk({
          id: "uyu121uyi1287312",
          target: "Panfilo",
          start_time: 0,
          end_time: 7.2,
          steps: 3
      })
      w.render_to(_$('#dv-actions-content'));

Nota: Para los que usan jQuery, hay conflictos entre ambas librerías por el uso del alias $, la solución es usar el método jQuery.noConflict() que libera el alias $ para su uso por cualquier otra librería. Otro detalle es que prototypejs debe ser cargado antes que jQuery en el body del HTML.

Video: El estado y el futuro de Javascript [Douglas Crockford]

El arquitecto JavaScript de Yahoo Douglas Crockford discute los recientes procesos y esfuerzos de ECMA5 para mejorar el lenguaje en el futuro no distante.

$(‘#id’).onInterval(); Nuevo plugin JQuery v0.1 en beta.

Un nuevo plugin para el stack, lo comparto por acá aunque fue escrito hoy día así es que está en Beta, no ha sido probado exigentemente aún.

Sirve para ejecutar una función de callback pasado un intervalo de tiempo en milisegundos sobre un evento que se defina en un elemento.

“Puede ser usado o modificado a voluntad.”

Can be used to execute any callback function on an event after some interval in milliseconds.

(Lo coloque en español e ingles [my so so english :p ]) para que después de indexada en google, búsquedas en español o ingles llegen al post.

Fuente:

Update (02-04-2009): aquí (http://downloads.continuum.cl/downloads/projects/jquery-plugins/oninterval.jquery.js) está el código fuente.

Opciones:

Las opciones que pueden ser pasadas como objeto literal de javascript son:

  1. event. El evento en la forma jQuery. blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error. Solo ha sido probado con los eventos ‘change’ y ‘keyup’.
  2. interval. El intervalo en milisegundos que demorará la ejecución de la función de callback pasada.
  3. callback: Función que será invocada cuando pase le intervalo de tiempo. A la función le es pasada como argumento el valor del elemento (val() de jQuery) y el objeto evento del DOM. En una versión inicial se pasaba como primer elemento el objeto jQuery que representa el elemento al que se le ejecuta el evento, pero por una razón de fuerza mayor (que solo explicaré si me lo piden porque es extensa) tuve que dejar de hacerlo pasando el valor, no obstante se puede acceder al objeto jQuery en la función de callback.
  4. doNotExecOnRegexp. Expresión reglar que sera testeada contra el valor del elemento, si el test retorna true la funcion de callback no será invocada.
  5. onlyExecOnRegexp: Lo contrario a lo anterior, expresión regular contra la que se testea el valor, solo si el test retorna true entonces, se ejecuta la función de callback.
  6. charNum: Update (02-04-2009). Número de caracteres que deben digitarse antes de gatillar la funcion de callback. Valor default (1).

Nota: Si se especifican las dos expresiones regulares, se hacen ambos chequos, si alguno da false no se ejecuta la función de callback.

Ejemplo del uso:

En cuanto tenga un tiempo escribiré alguna página con ejemplos, por ahora solo la forma de uso.

En este caso se trata de un input text, en el que cuando se escribe texto y se deja de escribir por 2 segundos, se ejecuta la función de callback que en el ejemplo solo escribe en la consola del firebug, pero que puede ejecutar un request Ajax para hacer búsqueda, o lo que se les ocurra. Si el texto del input es ‘Ingrese el nombre’, o se escriben menos de 4 caracteres entonces no se ejecuta la función.

$('#filtro-nombre').onInterval({
    event: 'keyup',
    interval: 2000,
    charNum: 4,
    callback: function (value, ev) {
        console.log(value);
        // do some Ajax here...
    },
    doNotExecOnRegexp: /^Ingrese el nombre$/
});

Nota: No ha sido probado aún para Internet Explorer.

« Entradas Anteriores Entradas Siguientes »

 
Copyright © 2012 Continuum Ltda. Coronel Pereira 72. Oficina 903. Las Condes. Santiago. Chile
Tel: +56 2 9341951