我正试图从另一个开发人员那里理解这个代码,而我的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);
答案 0 :(得分:4)
它试图通过立即调用一个函数来扩展一个具有更多属性/功能的对象,在扩展它之后传入一个对象来扩展并再次返回该对象。
首先,取CPCU || {}
,如果已定义CPCU
,则会将其传递给函数。如果没有,CPCU
将为falsy,因此传递||
的右侧,这是一个新的空对象。然后将其用作内部的_cpcu
参数,并分配额外的属性等。
使用这种方法可以将功能的不同部分分解到不同的区域,可能会将某些变量保密到这些区域,或者保存在不同的文件中以便于维护等。
我说“尝试”进一步向上,因为这段代码实际上是错误的。如果CPCU
在运行时确实未定义,并且传递到{}
,那么这一行:
var mmenu = _cpcu.Menu.mobile = _cpcu.Menu.mobile || {};
将出错,因为它无法访问未定义的mobile
属性的Menu
属性。因此,虽然开发人员使用模式来分解代码的不同区域,但本节实际上依赖于另一个部分(定义{{1}}属性)已经预先运行,这使得整个{{1} moot。
答案 1 :(得分:1)
参数CPCU || {}
用于说明在您发布的代码顶部的var CPCU
声明之前,某些其他代码可能已经初始化的可能性CPCU
。这种模式很常见。
因此,如果CPCU
未定义(可能是常见情况,虽然我当然不太了解您的软件),那么传递给匿名者的价值function将是新的空对象({}
)。但是,如果已经定义并初始化了CPCU
,则会传递其当前值。
因此,假设,如果在某个页面上有一个不同的脚本,这些脚本在您发布的代码之前通过<script>
标签导入,它会执行以下操作:
var CPCU = { debug: true };
然后当您发布的代码运行时,它会看到CPCU
已经有值。这通常是为了增加灵活性并解决不可预见的可能性。