代码之家 › 专栏 › 技术社区 › buti-oxa

在一组预定义的文本选项中查找

javascript

buti-oxa · 技术社区 · 16 年前

比如,我想看看一个dom元素是否是一个块。根据我的心情,我可以用三种方式来写:

// first way
if (el.currentStyle.display == "block" || el.currentStyle.display == "inline-block" || el.currentStyle.display == "table-cell")       

// second way
var blocks = {"block": 1, "inline-block": 1, "table-cell": 1};
if (el.currentStyle.display in blocks)// 

// third way
if (el.currentStyle.display.match(/block|inline-block|table-cell/))

我对他们都有不同的感觉。首先,当我有多个选项时,它太冗长了。第二个包含对象中的任意值(这次我在这里放了1)。第三个看起来是杀戮过度。(过度杀人到底有什么坏处?)

你知道其他更好的方法吗?如果没有,这三种方法有什么缺点吗?

请只用javascript。

5 回复 | 直到 16 年前

James 16 年前

我喜欢第三种方式,我觉得这看起来一点也不过分。如果您需要一个更短的方法,那么这也适用:

el.currentStyle.display.match(/(e-)?(block|cell)/)

但这不太可读…

通过扩展字符串原型可能值得将其全部抽象出来:

String.prototype.matches = function(what) {
    return (',' + what + ',').indexOf(',' + this + ',') > -1;
};

// Using it:
el.currentStyle.display.matches('block,inline-block,table-cell');

Paul Roub jim 16 年前

如果我们的主要目标是可读性,如果这种情况不止发生一次——甚至可能是是只需一次——我将把测试转移到一个函数中。然后按照您喜欢的方式来定义这个函数——可能是选项1,为了最大限度地简化这个函数。

过度杀戮?可能。但这是给那些想在6个月后扫描和理解代码的程序员的礼物。可能是你:-)

function isBlock(el) {
  return (el.currentStyle.display == "block" || 
          el.currentStyle.display == "inline-block" || 
          el.currentStyle.display == "table-cell");
}


// ...

if (isBlock(el)) {
  // do something
}

Ólafur Waage 16 年前

你不能用第二种方法,但是检查它是否未定义,然后跳过“ : 1 “部分。但我还没有测试。

pjesi 16 年前

看起来您需要一个inarray函数,下面是顶部搜索结果中的一个:

Array.prototype.inArray = function (value) {
  var i;
  for (i=0; i < this.length; i++) {
    if (this[i] === value) {
      return true;
    }
  }
  return false;
};

那么第四条路应该是这样的:

if (['block','inline-block','table-cell'].inArray(el.currentStyle.display))

或者以更易读的方式:

var isBlock = ['block','inline-block','table-cell'].inArray(el.currentStyle.display);

Laurent Villeneuve 16 年前

我的首选解决方案是:

'block||inline-block||table-cell'.indexOf( el.currentStyle.display ) >= 0

我认为这将使用字符串的本机代码,并且比数组和迭代方法更有效。