Что такое х = х || Техника {} в JavaScript — и как она влияет на IIFE?

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

У шаблона, который вы описываете, нет официального названия, потому что это три отдельных шаблона. Каждый паттерн имеет несколько названий, но в этом посте я буду использовать следующую терминологию:

• закрытие
• псевдоним
• расширение пространства имен

Закрытие

Основой всего узора является closure. Это просто функция, которая используется для определения области видимости переменных и функций, чтобы они не загрязняли глобальное пространство имен:

//these declare window.foo and window.bar respectively
//as such, they pollute the global namespace
var foo;
function bar() {}

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

Преимущество хранения переменных внутри замыкания заключается в том, что вам не придется беспокоиться о том, что кто-то перезапишет используемые вами переменные. Это особенно важно для часто используемых временных переменных, таких как i или j.

Псевдоним

Второй важной частью этого шаблона является алиасинг. Псевдоним позволяет определить переменную и использовать ее внутри замыкания, не беспокоясь о том, в каком глобальном пространстве имен она находится.

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

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

Это особенно важно, поскольку это означает, что глобальное пространство имен можно изменить в большом файле JavaScript, изменив имя в одном месте. Это хорошая вещь. Кроме того, минификаторы могут сокращать внутренний псевдоним до однобуквенного имени переменной, такого как a, что обеспечивает значительную экономию байтов при минимизации.

Расширение пространства имен

Шаблон расширения пространства имен основан на поведении объединения оператора или (||). Во многих языках && и || возвращают либо true, либо false, но в JavaScript && возвращает первое значение falsey (false, 0, '', null, undefined), а || возвращает первое значение truthy (все, что не falsey). Для обоих операторов, если соответствующий тип не найден, возвращается последний аргумент. Это делает оператор || удобным способом определения нового пространства имен, только если оно еще не существует.

if (typeof window.Foo === 'undefined') {
    window.foo = {};
}

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

Это полезно, поскольку позволяет расширить пространство имен дополнительными свойствами и методами, не беспокоясь о том, в каком порядке были определены свойства и методы.

В этом первом примере FileA нужно будет выполнить до FileB:

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

window.foo.fizz = 'buzz';

Во втором примере File1 и File2 могут выполняться в любом порядке:

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

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

Все вместе сейчас

Использование каждого шаблона вместе создает очень мощный модульный скрипт:

//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 || {}));

Я всегда понимал это как "Null Coalescing".

Что касается влияния на ваш IIFE, вы передаете window.FOO, если он уже создан, или пустой объект, если это не так.

Вы также можете прочитать это как:

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

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

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

    return foo;

}(window.FOO));

Лично я предпочитаю другую схему:

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

Я считаю, что это менее запутанно и помогает мне обеспечить чистое пространство имен.

Чтобы дополнить ответ Пита, альтернативная форма:

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

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

Обычно я использую локальный var, чтобы дать минификатору возможность сэкономить несколько байтов. Это имеет больший эффект, когда вы работаете на нескольких уровнях в глубине вашего пространства имен, например, на var MyView = window.MyApp.Views.MyView.

Как уже отмечали другие, ваш первый вопрос полностью отделен и не зависит от вашего второго вопроса. Они не имеют ничего общего друг с другом, за исключением того факта, что вы решили объединить их в одном операторе, а не в двух.

Что касается первого вопроса, Дуглас Крокфорд называет его назначением по умолчанию. Например, если переменная существует, оставьте ее в покое, в противном случае инициализируйте ее указанным значением по умолчанию. Когда вы видите что-то похожее на:

foo = foo || {};

Ваш внутренний взор должен прочитать это как:

foo defaults to `{}`

Технически это действительно "назначить {} для foo, если foo ложно", но мы сделали предположение, что любое ложное значение, такое как ноль, null или undefined, является недопустимым значением для foo, когда мы используем это. Кроме того, слово default уже подразумевает «если foo не определено».

Но, сказав это и зная ваш второй вопрос, очевидно, что default не совсем подходящее слово в качестве имени параметра, переданного в ваш IIFE. Этот параметр просто прикрепляет методы и атрибуты к переданному объекту. В этом случае exports подходит, как в «это общедоступные экспортированные члены объекта». Я бы подумал, что attach также является подходящим именем, например, «прикрепить эти вещи к объекту». Лично я предпочитаю просто называть его obj как объект, который является типом того, что вы ожидаете передать.