Seleccionar página

classes

por Javier Vélez Reyes

En general creo que buscar encapsulación en vez de protección de información en JavaScript es un error importante. Pero este debate prefiero moverlo a otro post que en el hablaré lo que yo llamo Efecto ornitorrinco.

Al respecto a la encapsulación en las clases de ES6 varias puntualizaciones.

1. En general JavaScript no persigue dar soporte a la encapsulación. Es cierto que dentro del modelo de introspección proporciona mecanismos para definir propiedades no enumerables o de solo lectura pero en general tanto estas como a las capacidades de congelación y prevención que operan a nivel de objetos se entienden como un antipatrón. Esto está alineado con la concepción de los lenguajes dinámicos que priman flexibilidad ante seguridad entendiendo que se opera sobre el principio de protección de la información.

2. La existencia de métodos get/set incluida en ES5 no tiene como propósito definir modelos de encapsulación sino poder incluir lógicas de tratamiento para la gestión del acceso a propiedades en modo de lectura o escritura. En concreto get permite incluir lógica para decorar un acceso a dato o implementar un atributo derivado mientras que set permite inyectar lógica de protección semántica ante operaciones de escritura. Sin embargo el soporte se preveé que se desarrolle sobre atributos «públicos» (dicho en cultura Java).

3. Existen varias maneras de simular encapsulación en JavaScript. Como reconoce Alex Fernández (@pinchito), las clausuras son la forma más natural dada la pragmática de uso del lenguaje. Si bien no son de aplicación en todo contexto arquitectónico. Por ejemplo en Polymer se hace imposible articular encapsulación vía clausura ya que, por construcción arquitectónica, el framework eleva las variables de retención léxica al nivel de prototipo convirtiéndolas en atributos de clase (las variables estáticas en cultura Java). Para salvar esta problemática en general se reconocen dos alternativas clásicas que entroncan con actividades de metaprogramación.

A. Creas un único objeto _data (definido privadamente si quieres) y recontextualizas para cada método publico del objeto, el this para que apunte al objeto _data (por medio del uso de bind por ejemplo). De esta manera, _data contendrá una representación privada de todo tu estado interno:

function hide (obj) {
   var ctx = {};
   var out = {};
   Object.keys(obj).forEach (function (k) {
     if (typeof (obj[k]) === 'function') {
          mp.copy (out, obj, k);
          mp.bind (out, k, ctx);
     }
     else mp.copy (ctx, obj, k);
   });
   return out;
}

B. La segunda variante consiste en hacer eso mismo pero generando un proxy por delante. Copias los métodos públicos del objeto que quieras proteger en otro objeto inicialmente vacío contextualizando sus this para que apunte al método delegado. Después entregas al cliente sólo el objeto de proxy que contiene solo la interfaz pública del objeto:

function proxify (obj) {
   var out = {};
   Object.keys(obj).forEach (function (k) {
     if (typeof (obj[k]) === 'function')
         mp.forward (out, obj, k);    
   });
   return out;
}

Donde los métodos copy, bind & forward son autodescriptivos. Los copio a continuación aunque pueden verse en Github:

mp = {};
mp.bind = function bind (core, key, ctx) {

    if (typeof (core[key]) === 'function')
        core[key] = core[key].bind(ctx);
    return core;
    
};
mp.copy = function copy (core, ext, key) {

    if (key in ext)
        mp.add (core, key, ext[key]);
    return core;

};
mp.add = function add (core, key, value) {

    core[key] = value;
    return core;
    
};
mp.forward = function forward (core, ext, key) {
    
    return mp.outerDelegate (core, ext, key, ext);
    
};
mp.outerDelegate = function outerDelegate (core, ext, key, ctx) {
    
    var context = ctx || ext;
    core[key] = function () {
        var args = [].slice.call (arguments);
        var out  = ext[key].apply (context, args);
        return out === ext ? this : out;
    };
    return core;
    
};

Ambos códigos operan en ES5. De la segunda técnica se puede hacer una implementación equivalente en ES6 utilizando la propuesta de objetos Proxy. Estas y otras técnicas de programación las cuento en mi charla de metaprogramación:

Diapositivas en slideshare

Contenido en Github

JavierVelezJavier Vélez Reyes
Ph. D. Computer Science
@javiervelezreye

Novedades

Web Components: pasado, presente y futuro

Web Components: pasado, presente y futuro

Los Web Components aparecieron en el panorama de desarrollo hace ya bastante tiempo. Desde su presentación se les ha prestado mucha atención, pero lo cierto es que no han sido acogidos de forma generalizada, quizás por la difusión de nuevos y potentes frameworks. Nos preguntamos qué ha pasado con este estándar y, sobre todo, que puede pasar de aquí en adelante con el uso práctico de los componentes web.

Adaptar un componente web para Microsoft Edge

Adaptar un componente web para Microsoft Edge

Si quieres que tus componentes web funcionen sin problemas en Microsoft Edge, es conveniente que conozcas algunas de sus carencias y cómo resolverlas. Edge tiene soporte nativo a algunas de las características clave de los web component, pero hay que utilizar polyfill en otras y hay que tener en cuenta algunas limitaciones. Próximamente Edge utilizará Chromium como base de su desarrollo, pero de momento, es necesario aplicar estas soluciones.

12 pasos para construir un componente web

12 pasos para construir un componente web

Para conocer cómo se desarrolla realmente un componente web no puedes perderte esta descripción paso a paso de la construcción de un componente real y de cierta complejidad. Podrás descubrir cómo, sólo utilizando el estándar, se pueden hacer cosas muy interesantes y completas.

¿Qué pasa con import y los web components?

¿Qué pasa con import y los web components?

Uno de los más controvertidos pilares de los componentes web ha sido el HTML Import. Considerado en estos momentos como una funcionalidad discontinuada, debemos conocer como sacar el máximo partido la instrucción import de Javascipt para gestionar la carga de nuestros componentes.