Question

我遇到了这段代码，但是我无法阅读它，我从未见过以这种方式编写的代码。

showMenuButton[isOpened ? "hide" : "show"]();
hideMenuButton[isOpened ? "show" : "hide"]();
isOpened ? container.removeClass("hideMenu") : container.addClass("hideMenu");

与

相同

if(isOpened="hide"){
showMenuButton();
}
else{
hideMenuButton();
}

有人可以解释一下代码在做什么以及他们为什么这样写？是因为它们更短吗？（我从未见过函数调用中的[]）。

谢谢。

这是完整的JavaScript代码。

menuToggle = $("#menuToggle"),
        showMenuButton = $(".menuToggle_show"),
        hideMenuButton = $(".menuToggle_hide"),
        toggleSideMenu = function (isOpened) {

        showMenuButton[isOpened ? "hide" : "show"]();
        hideMenuButton[isOpened ? "show" : "hide"]();

        isOpened ? container.removeClass("hideMenu") : container.addClass("hideMenu");
        }

Answer 1

Javascript有2 ways of referring to objects/method calls - 点符号和方括号表示法。它们是可互换的，并且是等价的，因此以下两行将是相同的

var x = someObject.someProperty;
// or 
var x = someObject["someProperty"];

这也适用于方法，所以下面的两个都可以工作（注意上面的区别是调用方法的括号）

someObject.someFunction();
// or 
someObject["someFunction"]();

现在，将这个问题与你的问题联系起来，还有另一个伎俩;三元运营商：

var result = someCondition ? trueResult : falseResult

把这一切放在一起

showMenuButton[isOpened ? "hide" : "show"]();
hideMenuButton[isOpened ? "show" : "hide"]();

等于

if(isOpened){
    showMenuButton["hide"](); // or, showMenuButton.hide();
    hideMenuButton["show"](); // or, hideMenuButton.show();
}
else{
    showMenuButton["show"](); // or, showMenuButton.show();
    hideMenuButton["hide"](); // or, hideMenuButton.hide();
}

（它基本上是根据当前是否处于打开状态来切换显示/隐藏按钮）

Answer 2

这些是存储函数的对象：

var functions={
    alertName:function(){
        alert('My name is Angel');
    },
    alertLastName:function(){
        alert('My last name is Cool');
    },
    alertMySite:function(){
        alert('angelcool.net');
    }
}

functions['alertMySite']();

http://jsfiddle.net/8ugav811/2/

Answer 3

是的，正是这样，它调用函数hide()和show()，从jQuery对象，三元运算符确实使它更紧凑，最友好的代码，将去像：

if( isOpened  ){
   showMenuButton.hide();
   hideMenuButton.show();
   container.removeClass("hideMenu");
}else{
   showMenuButton.show();
   hideMenuButton.hide();
   container.addClass("hideMenu");
}

Javascript函数编写约定

3 个答案: