javascript - sexualidad - pensamientos negativos ejemplos

¿Cuál es el "x=x ||{} "Técnica en JavaScript-y ¿cómo afecta este IIFE?

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Qué significa "var FOO = FOO || {} "(Asignar una variable o un objeto vacío a esa variable) significa en Javascript? 7 respuestas

Primero, un ejemplo de pseudo código:

;(function(foo){

    foo.init = function(baz) { ... }

    foo.other = function() { ... }

    return foo;

}(window.FOO = window.FOO || {}));

Llamado así:

FOO.init();

Mi pregunta:

• ¿Cuál es el nombre técnico / descripción de: window.FOO = window.FOO || {} window.FOO = window.FOO || {} ?

Entiendo lo que hace el código ... Vea a continuación mi (s) motivo (s) para preguntar.

Motivo de preguntar:

Estoy llamando al pasado en global como tal:

;(function(foo){
    ... foo vs. FOO, anyone else potentially confused? ...
}(window.FOO = window.FOO || {}));

... pero simplemente no me gusta llamar a ese " foo " en minúscula, considerando que lo global se llama FOO capitalizado ... Parece confuso.

Si supiera el nombre técnico de esta técnica, podría decir:

;(function(technicalname){
    ... do something with technicalname, not to be confused with FOO ...
}(window.FOO = window.FOO || {}));

He visto un ejemplo reciente (increíble) donde lo llamaron " exports ":

;(function(exports){
    ...
}(window.Lib = window.Lib || {}));

Creo que estoy tratando de estandarizar mis convenciones de codificación ... Me gustaría saber qué hacen los profesionales y cómo piensan (¡por eso estoy preguntando aquí!).

Answer 1

_Patrón

(function (foo) {
    ...code...
    foo.bar = baz;
    ...more code...
}(window.FOO = window.FOO || {});

No hay un nombre formal para el patrón que describes, porque se trata de tres patrones separados combinados. Cada patrón tiene varios nombres, pero para esta publicación usaré la siguiente terminología:

• cierre
• alias
• extensión del espacio de nombres

Cierre

La base de todo el patrón es el closure . Es simplemente una función que se utiliza para determinar variables y funciones de manera que no contaminen el espacio de nombres global:

_{Sin cierre}

//these declare window.foo and window.bar respectively //as such, they pollute the global namespace var foo; function bar() {} _{Cierre, en este caso, una expresión funcional invocada inmediatamente (IIFE)}

(function () {
    //these declare foo and bar within the function
    //but they are not accessible outside the function
    var foo;
    function bar() {}
}());

La ventaja de mantener variables dentro de un cierre es que no tendrá que preocuparse de que alguien sobrescriba las variables que está utilizando. Esto es especialmente importante para variables temporales como i o j que se usan con frecuencia.

Alias

La segunda parte importante de este patrón es el aliasing. Aliasing permite definir y usar una variable dentro de un cierre sin necesidad de preocuparse por el espacio de nombres global en el que reside.

_{Sin Aliasing}

(function () { ... foo = window.SomeFunction(bar, baz); ... }()); _{Con Aliasing}

(function (sf) { //local name
    ...
    foo = sf(bar, baz);
    ...
}(window.SomeFunction)); //global namespace

Esto es especialmente importante ya que significa que el espacio de nombres global se puede cambiar a través de un gran archivo de JavaScript cambiando el nombre en una sola ubicación. Esto es A Good Thing ™. Además, los minificadores pueden acortar el alias interno a un nombre de variable de una sola letra, como a , lo que significa un ahorro significativo de bytes en la minificación.

Extensión del espacio de nombres

El patrón de extensión de espacio de nombres se basa en el comportamiento de coalescencia del operador or ( || ). En muchos idiomas, && y || devuelve true o false , pero en JavaScript, && devuelve el primer valor de falsey ( false , 0 , '''' , null , undefined ) y || devuelve el primer valor de truthy (cualquier cosa que no sea falsey ). Para ambos operadores, si no se encuentra el tipo respectivo, se devuelve el último argumento. Esto hace que || operador una forma conveniente de definir un nuevo espacio de nombres solo si aún no existe .

_{Sin extensión de espacio de nombres}

if (typeof window.Foo === ''undefined'') { window.foo = {}; } _{Con extensión de espacio de nombres}

window.foo = window.foo || {};

Esto es útil porque permite extender un espacio de nombre con propiedades y métodos adicionales sin tener que preocuparse por en qué orden se definieron las propiedades y los métodos.

En este primer ejemplo, FileA necesitaría ejecutarse antes de FileB :

_FileA.js

window.foo = {}; window.foo.bar = ''baz''; _FileB.js

window.foo.fizz = ''buzz'';

En este segundo ejemplo, File2 y File2 podrían ejecutarse en cualquier orden:

_File1.js

window.foo = window.foo || {}; window.foo.bar = ''baz''; _File2.js

window.foo = window.foo || {};
window.foo.fizz = ''buzz'';

Todos juntos ahora

Usar cada patrón en conjunto crea un script modular muy poderoso:

//use foo internally so that you don''t have to worry about
//what the global namespace is called
(function (foo) {
    //declare variables internally that you want to keep local to the script
    var i,
        len,
        internal,
        qux;
    //declare functions/properties on the alias when you want to expose them
    foo.bar = function () {...};
//extend the global namespace so that existing extensions are persistent
}(window.FOO = window.FOO || {}));

Answer 2

Como otros han notado, su primera pregunta es completamente separada e independiente de su segunda pregunta. No tienen nada que ver entre sí, excepto por el hecho de que ha decidido combinarlos en una sola declaración en lugar de hacerlo en dos declaraciones.

Para su primera pregunta, Douglas Crockford lo llama asignación predeterminada . Como en, si la variable existe, entonces déjalo en blanco; de lo contrario, inicialízalo al valor predeterminado especificado. Cuando ves algo que se ve así:

foo = foo || {};

El ojo de tu mente debería leerlo así:

foo defaults to `{}`

Técnicamente es "asignar {} a foo si foo es falso", pero hemos asumido que cualquier cosa falsa como cero, nula o indefinida es un valor no válido para foo cuando usamos esto. Además, la palabra default ya implica "si foo no está definido".

Pero, una vez dicho esto y conociendo su segunda pregunta, es obvio que el valor predeterminado no es realmente una palabra apropiada como el nombre del parámetro pasado a su IIFE. Lo que ese parámetro está haciendo es simplemente adjuntar métodos y atributos al objeto pasado. En este caso, las exportaciones son apropiadas como en "estos son los miembros exportados públicamente del objeto". Creo que adjuntar también es un nombre apropiado como "adjuntar estas cosas al objeto". Mi preferencia personal es simplemente nombrarla obj como objeto, que es el tipo de cosa que espera que se transmita.

Answer 3

Para complementar la respuesta de pete, una forma alternativa:

;(function() {
  var Foo = window.Foo = window.Foo || {};

  Foo.foo  = ''bar'';
  Foo.baz  = function() {
    return "Hello World!";
  };
})();

Usualmente uso la var local para darle al minificador la oportunidad de guardar unos pocos bytes. Esto tiene un efecto mayor cuando trabajas en varios niveles en tu espacio de nombres como en var MyView = window.MyApp.Views.MyView .

Answer 4

Siempre lo he entendido como "coalescencia nula" .

En cuanto a afectar a su IIFE, está pasando window.FOO si ya está instanciado, o un objeto vacío si no lo está.

También podría leerlo como:

window.FOO = window.FOO || {};
;(function(foo){

    foo.init = function(baz) { ... }

    foo.other = function() { ... }

    return foo;

}(window.FOO));

Personalmente, prefiero un patrón diferente:

var FOO;
if (!FOO) {
    FOO = {};
}
(function () {
    "use strict";
    FOO.prop1 = ''bar'';
    FOO.bar = function (z) {
        return z + 1;
    };
}());

Encuentro que es menos confuso y me ayuda a asegurar el espacio de nombres limpio.