Главная → Программирование → by

Взгляните за рамки с Vanilla JavaScript.

В течение последних четырех или пяти лет я регулярно вёл блог и проводил исследования для других проектов. За это время мне довелось столкнуться с тысячами статей о JavaScript.

Мне, кажется, что основную массу этих статей условно можно разделить на две очень общие категории:

  1. jQuery;
  2. Теоретические и концептуальные статьи ориентированные на такие вещи, как IIFEs, Closures и проектные шаблоны.

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

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

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

insertAdjacentHTML()

Несколько лет назад компания Microsoft представила функцию под названием insertAdjacentHTML(), которая позволяет вставить заданную строку текста в качестве HTML или XML в определенное место в DOM (сокр. от Document Object Model — стандарт консорциума WWW, определяющий способы манипулирования объектами и изображениями на одной веб-странице). Эта функция стала доступна в Internet Explorer (IE), начиная с версии 4. Давайте посмотрим, как она работает.

Предположим, у вас есть следующий HTML код:

<div id="box1">
    <p>Some example text</p>
</div>
<div id="box2">
    <p>Some example text</p>
</div>

И предположим, что вы хотите вставить новый фрагмент HTML кода между #box1 и #box2. Вы можете довольно легко сделать это с помощью функции insertAdjacentHTML():

var box2 = document.getElementById("box2");
box2.insertAdjacentHTML('beforebegin', '<div><p>This gets inserted.</p></div>');

При том, что сгенерированный DOM заканчивается так:

<div id="box1">
    <p>Some example text</p>
</div>
<div><p>This gets inserted.</p></div>
<div id="box2">
    <p>Some example text</p>
</div>

Функция insertAdjacentHTML()содержит два параметра. Первый определяет то место, где вы хотите разместить HTML код относительно целевого элемента (в данном случае это элемент #box2). Это может быть одно из значений, которые перечислены в следующих четырех строках:

  • beforebegin - фрагмент HTML кода будет размещён непосредственно перед элементом, как сиблинг (брат или сестра).
  • afterbegin - фрагмент HTML кода будет размещён внутри элемента, перед первым дочерним элементом.
  • beforeend - фрагмент HTML кода будет размещён внутри элемента, после последнего дочернего элемента.
  • afterend - фрагмент HTML кода будет располагаться непосредственно после элемента, как сиблинг.

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

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

Функция insertAdjacentHTML(), как отмечено в публикации на Mozilla Hacks имеет, несколько преимуществ по сравнению с обычной функцией innerHTML(): она не затрагивает существующие элементы DOM и лучше выполняется.

Если вам интересно, почему эта функция до сих пор оставалась без внимания, несмотря на то, что она хорошо поддерживается всеми версиями Internet Explorer могу сказать, что вероятная причина, как уже упоминалось в статье на Mozilla Hacks, она никогда не входила в состав функциональных возможностей Firefox до версии 8. Поскольку все другие основные браузеры поддерживают эту функцию, пользователи Firefox прошли автоматического обновление, начиная с версии 5. Таким образом, использование этой функции полностью безопасно.

Более подробно об этом методе:

getBoundingClientRect()

У вас есть возможность получить координаты и, соответственно, размеры любого элемента на странице с помощью ещё одной мало известной функции под названием getBoundingClientRect().

Вот пример того, как она может быть использована:

var box = document.getElementById('box'),

    x, y, w;


x = box.getBoundingClientRect().left;

y = box.getBoundingClientRect().top;


if (box.getBoundingClientRect().width) {

  w = box.getBoundingClientRect().width; // for modern browsers

} else {

  w = box.offsetWidth; // for oldIE

}


console.log(x, y, w);

 ... 

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров



 		
		
				
		
				

			  Главная   →  Программирование  →   by

Comments are closed.