Выражение функции в JavaScript confusion

Question

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

Я понимаю, почему jQuery передается как $. Я не понимаю, как переменная CPCU передается обратно в себя или почему она возвращается как CPCU || {}. Может ли кто-нибудь помочь мне понять, как переменная CPCU работает в этой ситуации?

var CPCU = (function (_cpcu, $) { 
    'use strict'; 

    /** 
    * Mobile Menu 
    */ 

    var mmenu = _cpcu.Menu.mobile = _cpcu.Menu.mobile || {}; 
    // Properties. 
    mmenu.id = '#mobile-menu'; 
    mmenu.el = $(''); 
    mmenu.api = {}; 
    mmenu.button = '#header-content .menu.button'; 
    mmenu.aniClass = 'animate'; 
    mmenu.opts = { 
    slidingSubmenus: false 
    }; 
    mmenu.config = { 
    classNames: { 
     selected: 'active' 
    } 
    }; 
    // Methods. 
    mmenu.init = function() { 
    mmenu.el = $(mmenu.id); 
    // Move the active class to from the A to the LI, must happen before mmenu init. 
    $('#mobile-menu').find('a.active').parent('li').addClass('active'); 
    // Now we can init the menu. otherwise it doesn't pick up the active LI. 
    mmenu.api = mmenu.el.mmenu(mmenu.opts, mmenu.config).data('mmenu'); 
    mmenu.button = $(mmenu.button); 
    mmenu.button.data('lines', $('.line1,.line2,.line3')); 
    mmenu.button.click(function() { 
     mmenu.api.open(); 
    }); 
    mmenu.api.bind('open', function() { 
     mmenu.button.data('lines').addClass(mmenu.aniClass); 
    }); 
    mmenu.api.bind('close', function() { 
     mmenu.button.data('lines').removeClass(mmenu.aniClass); 
    }); 
    }; 
    // Set up doc ready. 
    $(document).ready(function() { 
    mmenu.init(); 
    }); 
    return _cpcu; 
})(CPCU || {}, jQuery); 

Answer 1

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

Прежде всего, принимая CPCU || {}, если CPCU уже определен, он передаст это в функцию. Если нет, то CPCU будет falsy, поэтому передается правая сторона ||, что является новым пустым объектом. Затем он используется как параметр _cpcu внутри и имеет дополнительные свойства и т. Д.

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

Я говорю «пытается» далее потому что этот код на самом деле глючит. Если CPCU действительно неопределенное время это проходит, и она проходит в {}, то эта строка:

var mmenu = _cpcu.Menu.mobile = _cpcu.Menu.mobile || {}; 

будет ошибка, потому что он не может получить доступ к mobile свойства неопределенного Menu свойства. Таким образом, хотя разработчик использовал шаблон для разлома разных областей кода, этот раздел фактически полагается на другой раздел (который определяет свойство Menu), который был запущен перед началом работы, что делает весь CPCU || {} спорным.

Answer 2

Параметр CPCU || {} есть учитывать возможность того, что до var CPCU декларации в верхней части кода, вы в курсе, некоторые другой код может иметь уже инициализирован CPCU. Шаблон является общим.

Таким образом, если CPCU является не определена (вероятно, общий случай, хотя я не знаю много о вашем программном обеспечении, конечно), то значение, переданное в анонимной функции будет новый пустой объект ({}) , Однако, если is уже определен и инициализирован, тогда вместо него будет передано его текущее значение.

Таким образом, гипотетически, если на какой-то странице есть другой сценарий, который импортируется через <script> тег перед кодом вы в курсе, и он делает что-то вроде:

var CPCU = { debug: true }; 

тогда, когда код размещен запускается, он увидит, что CPCU уже имеет значение. Это обычно делается для того, чтобы добавить гибкость и учитывать непредвиденные возможности.