Глядя на исходный код в Интернете, я натолкнулся на это в верхней части нескольких исходных файлов.

var FOO = FOO || {};
FOO.Bar = …;

Но я понятия не имею, что делает || {}.

Некоторые символы имеют особое значение в HTML и должны быть представлены объектами HTML, если они должны сохранить свои значения. Эта функция возвращает строку с некоторыми из этих преобразований, сделанных ;, которые являются наиболее полезными для повседневного веб-программирования. Если вам требуется перевод всех сущностей символов HTML, используйте взамен htmlentities (). {}, равный new Object() и я думаю, что || для чего-то вроде «если он уже существует, используйте его значение, иначе используйте новый объект.

Почему я вижу это в верхней части исходного файла?

Ваше предположение относительно намерения || {} довольно близко.

Этот конкретный шаблон, когда он виден вверху файлов, используется для создания пространства имен , то есть именованного объекта, в котором можно создавать функции и переменные без чрезмерного загрязнения глобального объекта. { *} Причина использования

в том, что если у вас есть два (или более) файла: , почему оба из которых имеют одинаковое пространство имен, тогда не имеет значения, в каком порядке загружены два файла, вы все равно получите

var MY_NAMESPACE = MY_NAMESPACE || {};
MY_NAMESPACE.func1 = {
}

значения этого {{}} этого свойства

var MY_NAMESPACE = MY_NAMESPACE || {};
MY_NAMESPACE.func2 = {
}

правильно определен внутри объекта func1 и func2. MY_NAMESPACE Первый загруженный файл создаст

объект , а любой последующий загруженный файл Экспресс от 4,0 до 4,15 MY_NAMESPACE дополнит объект. Полезно это также позволяет

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

var AEROTWIST = AEROTWIST || {};

следует установить значение переменной AEROTWIST или для пустого объекта. AEROTWIST Двойная труба

является оператором OR, а вторая часть OR выполняется только в том случае, если первая часть возвращает false. || Поэтому, если

уже имеет значение, оно будет сохранено как это значение, но если оно не было установлено ранее, то оно будет установлено как пустой объект. AEROTWIST это в основном то же самое, что сказать это:

Другое распространенное использование для || также установить значение по умолчанию для неопределенного параметра функции:

if(!AEROTWIST) {var AEROTWIST={};}

Есть несколько примеров для

Еще одно распространенное использование для || также установить значение по умолчанию для неопределенного параметра функции:

function display(a) {
  a = a || 'default'; // here we set the default value of a to be 'default'
  console.log(a);
}

// we call display without providing a parameter
display(); // this will log 'default'
display('test'); // this will log 'test' to the console

Эквивалент в других программах обычно такой:

function display(a = 'default') {
  // ...
}

Есть две основные части, которые var FOO = FOO || {}; охватывает.

# 1 Предотвращение переопределений

Представьте, что вы разделите ваш код на несколько файлов, и ваши коллеги также работают над объектом с именем FOO. Тогда это может привести к тому, что кто-то уже определил FOO и назначит ему функциональность (например, функцию skateboard). Тогда вы переопределите его, если не проверяете, существует ли он уже.

Проблемный случай:

// Definition of co-worker "Bart" in "bart.js"
var FOO = {};

FOO.skateboard = function() {
  alert('I like skateboarding!');
};

// Definition of co-worker "Homer" in "homer.js"
var FOO = {};

FOO.donut = function() {
  alert('I like donuts!');
};

В этом случае функция skateboard исчезнет, ​​если вы загрузите файл JavaScript homer.js после bart.js в своем HTML, потому что Гомер определяет новый объект FOO (и таким образом переопределяет существующий от Bart), поэтому он знает только о donut.

. Вам нужно использовать var FOO = FOO || {};, что означает «FOO будет назначен FOO (если он уже существует) или новому пустому объекту (если FOO еще не существует).

Solution:

var FOO = FOO || {};

// Definition of co-worker Bart in bart.js
FOO.skateboard = function() {
  alert('I like skateboarding!');
};

// Definition of co-worker Homer in homer.js
var FOO = FOO || {};

FOO.donut = function() {
  alert('I like donuts!');
};

Поскольку Bart и Homer теперь проверяют существование FOO, прежде чем они определяют свои методы, вы можете загрузить bart.js и homer.js в любом порядке, не переопределяя методы друг друга (если они имеют разные имена). Таким образом, вы всегда получите объект FOO, который имеет методы skateboard и donut (Yay!).

# 2 Определение нового объекта

Если вы прочитали первый пример, то вы уже сейчас понимаете, какова цель || {} Глядя на вывод

, потому что, если не существует существующего FOO объекта, тогда OR-case станет активным и создаст новый объект, так что вы сможете назначать ему функции. Например:

var FOO = {};

FOO.skateboard = function() {
  alert('I like skateboarding!');
};

Если в AEROTWIST нет значения или оно равно null или не определено, значение, назначенное новому AEROTWIST, будет {} (пустой объект)

Переменная || Оператор принимает два значения:

a || b

Если a равен , он вернет правдивыми . В противном случае он вернет a ложные значения: b Глядя на вывод

. Истинные ценности — это все остальное. null, undefined, 0, "", NaN и false не был установлен (если

, поэтому если a), он вернет undefined Обратите внимание, что в некоторых версиях IE этот код не будет работать должным образом. Поскольку b Глядя на вывод

, переменная переопределена var, поэтому — если я правильно помню проблему — у вас всегда будет новый объект. Это должно решить проблему: значения этого {{}} этого свойства javascript — передать дополнительный аргумент в функцию обратного вызова — переполнение стека

var AEROTWIST;
AEROTWIST = AEROTWIST || {};