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

Template a fondo

Hay dos formas estándar de crear contenido en un componente de forma flexible: la etiqueta template, que se considera como uno de los pilares de los Web Components y las template string de Javascript, que son una buena alternativa para generar el Shadow DOM con interpolación de datos.

Light DOM a fondo

El Light DOM es un espacio compartido entre nuestro componente web y el DOM general, que podemos utilizar para insertar contenido o configurar nuestro componente. Es una muy interesante característica que debemos conocer.

Shadow DOM a fondo

Para que los componentes web no colisionen unos con otros es muy útil utilizar el Shadow DOM para aislar el DOM y el CSS de cada componente. Esta característica se puede aplicar también a elementos HTML sin necesidad de utilizar Custom Elements, pero es con estos donde cobra todo su potencial. Demos un repaso profundo a las capacidades del Shadow DOM.

HTMLElement a fondo

HTMLElement es una pieza clave, ya que de él heredan todos los componentes web, pero en muchas ocasiones no conocemos bien sus características. Os invitamos a dar un repaso a fondo a sus capacidades y descubrir cómo sacarle todo el partido en nuestros componentes.