javascript - JavaScript困惑中的函数表达式

我试图从另一个开发人员那里理解这段代码，但是我缺乏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);

最佳答案

它试图通过立即调用一个函数，传入一个对象以进行扩展并在扩展该对象后再次返回该对象来扩展具有更多属性/功能的对象。

首先，采用CPCU || {}，如果已经定义了CPCU，它将把它传递给函数。如果不是，则CPCU将为falsy，因此将传入||的右侧，这是一个新的空对象。然后将其用作内部的_cpcu参数，并为其分配了其他属性。

使用此方法，您可以将功能的不同部分分解为不同的区域，也许将某些变量保留为这些区域专用，或将它们保留在不同的文件中，以实现更易维护的功能等。

我进一步说“尝试”，因为该代码实际上是错误的。如果CPCU的确在运行时尚未定义，并且传入{}，则此行：

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

将出错，因为它无法访问未定义的mobile属性的Menu属性。因此，尽管开发人员已使用一种模式来拆分代码的不同区域，但本节实际上依赖于事先运行过的另一节（定义了Menu属性），这使整个CPCU || {}毫无意义。