Recherche dans un ensemble prédéfini d'options de texte

Question

Dites, je veux voir si un élément DOM est un bloc. Je peux l'écrire de trois façons, selon mon humeur:

// 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/)) 

J'ai un sentiment mitigé à propos de tous. Le premier est trop verbeux une fois que j'ai plus d'une option. Deuxième contient ces valeurs arbitraires dans l'objet (où je mets 1s cette fois). La troisième ressemble à l'exagération. (Qu'est-ce qui est vraiment mauvais au sujet de la surqualification?)

Connaissez-vous un autre, un meilleur moyen? Si non, tout ce qui me manque à propos de ces trois façons?

Javascript seulement, s'il vous plaît.

Answer 1

J'aime la troisième voie; Je ne pense pas que cela ressemble à une exagération du tout. Si vous avez besoin d'une manière encore plus courte que cela fonctionne aussi:

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

Mais ce n'est pas très lisible ...

Il pourrait être utile abstraire tout de suite en étendant le prototype de chaîne:

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

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

Answer 2

Ne pouvez-vous pas utiliser la 2ème méthode, mais vérifiez qu'elle n'est pas définie, puis ignorez la partie ": 1". Je n'ai pas testé cependant.

Answer 3

Il semble que vous avez besoin d'une fonction InArray, voici un à partir du résultat de recherche en haut:

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

Alors le chemin quatrième ressemblerait à ceci:

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

ou d'une manière plus lisible:

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

Answer 4

Ma solution préférée pour cela est:

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

Je pense que cette volonté utiliser le code natif de la chaîne et être beaucoup plus efficace que la méthode d'itération du tableau &.

Answer 5

Si nous visons principalement la lisibilité, et si cela se produit plus d'une fois - peut-être même si est juste une fois - je passerais le test à une fonction. Ensuite, définissez cette fonction comme vous voulez - probablement l'option 1, pour une simplicité maximale.

Surcharge? Peut-être. Mais un cadeau au programmeur qui veut scanner et comprendre le code dans 6 mois. Probablement vous :-)

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


// ... 

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