En Javascript hay algunas técnicas claramente destacadas para crear y administrar clases / espacios de nombres en javascript.
Tengo curiosidad por saber qué situaciones justifican el uso de una técnica frente a la otra. Quiero elegir uno y seguir adelante.
Escribo código empresarial que se mantiene y se comparte entre varios equipos, y quiero saber cuál es la mejor práctica al escribir JavaScript mantenible.
Tiendo a preferir las funciones anónimas de ejecución automática, sin embargo, tengo curiosidad por saber qué vota la comunidad sobre estas técnicas.
Prototipo :
function obj()
{
}
obj.prototype.test = function() { alert('Hello?'); };
var obj2 = new obj();
obj2.test();
Función anónima de cierre automático:
//Self-Executing Anonymous Function
(function( skillet, $, undefined ) {
//Private Property
var isHot = true;
//Public Property
skillet.ingredient = "Bacon Strips";
//Public Method
skillet.fry = function() {
var oliveOil;
addItem( "\t\n Butter \n\t" );
addItem( oliveOil );
console.log( "Frying " + skillet.ingredient );
};
//Private Method
function addItem( item ) {
if ( item !== undefined ) {
console.log( "Adding " + $.trim(item) );
}
}
}( window.skillet = window.skillet || {}, jQuery ));
//Public Properties
console.log( skillet.ingredient ); //Bacon Strips
//Public Methods
skillet.fry(); //Adding Butter & Fraying Bacon Strips
//Adding a Public Property
skillet.quantity = "12"; console.log( skillet.quantity ); //12
//Adding New Functionality to the Skillet
(function( skillet, $, undefined ) {
//Private Property
var amountOfGrease = "1 Cup";
//Public Method
skillet.toString = function() {
console.log( skillet.quantity + " " +
skillet.ingredient + " & " +
amountOfGrease + " of Grease" );
console.log( isHot ? "Hot" : "Cold" );
};
}( window.skillet = window.skillet || {}, jQuery ));
//end of skillet definition
try {
//12 Bacon Strips & 1 Cup of Grease
skillet.toString(); //Throws Exception
} catch( e ) {
console.log( e.message ); //isHot is not defined
}
Siento que debo mencionar que la función anónima autoejecutable es el patrón utilizado por el equipo de jQuery.
Actualización
Cuando hice esta pregunta, realmente no vi la importancia de lo que estaba tratando de entender. El verdadero problema en cuestión es si usar o no nuevas para crear instancias de sus objetos o usar patrones que no requieren constructores / uso de la new
palabra clave.
Agregué mi propia respuesta, porque en mi opinión deberíamos usar patrones que no usan la new
palabra clave.
Para obtener más información, consulte mi respuesta.
fuente
Respuestas:
Las funciones anónimas de ejecución automática se utilizan para automatizar la ejecución de scripts sin engancharse a eventos externos (es decir, window.onload).
En este ejemplo, se utiliza para formar el patrón de Módulo clásico, cuyo propósito principal es introducir un espacio de nombres en el entorno global y proporcionar encapsulación para cualquier propiedad interna que no se "exporta" o se adjunta al espacio de nombres.
La modificación de un prototipo de objetos, por otro lado, se utiliza para establecer la herencia (o extender nativos). Este patrón se usa para producir objetos 1: n con métodos o propiedades comunes.
No debe elegir un patrón con preferencia al otro, ya que realizan tareas diferentes . En términos de espacio de nombres, la función de autoejecución es una opción adecuada.
fuente
Aquí está el patrón que acabo de comenzar a usar (he estado usando variaciones hasta ayer):
Algunas reflexiones sobre esto:
(anonymous)
rastro en los rastros de la pila del depurador como se nombra todo (sin funciones anónimas).La única vez que usaría
prototype
más es definir la herencia.fuente
function clone(obj){return this typeof 'clone' ? this : new clone(clone.prototype=obj)}
prototype
método como sugiere es (a menos que haya un método con el que no estoy familiarizado, que puede ser el caso) que pierda la capacidad de encapsular atributos, lo que significa que todo está abierto como público (que no es el fin del mundo , solo una preferencia personal).Utilizo prototipos porque son más limpios y siguen patrones de herencia estándar. Las funciones de invocación automática son excelentes para el desarrollo del navegador o una situación en la que no sabes dónde se está ejecutando el código, pero por lo demás es solo ruido.
Ejemplo:
fuente
Me gustaría ir con la función de ejecución automática, pero con una ligera diferencia:
Si encuentro este enfoque mucho más limpio, ya que separo la variable global devuelta de cualquier parámetro de entrada (como jQuery) (la forma en que la escribió es equivalente a devolver vacío y usar un parámetro de referencia en C #, que encuentro un poco apagado, o pasar un puntero a un puntero y reasignarlo en C ++). Si fuera a adjuntar métodos o propiedades adicionales a la clase, usaría la herencia prototípica (por ejemplo, con el método $ .extend de jQuery, pero es bastante fácil rodar su propia extensión ()):
De esta manera, tiene una clara distinción entre los métodos agregados y los originales.
fuente
Ejemplo en vivo
Puede usar un IIFE para emular el "alcance del módulo" alrededor de su código. Entonces puedes usar objetos como lo haces normalmente.
No "emule" el estado privado usando cierres ya que eso tiene una gran penalización de memoria.
Si está escribiendo una aplicación empresarial y desea mantener su uso de memoria por debajo de 1 GB, evite usar cierres innecesarios para almacenar el estado.
fuente
console
y globalconsole
es una micro optimización. Vale la pena hacerlo para que pueda minimizar,console
pero ese es un asunto diferenteActualización Ahora tengo una mejor comprensión de JavaScript y siento que puedo abordar la pregunta correctamente. Creo que fue un tema de JavaScript mal redactado, pero muy importante para abordar.
El patrón de función anónima autoejecutable no requiere el uso de la nueva palabra clave si evita el uso fuera de las funciones. Estoy de acuerdo con la idea de que usar new es una técnica antigua y, en cambio, deberíamos esforzarnos por usar patrones que eviten el uso de new.
La función anónima autoejecutable cumple con este criterio.
La respuesta a esta pregunta es subjetiva, porque hay muchos estilos de codificación en javascript. Sin embargo, según mi investigación y experiencia, recomendaría elegir utilizar la función anónima de ejecución automática para definir sus API y evitar el uso de nuevas siempre que sea posible.
fuente
Así es como me gustaría hacer esto
IIFE
SelfExecutingFunction
para extender elMyclass
conMyclass.anotherFunction()
;fuente