Пожалуйста, помогите мне понять цикл "while" в этом фрагменте JavaScript - PullRequest
Новая
       3

Пожалуйста, помогите мне понять цикл "while" в этом фрагменте JavaScript

4 голосов
/ 03 июня 2011

Я видел такой фрагмент кода для определения IE в JavaScript с помощью условных комментариев. 

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;

}());

Выше приведена документальная (и немного улучшенная) версия Пола Ирриша на фрагменте Джеймса Падолси Я публикую комментированную версию, чтобы вы знали, что мне, возможно, понадобится более простое объяснение.

Мне бы очень хотелось знать , что происходит внутри цикла while . Я этого не понимаю

Ответы [ 3 ]

2 голосов
/ 03 июня 2011

(Предполагая, что я не запутал это ужасно) цикл 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.

Мы можем точно узнать, что такое выражение в JavaScript из MDC:

выражение - любой допустимый набор литералов, переменных, операторов и выражений, который оценивает одно значение;значение может быть числом, строкой или логическим значением.

Концептуально существует два типа выражений: те, которые присваивают значение переменной, и те, которые просто имеют значение.Например, выражение x = 7 является выражением, которое присваивает x значение семь.Это выражение само по себе оценивает до семи.В таких выражениях используются операторы присваивания .С другой стороны, выражение 3 + 4 просто равно семи;он не выполняет назначение.Операторы, используемые в таких выражениях, называются просто операторами .

Если вы чувствуете себя смелым, вы также можете проверить спецификацию языка ECMA-262 , в частности следующие разделы:

  • 11 Выражения, особенно 11.14 Оператор запятой (,)
  • 12.6.2 Заявление while

Извините, я не могу предоставить прямые ссылки, так как все это внутри PDF.

1 голос
/ 03 июня 2011

v хранит номер версии IE.Он инициализируется значением 3, поэтому цикл создает при каждой итерации строки, подобные приведенным ниже: 

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

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

Если вас смущает эта часть: 

+(++v)+

это просто означает, что в контекстеобъединить '<!--[if gt IE ' с увеличенным значением v, а затем объединить вновь сформированную строку с ']><i></i><![endif]-->' Оператор увеличения ++ действует на возвращать увеличенное значение v, поскольку предшествует v.Если оно пришло после v, текущее значение v будет возвращено до того, как произойдет увеличение.Mozilla лучше объясняет, чем я:

Этот оператор увеличивает (добавляет единицу) свой операнд и возвращает значение.Если используется постфикс, с оператором после операнда (например, x ++), то он возвращает значение до приращения.Если используется префикс с оператором перед операндом (например, ++ x), то он возвращает значение после увеличения.

, таким образом, первый созданный условный комментарий всегда равен 4. Цикл продолжается до div.getElementsByTagName('i')[0]не возвращает никакого элемента DOM, оценивается как false и вынуждает цикл завершиться.

0 голосов
/ 03 июня 2011

Этот 

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

эффективно создает DOM, который выглядит примерно как 

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

в версиях IE> 6. Но в более ранних версиях и браузерах, которые не поддерживают IEвсе, он производит 

<div></div>

Таким образом, вы вставляете этот HTML-код "if gt IE version " и в зависимости от того, является ли элемент i частью DOM, вы можете выяснитьиспользуете ли вы версию IE, которая больше v.Когда вы получите значение v, где существует элемент i, все готово!

...