Question

我看过这样一个片段，用于在JavaScript中使用条件注释检测IE。

var ie = (function(){

    var undef, v = 3, div = document.createElement('div');

    // the while loop is used without an associated block: {}
    // so, only the condition within the () is executed.

    // semicolons arent allowed within the condition,
    //   so a comma is used to stand in for one
    // basically allowing the two separate statements 
    //   to be evaluated sequentially.

    while (
        div.innerHTML = '<!--[if gt IE '+(++v)+']><i></i><![endif]-->',
        div.getElementsByTagName('i')[0]
    );

    // each time it's evaluated, v gets incremented and
    //   tossed into the DOM as a conditional comment
    // the i element is then a child of the div.

    // the return value of the getEBTN call is used as 
    //   the final condition expression
    // if there is an i element (the IE conditional
    //   succeeded), then getEBTN's return is truthy
    // and the loop continues until there is no 
    //   more i elements.

    // In other words:  ** MAGIC**

    return v > 4 ? v : undef;

}());

上面给出的是documented (and slightly improved) version by Paul Irish上的snippet by James Padolsey。我发布评论版本是为了让您知道如果有人可能需要更简单的解释。

我真的很想知道在while循环中发生了什么。我不明白。

Answer 1

（假设我没有笨拙地搞砸了）while循环等同于以下内容：

var elt;

do
{
    v++;
    div.innerHTML = '<!--[if gt IE ' + v + ']><i></i><![endif]-->'
    elt = div.getElementsByTagName('i')[0];
} (while elt);

mdc或任何好的东西覆盖了这个（stmt1，stmt2）的东西。

以下是MDC对while所说的内容：

while (condition)
    statement
<强> condition
在每次循环之前计算的表达式。如果此条件的计算结果为true，则执行statement。当条件求值为false时，继续执行while循环后的语句。

我们可以准确地从MDC中找到JavaScript中的 expression ：

表达式是评估为单个值的任何有效的文字，变量，运算符和表达式集合;值可以是数字，字符串或逻辑值。

从概念上讲，有两种类型的表达式：将值赋给变量的表达式和仅具有值的表达式。例如，表达式x = 7是一个表达式，它将x赋值为7。该表达式本身的计算结果为7。此类表达式使用赋值运算符。另一方面，表达式3 + 4简单地评估为7;它不执行任务。此类表达式中使用的运算符简称为运算符。

如果您有勇气，还可以查看ECMA-262 language specification，特别是以下部分：

11 表达式，尤其是 11.14 逗号操作员（,）
12.6.2 while声明

_{对不起，我无法提供直接链接，因为它全部都在PDF中。}

Answer 2

v存储IE版本号。它被初始化为3，因此循环在每次迭代时都会创建如下的字符串：

// v = 3
<!--[if gt IE 4]><i></i><![endif]-->

// v = 4
<!--[if gt IE 5]><i></i><![endif]-->

如果您对此部分感到困惑：

+(++v)+

它只是意味着在上下文中将''连接起来。增量运算符++用于< em> return v的递增值，因为在 v之前。如果它出现在v之后，则会在增量发生之前返回v的当前值。 Mozilla做的解释比我a better job：

此运算符递增（加1）它的操作数并返回一个值。如果使用postfix，后跟运算符操作数（例如，x ++），然后它在递增之前返回值。如果之前使用了运算符前缀操作数（例如，++ x），然后它递增后返回值。

因此创建的第一个条件注释始终为4.循环继续，直到div.getElementsByTagName('i')[0]不生成任何DOM元素，计算结果为false并强制循环退出。

Answer 3

此

<div><!--[if gt IE 6]><i></i><![endif]--></div>

有效地生成类似于

的DOM

<div><i></i></div>

在IE的版本中＆gt; 6.但是在早期版本和根本不是IE的浏览器中，它会生成

<div></div>

所以你输入“if gt IE version ”HTML并根据i元素是否是DOM的一部分，你可以弄清楚你是否在某个版本上IE的大于v。当您获得v元素存在i元素的值时，您就完成了！

请帮助我理解这段JavaScript代码段中的“while”循环

3 个答案: