tablas - queryselector javascript ejemplos

Javascript volver con dos puntos

Question

Estoy aprendiendo JavaScript y me he encontrado con la siguiente estructura:

var Test = (function () {

  function func1() {
      //do something.....
  }

  function func2() {
      //do something.....
  }

  function func3() {
      //do something.....
  }

  return {
      func1: func1,
      func2: func2,
      func3: func3
  };

})();

Me pregunto qué está haciendo el bloque de retorno. ¿Es esta una estructura JavaScript muy utilizada? Por favor, hágame saber dónde puedo obtener más información sobre esto.

Answer 1

Es un objeto literal en la declaración de devolución. Es como crear un objeto y luego devolverlo:

var obj = {
    func1: func1,
    func2: func2,
    func3: func3
};
return obj;

La sintaxis literal del objeto crea un objeto y establece sus propiedades, como:

var obj = new Object();
obj.func1 = func1;
obj.func2 = func2;
obj.func3 = func3;
return obj;

El propósito de devolver el objeto es revelar las funciones dentro de la función al código externo, mientras se crea un ámbito para las variables privadas que las funciones pueden usar.

Cuando no usa variables privadas, el código hace lo mismo que:

var Test = {
  func1: function() {
      //do something.....
  },
  func2: function() {
      //do something.....
  },
  func3: function() {
      //do something.....
  }
};

Las variables privadas se declaran dentro del alcance de la función, y solo son accesibles por las funciones dentro de él. Ejemplo:

var Test = (function () {

  var name;

  function setName(str) {
    name = str;
  }

  function getName() {
    return name;
  }

  return {
      setName: setName,
      getName: getName
  };

})();

Test.setName("John Doe");
var name = Test.getName();

Answer 2

Eso funciona como una clase en otros lenguajes de programación. Por lo tanto, puede acceder al miembro público func1 usando Test.func1 y llamarlo como una función normal usando Test.func1() .

Answer 3

Este es el patrón del módulo revelador .

El objeto devuelto contiene referencias a las funciones definidas dentro del IIFE. Por lo tanto, las funciones definidas en el interior son privadas para la función anónima.

Pero si quiere usar las funciones internas afuera, puede usar el objeto devuelto.

El valor de la Test será

var Test = {
    func1: func1,
    func2: func2,
    func3: func3
};

Y puedes llamar a func1 desde afuera como

Test.func1();

Esta es la forma en que Javascript emula la clase . Como no hay especificadores de visibilidad que usen el patrón Módulo, las variables / métodos pueden hacerse públicos / privados.

El patrón del módulo revelador está inspirado en el patrón del módulo. Al revelar el patrón del módulo, solo se devuelve una referencia a las variables / métodos privados en un objeto .

La idea principal detrás del patrón es evitar las variables globales malvadas . Esto se parece a IIFE, excepto que se devuelve un objeto en lugar de una función. Las variables / métodos definidos dentro del IIFE son privados de la función. Para acceder a cualquier variable / método dentro del IIFE, se debe agregar en el objeto devuelto y luego se puede acceder desde fuera del IIFE. Este patrón aprovecha los cierres , por lo que las variables / métodos definidos dentro del IIFE son accesibles incluso después de que se devuelve el objeto.

Del libro de Addy Osmani Aprendiendo patrones de diseño de Javascript

El patrón del Módulo Revelador surgió cuando Heilmann estaba frustrado con el hecho de que tenía que repetir el nombre del objeto principal cuando queríamos llamar a un método público desde otro o acceder a variables públicas. Tampoco le gustó el requisito del patrón del Módulo para tener que cambiar a notación literal de objetos por las cosas que deseaba hacer públicas.

El resultado de sus esfuerzos fue un patrón actualizado en el que simplemente definiríamos todas nuestras funciones y variables en el ámbito privado y devolveríamos un objeto anónimo con punteros a la funcionalidad privada que deseábamos revelar como pública.

Ventajas:

1. Encapsulación El código dentro del IIFE está encapsulado del mundo exterior.
2. Código limpio, organizado y reutilizable.
3. Intimidad. Permite crear variables / métodos privados. Las variables / métodos privados no se pueden tocar desde fuera del IIFE.

Desventajas

1. Si una función privada se refiere a una función pública, esa función pública no puede anularse

Otras lecturas:

1. https://en.wikipedia.org/wiki/Module_pattern
2. https://carldanley.com/js-revealing-module-pattern/
3. Cómo usar el patrón del módulo Revealing en JavaScript

EDITAR

Del comment de @Mike

Es de notar que es común crear un objeto (por ejemplo, var me = {}; ) y luego declarar los posibles miembros públicos en él ( me.func1 = function() { /* ... */ }; ) , devolviendo ese objeto al final ( return me; ). Esto evita la repetición que vemos en la declaración de devolución del código de OP (donde se repiten todas las cosas públicas).