JavaScript 混乱中的函数表达式
Function expression in JavaScript confusion
我试图从另一个开发人员那里理解这段代码,但我缺乏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
将是假的,所以||
的右侧被传入,这是一个新的空对象。 然后,它被用作内部的_cpcu
参数,并分配了额外的属性等。
使用这种方法可以将功能的不同部分分解为不同的区域,也许将某些变量保留在这些区域私有,或者在不同的文件中以便于维护等。
我说"尝试"再往上走,因为这段代码实际上是有问题的。 如果CPCU
在运行时确实未定义,并且它在 {}
中传递,则此行:
var mmenu = _cpcu.Menu.mobile = _cpcu.Menu.mobile || {};
将出错,因为它无法访问未定义的 Menu
属性的 mobile
属性。 因此,虽然开发人员使用了一种模式来分解代码的不同区域,但本节实际上依赖于另一个部分(定义Menu
属性)事先运行,这使得整个CPCU || {}
变得毫无意义。
参数 CPCU || {}
用于说明在您发布的代码顶部的 var CPCU
声明之前,其他一些代码可能已经初始化CPCU
的可能性。这种模式是常见的。
因此,如果未定义CPCU
(可能是常见情况,尽管我当然对您的软件了解不多),那么传递给匿名函数的值将是新的空对象({}
)。但是,如果已经定义并初始化了CPCU
,则将传递其当前值。
因此,假设在某个页面上,在您发布的代码之前通过 <script>
标记导入了不同的脚本,并且它执行以下操作:
var CPCU = { debug: true };
然后,当您发布的代码运行时,它将看到CPCU
已经具有值。这样做通常是为了增加灵活性并考虑不可预见的可能性。
- 能够在定义函数表达式之前使用它
- 函数表达式,返回回调函数
- JavaScript中的立即调用函数表达式(IIFE)-传递jQuery
- 函数声明与函数表达式之间的性能差异
- 立即调用函数表达式(IIFE)相对于普通函数的优势
- 如何防止 JS 缩小删除命名函数表达式的名称
- Angularjs 与 coffeescript 函数表达式中断
- JavaScript 混乱中的函数表达式
- 从ES6中的函数表达式访问类作用域
- 提升作为数组项的匿名函数表达式
- Javascript Mocha测试-测试函数表达式中的函数表达式
- 函数中的JavaScript函数表达式
- Javascript闭包覆盖函数表达式
- 函数表达式的词法作用域
- 请解释一下“;立即调用函数表达式“;以及“;自调用匿名函数”;
- JavaScript 中的函数语句和函数表达式
- ng-class 的函数表达式在 ng-click 时被调用
- 如何创建名称和主体存储在不同变量中的 JavaScript 函数表达式
- Object.Prototype 方法和 IIFE(立即调用的函数表达式)中的“use strict”
- 全局范围内的函数表达式与函数声明的区别