angularJs输入指令中的JavaScript双括号'的源代码

JavaScript double parenthesis in angularJs input directive's source code

本文关键字：源代码 输入 指令 JavaScript angularJs      更新时间：2023-09-26

angularJs源代码中有我以前从未见过的语法。有人能解释一下逻辑运算符的括号和"（inputType[lower（attr.type）]|inputType.text）（scope，element，attr，ctrls[0]，$sniffer，$browser，$filter，$parse）；"中充满依赖项的括号之间发生了什么吗？

其上下文：

var inputDirective = ['$browser', '$sniffer', '$filter', '$parse',
    function($browser, $sniffer, $filter, $parse) {
  return {
    restrict: 'E',
    require: ['?ngModel'],
    link: {
      pre: function(scope, element, attr, ctrls) {
        if (ctrls[0]) {
          (inputType[lowercase(attr.type)] || inputType.text)(scope, element, attr, ctrls[0], $sniffer, $browser, $filter, $parse);
        }
      }
    }
  };
}];

这只是一个常规的函数调用，但被调用的函数由第一部分决定：

(inputType[lowercase(attr.type)] || inputType.text)

在一个较小的例子中更容易遵循：

var functionToCall = ...;
var obj = {
  goodbye: function(name) { alert('Goodbye ' + name); } 
  hello: function(name) { alert('Hello ' + name); }
};
(obj[functionToCall] || obj.hello)(name);

如果是functionToCall == 'goodbye'，则调用obj.goodbye(name)；如果是functionToCall == 'hello'，则调用obj.hello(name)。但如果functionToCall是其他值，则默认为hello。

也许你会更好地理解它：

var func = inputType[lowercase(attr.type)];
if(!func) func = inputType.text;
func(scope, element, attr, ctrls[0], $sniffer, $browser, $filter, $parse);

||是逻辑OR运算符。如果可以转换为true，则expr1 || expr2返回expr1；否则返回expr2。

这可能意味着inputType[lowercase(attr.type)]和inputType.text是一个函数。第二类包含参数。

考虑一下这个简化的inputType实现。

var inputType = {
    text : function(scope, element, attr, ctrls, sniffer, browser, filter, parse){
        //do stuff
    },
    button : function(scope, element, attr, ctrls, sniffer, browser, filter, parse){
        //do stuff
    }
}

当attr.type返回文本或按钮以外的内容时，它默认为文本函数，并使用给定的参数调用它。

不熟悉它在角源中的位置，所以我不知道inputType在哪里，但它必须是一个具有多种不同输入类型的函数的对象，其"默认"函数是text。

此代码：

(inputType[lowercase(attr.type)] || inputType.text)

使用CCD_ 17（逻辑或）运算符。如果操作数是true，则运算符接受两个操作数并返回第一个（左）操作数。如果左操作数的计算结果为false（或者更重要的是undefined），则返回第二个（右）操作数。

这样做的目的是在inputType对象中查找attr.type。如果它在那里找到它，它将返回该函数；如果不是，则返回分配给inputType.text的函数。下一组括号是传递给该结果函数的参数列表。

以这种方式使用||是为传入参数设置默认值或回退值的一种非常方便的方式。您可能看到的另一个简写解决方案是三元运算符：

var func = inputType[lowercase(attr.type)] ? inputType[lowercase(attr.type)] : inputType.text;
func( scope, element, attr, ... );

我认为||版本在这里有点圆滑，因为当您检查的值只是真/假时，它总是如此。

相关文章：