О динамических свойствах

Что касается Windows Internet Explorer 8, динамические свойства считаются устаревшими и поддерживаются только для веб-страниц, показываемых в режиме IE7 или IE5. Браузер Microsoft Internet Explorer 5 предлагает простую в использовании возможность, которая позволяет авторам и разработчикам веб-сайтов значительно улучшить внешний вид и отображение веб-страниц. Используя мощные возможности динамических свойств, теперь можно объявлять значения свойств не только как константы, но и как формулы. Формулы, используемые в динамическом свойстве, могут ссылаться на значения свойств из других элементов, тем самым давая разработчикам исключительную гибкость при создании веб-страниц.

Важное замечание.  Динамические свойства (также называемые "выражениями CSS") больше не поддерживаются в Internet Explorer 8 и более новых версиях, в режиме IE8 и выше. Это решение было принято для соответствия стандартам, для производительности браузера и по соображениям безопасности; подробнее об этом написано в статье Блог IE под названием Конец выражений. Динамические свойства все же доступны в браузере Internet Explorer 8 в режиме IE7 или IE5. (Дополнительные сведения о режимах совместимости документов см. в статье Определение совместимости документов.) Поскольку браузер Internet Explorer 8 в режиме IE8 полностью соответствует стандарту каскадных таблиц стилей (CSS), уровня 2, редакции 1 (CSS2.1), в будущем уже не понадобится большая часть динамических свойств, созданных для компенсации недостатков, связанных с CSS, которые были в предыдущих версиях Internet Explorer. Другие динамические свойства, для более специализированного применения, по большей части можно заменить стандартным JavaScript.

Вот некоторые примеры того, что можно делать с помощью динамических свойств:

  • Создавать таблицу, которая подобно редактору электронных таблиц пересчитывает суммы, когда пользователь изменяет содержимое ячейки.
  • Позиционировать элементы относительно движущегося указателя мыши.
  • Перемещать элементы по таймеру.

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

Эта статья затрагивает следующие темы.

  • Преимущества динамических свойств 
  • Реализация динамических свойств 
  • Примечания о неявных зависимостях 
  • Связанные темы

Преимущества динамических свойств

Динамические свойства упрощают и минимизируют количество кода в документе. Разработчики могут использовать динамические свойства для реализации функциональности, которая ранее была возможна только с использованием скриптов. Это освобождает разработчиков от необходимости изучать программирование скриптов перед тем, как приступить к разработке страниц с продвинутыми функциями.

Динамические свойства подобны формуле, реализованной в электронной таблице. В редакторе электронных таблиц значение ячейки может быть константой или формулой. Формула может включать ссылки на любое количество других ячеек таблицы. Динамическое свойство может подобным образом ссылаться на другие свойства в том же самом документе.

Динамические свойства позволяют разработчикам описывать отношения между объектами, свойствами и переменными в терминах функций, вместо того, чтобы указывать явную последовательность шагов. Разработчикам нужно просто сосредоточиться на функциях, не следя постоянно за текущим состоянием документа.

Обработка событий может стать довольно сложной и неэффективной. Реализация обработчиков событий документа, структура которого не до конца ясна на этапе разработки (например, веб-страницы под управлением баз данных или страницы со связыванием данных), возможна только с восходящей маршрутизацией событий. В результате разработчики часто реализуют один глобальный обработчик в верху цепочки событий, чтобы обновлять все. С другой стороны, используя динамические свойства, можно автоматически определять минимальный и оптимальный пересчет свойств и вычислять только те выражения, которые действительно необходимо вычислить.

Реализация динамических свойств

Динамические свойства были представлены посредством четырех новых методов, кратко описанных в этом разделе, начиная с версии Internet Explorer 5 и далее.

  • Метод getExpression возвращает текущую формулу, используемую для динамического свойства.
  • Метод recalc позволяет разработчикам вызывать явным образом обновление значения динамического свойства.
  • Метод removeExpression удаляет формулы, установленные методом setExpression.
  • Метод setExpression указывает формулу для данного значения.

Формулы динамических свойств назначаются в скрипте с помощью метода setExpression. Их также можно назначать на месте, используя глобальное возможное значение expression в блоке style или в атрибуте STYLE.

Например, с помощью динамического HTML (DHTML) можно позиционировать объекты в зависимости от расположения и размеров других объектов. Следующие уравнения показывают примеры, как можно расположить объект в центре по горизонтали или по вертикали.

  • В центре по горизонтали:

    object.style.left=(document.body.clientWidth/2) - (object.offsetWidth/2);

  • В центре по вертикали:

    object.style.top=(document.body.clientHeight/2) - (object.offsetHeight/2);

После того, как позиция объекта установлена, его позиция в потоке структуры документа изменяется, если изменяется содержимое или размер клиентской области. В следующем примере динамические свойства используются для того, чтобы избавить разработчиков от необходимости обновлять значения позиций каждый раз, когда изменяются размеры клиентского окна. До появления Internet Explorer 5 приходилось использовать обработчик события onresize, чтобы отслеживать изменения в клиентской области и пересчитывать позиции вручную. Обратите внимание, что формулы те же самые, но реализованы они с помощью выражений.

В следующем примере показано, как устанавливать выражения на месте.

<DIV ID="oDiv"

  STYLE="background-color: #CFCFCF; position: absolute;

         left:expression(document.body.clientWidth/2-oDiv.offsetWidth/2);

         top:expression(document.body.clientHeight/2-oDiv.offsetHeight/2)">

Example DIV

</DIV>

Примечание  При установке выражений на месте можно использовать только Microsoft JScript.

В следующем примере показано, как устанавливать выражения с помощью метода setExpression.

<SCRIPT>

window.onload=fnInit;

function fnInit(){

   oDiv.style.setExpression("left",

      "document.body.clientWidth/2 - oDiv.offsetWidth/2"

   );

   oDiv.style.setExpression("top",

      "document.body.clientHeight/2 - oDiv.offsetHeight/2"

   );

   document.recalc(true);

}

</SCRIPT>

<DIV ID="oDiv"

  STYLE="background-color: #CFCFCF; position: absolute; top: 0; left: 0;"

Example DIV

</DIV>

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/expression1.htm

Примечание  В некоторых ранних версиях браузера Internet Explorer после использования метода setExpression или removeExpression объект style не обновляется до тех пор, пока не будет вызван метод recalc. Чтобы обеспечить обратную совместимость, после динамической модификации выражения следует всегда использовать метод recalc.

В некоторых случаях может потребоваться много дополнительных операций для выполнения новых вычислений, когда главнейший объект перемещается на новую позицию. Это становится очевидным, если обратить внимание на объекты, позиционируемые относительно других объектов.

Например, если четыре элемента DIV располагаются вокруг пятого элемента DIV, который, в свою очередь, размещается в центре экрана, а пользователь может его передвинуть, то обновление позиций четырех окружающих элементов DIV может занимать много времени. Кроме того, если позиции внешних элементов DIV включают еще и переменную, которую может изменить пользователь, то разработчику понадобится постоянно отслеживать значение этой переменной и потом, соответственно, обновлять позиции. Или же все это можно сделать гораздо проще, используя выражения.

Код следующего примера демонстрирует, как можно устанавливать выражения, используя переменные скрипта вместе с координатами и размерами другого объекта.

<STYLE>

.block {position: absolute; top: 100; left: 100; height: 75; width: 75;}

.block2 {position: absolute; top: 0; left: 0; height: 25; width: 25;}

</STYLE>

<SCRIPT>

window.onload=fnInit;

var iOffset=10;

function fnInit(){

   oDiv.style.left=document.body.clientWidth/2 - oDiv.offsetWidth/2;

   oDiv.style.top=document.body.clientHeight/2 - oDiv.offsetHeight/2;

   oBlock1.style.setExpression("top","

      (oDiv.style.pixelTop - iOffset

       - oBlock1.style.pixelHeight)

   ");

   oBlock1.style.setExpression("left","

      (oDiv.style.pixelLeft +

      (oDiv.style.pixelWidth/2 - oBlock1.style.pixelWidth/2))

   ");

}

</SCRIPT>

<DIV ID="oDiv" CLASS="block"></DIV>

<DIV ID="oBlock1" CLASS="block2"></DIV>

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/expression2.htm

При создании скриптов динамическое свойство может быть описано любым допустимым выражением на языке JScript или Microsoft Visual Basic Scripting Edition (VBScript) . Третий параметр метода setExpression можно использовать для идентификации скриптового языка, используемого во втором параметре; по умолчанию это JScript. Для встроенной реализации выражение должно быть написано на языке JScript. Когда пересчитывается значение выражения, идентификаторы в строке заменяются на значения реальных свойств на текущей странице.

Параметры setExpression сначала вычисляются обработчиком скриптового языка. При указании строковой константы в качестве значения параметра метода setExpression эту константу следует помещать в одиночные кавычки. Помещение значения в одиночные кавычки приводит к тому, что это значение вычисляется как строка. Например, следующий вызов setExpression не делает цвет фона объекта красным. Вместо этого он пытается установить цветом фона значение переменной, имеющей имя "red" ("красный").

object.style.setExpression("backgroundColor","red");

Чтобы позволить синтаксическому анализатору CSSинтерпретировать строку как цветовую константу "red", эту строку надо заключить в одиночные кавычки.

object.style.setExpression("backgroundColor","'red'");

Динамические свойства можно получать и удалять с помощью методов getExpression и removeExpression. Метод getExpression возвращает вариант, содержащий выражение, используемое для вычисления динамического свойства. Когда вызывается метод getExpression, это выражение пересчитывается. Выражения удаляются с помощью метода removeExpression. Использование этого метода — единственный способ удалять значения динамических свойств, установленные методом setExpression. Когда выражение удаляется, значение свойства остается равным последнему вычисленному значению этого выражения, и возвращается значение типа Boolean, показывающее, было ли удалено выражение.

Метод recalc используется для пересчета значений динамических свойств в документе. Этот метод очень полезен, потому что значения динамических свойств обновляются только для элементов и свойств, объявленных в формуле. Вызов метода recalc с параметром false(по умолчанию) произведет пересчет всех выражений в текущем документе, ссылающихся на свойства, которые были изменены с момента последнего пересчета. Вызов recalc(true) произведет пересчет всех выражений в текущем документе, независимо то того, изменялись ли значения свойств, на которые ссылаются выражения. После того, как значение динамического свойства было пересчитано, ссылки на это свойство будут получать новое вычисленное значение.

В следующем примере показано использование метода recalc для явного обновления значений динамических свойств, используемых для вращения объектов на странице.

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/orbits.htm

Примечания о неявных зависимостях

Неявные зависимости имеют отношение к свойствам, которые могут быть изменены по причине изменения других свойств. Например, свойство offsetWidth элемента зависит от свойства width и, возможно, даже от значения свойства height в таблице стилей.

В большинстве случаев разработчику нет нужды беспокоиться об этих зависимостях; браузер Internet Explorer 5 управляет большинством таких ситуаций автоматически. Это делается посредством сопоставления определенных свойств каноническому свойству в целях отслеживания зависимостей. Например, каноническим свойством для всех свойств width является offsetWidth. Зависимость от свойств clientWidth, width, posWidth, pixelWidth, currentStyle.width или width элемента img подразумевает зависимость от свойства offsetWidth.

Хотя браузер Internet Explorer автоматически управляет неявными зависимостями в наиболее очевидных случаях, все же бывают такие случаи, когда зависимость не настолько явная. Поскольку реальное свойство все-таки выдает уведомление об изменении своего значения, механизм пересчета обычно знает о необходимости повторно вычислить выражение. Однако циклические выражения, содержащие эти свойства, можно выявить только во время выполнения (а не тогда, когда выражение устанавливается в качестве значения свойства). Возможно, самая сложная зависимость — от свойства clientHeight элемента DIV. Конечное вычисленное значение свойства clientHeight элемента DIV зависит от значений свойства innerHTML, свойств margin и padding, а так же от значения свойства width.

Связанные темы