Patrón de prototipo revelador de JavaScript

El patrón de prototipo revelador hace uso de dos de los patrones que ya hemos cubierto. Toma los conceptos tanto del patrón de módulo revelador como del patrón prototipo y combina lo mejor de esos patrones. El resultado es un patrón que ofrece mucho al desarrollador y funciona bien tanto para crear bibliotecas como para código personalizado en un caso de uso particular. El patrón de prototipo revelador proporciona la encapsulación y facilita a los desarrolladores modularizar su código en lugar de tener un montón de funciones esparcidas aleatoriamente sobre un proyecto. Como es el objetivo en JavaScript, esto nos ayuda a sacar variables y funciones del alcance global al hacerlas parte de un contenedor encapsulado. El patrón prototipo revelador también nos permite utilizar o emular los paradigmas de miembros públicos y privados en nuestro código.

---

Estructura general prototipo reveladora

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

var Bike = function () {     // section 1     // all variables get     // defined here };   Bike.prototype = function () {     // section 2     // all functions get     // defined here       return {         // section 3         // return key value pairs         // of functions you would         // like to make public     };      }();

Aquí tenemos el esquema básico del patrón prototipo revelador. El patrón se divide aproximadamente en 3 secciones diferentes como se muestra. En la sección 1, tenemos un Constructor. Dentro del constructor es donde se definen todas las variables para su objeto. Estas asignaciones variables harán uso de la thispalabra clave de forma similar a cómo podría hacerlo con PHP. La Sección 1 puede considerarse como un contenedor de estado de clases.

La sección 2 es donde definiríamos las funciones que queremos utilizar y, como podemos ver, esto es en el prototipo de nuestro objeto. Recuerde que en el patrón del prototipo, en realidad asignamos un objeto literal al prototipo. En el revelador patrón prototipo, ya no lo hacemos de esta manera. En su lugar, asignamos una función al prototipo y luego lo invocamos inmediatamente. Así es como podemos emular el concepto de miembros públicos y privados en JavaScript. Ahora en la sección 2, puede considerar cualquier cosa que se defina como privada.

La Sección 3 es la pieza final del patrón prototipo revelador, y aquí es donde usamos los pares clave / valor dentro de un objeto literal para denotar lo que nos gustaría hacer público. Entonces, si definió 10 funciones en la sección 2, y ahora desea hacer públicas 3 de ellas, simplemente haga referencia a ellas en la sección 3. La clave de cada par clave / valor es el nombre que los llamadores externos del código harán referencia a las funciones por . El valor en estos pares clave / valor es el nombre exacto de la función definida en la sección 2 para la que desea hacer público. Para evitar confusiones, muchas veces tiene sentido simplemente hacer que los pares clave / valor tengan el mismo nombre.

El revelador patrón prototipo hace uso de la newpalabra clave tanto como si desea hacer uso de su objeto definido, tendrá que renovarlo. Esto difiere del patrón de módulo revelador donde todo funciona como un singleton. En este patrón, puede renovar tantas instancias como sea necesario. Sin embargo, los beneficios son que cualquier función definida en la sección 2 está disponible de inmediato para cualquier nueva instancia que cree. Veamos otro ejemplo del patrón prototipo revelador.

---

Revelando el patrón prototipo en acción

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

// Constructor Section 1 // Holds state for each instance var Electricbike = function (color, brand) {     this.color = color;     this.brand = brand; };   Electricbike.prototype = function () {     // Private members Section 2     var engangemotor = function () {             return 1;         },         applythrottle = function (mode) {             if (engangemotor() == 1) {                 return 'Moving forward via ' + mode + ' mode.';             }           },         applybrakes = function (percent) {             return 'Applying brakes at ' + percent + ' percent.';         };       // Return members to make public     // Section 3     return {         applythrottle: applythrottle,         applybrakes: applybrakes     }; }();     bike = new Electricbike('Red ', ' Haibike'); bike.color + bike.brand + bike.applythrottle('Pedal Assist'); bike.applybrakes(50);   anotherbike = new Electricbike('Blue', 'BH Easy Motion'); anotherbike.color + anotherbrand + anotherbike.applythrottle('Throttle Only'); anotherbike.applybrakes(75);

Hacer clic Claro

Nuestro código de ejemplo aquí nos permite crear nuevas instancias de una bicicleta eléctrica. Nuestro constructor contiene información de estado básica sobre cualquier instancia recién creada, como el color y la marca de la bicicleta que estamos utilizando. Nuestra área prototipo define tres funciones. Esos son engagemotor, applythrottley applybrakes. Por defecto, todas estas funciones son privadas . Es importante tener en cuenta que la estructura general del área del prototipo es aquella en la que se asigna una función anónima al prototipo y luego se invoca de inmediato. Ahora en la sección 3, tenemos nuestroreturn, y devolvemos un objeto literal con dos miembros. Recuerde que el nombre de la tecla es cómo hará referencia a la función que desea llamar. El valor es la función real que se llamará. Mantuvimos un mapeo simple uno a uno para evitar confusiones. Tal como está nuestro código, cuando subimos newun objeto, ese objeto solo tendrá acceso a la applythrottlefunción y a la applybrakesfunción. Esas son las dos funciones que hemos hecho públicas al incluirlas en nuestra returndeclaración. La engagemotorfunción permanece privada . Esta es una función encapsulada que existe solo para ayudar a la bicicleta, o instancia, a realizar su trabajo. No es algo que los consumidores del objeto deban tener en cuenta. Así que este es un buen ejemplo básico del patrón de prototipo revelador donde podemos ver el estado que se mantiene en el área del constructor, las funciones que se definen en el área del prototipo y los miembros públicos que se definen en la declaración de devolución.

---

Resumen del patrón de prototipo revelador de JavaScript

En este tutorial, echamos un vistazo al revelador patrón prototipo y aprendimos cómo proporciona otra forma de encapsular variables y funciones similares a los otros patrones que hemos cubierto recientemente. Este patrón proporciona lo mejor del patrón prototipo y el patrón del módulo revelador en un patrón, por lo que es bueno saberlo. Al hacerlo, nos brinda las capacidades de extensión del patrón prototipo junto con la capacidad de emular la programación orientada a objetos clásica a través de miembros públicos o privados como el patrón de módulo revelador o el patrón de módulo.