Question

在下面的代码中，我传递一个HMTL元素，并使用三元运算符检查传递的参数是否为null。如果它不为null，我更改传递元素的className。

var changeColorTo = {

  grey: function(e){
    e ? (e.className = "grey") : "" ;
  },
  red: function(e){
    e ? (e.className = "red") : "" ;
  },
  green: function(e){
    e ? (e.className = "green") : "" ;
  },
  blue: function(e){
    e ? (e.className = "blue") : "" ;
  }
};

上面的代码工作正常，除非我传递任何随机字符串，如

changeColorTo.grey("random");

它不会造成任何伤害。但我想知道上面的代码是否正确？我想念什么吗？还是有更好的方法来达到同样的效果？

谢谢。

Answer 1

您可以将条件从e扩展到(e && e.className)。这应该可以防止因传入随机垃圾甚至非元素节点而导致的脚本错误。

更好，将该条件实施为function hasClassName(e) { return ... }并使用hasClassName(e)作为您的测试。

编辑：根据评论，取代了不完全兼容的(typeof e=="object") && ('className' in e)条件。另请参阅How do I check if an object has a property in JavaScript?

Answer 2

如果你传入一个字符串，代码就会起作用。但是，如果你想确保你只传递一个DOM元素（最好是严格的），你可以修改你的代码：

function isNode(o){
  return (
    typeof Node === "object" ? o instanceof Node : 
    typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName==="string"
  );
}    

function isElement(o){
  return (
    typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2
    typeof o === "object" && o.nodeType === 1 && typeof o.nodeName==="string"
  );
}

var changeColorTo = {
    grey: function(e) {
        isNode(e) || isElement(e) ? (e.className = "grey") : "" ;
    },
    ...
}

有关isNode和isElement工作原理的详细信息，请查看this stackoverflow answer。此代码还将确保您不会尝试更改className或null变量的undefined属性，因为每个函数中的第一个条件（o instanceof Node和o instanceof HTMLElement）将失败，这可确保isNode和isElement对null和undefined值返回false。

使用三元运算符检查null

2 个答案: