Нестандартное мышление с помощью ванильного JavaScript

[ad_1]
⭐
Нестандартное мышление с помощью ванильного JavaScript
За последние четыре или пять лет регулярного ведения блога и проведения исследований для других писательских проектов я наткнулся, вероятно, на тысячи статей о JavaScript.
За последние четыре или пять лет регулярного ведения блога и проведения исследований для других писательских проектов я наткнулся, вероятно, на тысячи статей о JavaScript.
Мне кажется, что большую часть этих статей можно разделить на две очень общие категории:
- jQuery;
- Теоретические и концептуальные статьи посвящены таким вещам, как IIFE, замыкания и шаблоны проектирования.
Да, я, вероятно, наткнулся на массу других статей, которые не попадают ни в одну из этих категорий, либо являются более конкретными. Но почему-то кажется, что большинство тех, кого действительно продвигают в сообществе, подпадают под одну из двух вышеперечисленных категорий.
Я думаю, что эти статьи великолепны, и я надеюсь, что мы увидим их больше. Но иногда самые простые функции JavaScript находятся прямо у нас под носом и мы просто не имели большого воздействия на них. Я говорю о нативных, более-менее кроссбраузерных функциях, которые уже некоторое время присутствуют в языке.
Дальнейшее чтение на SmashingMag:
- Полезные демонстрации функций jQuery для ваших проектов
- Развитие понимания зависимости
- 7 вещей в JavaScript, которые я хотел бы знать намного раньше в своей карьере
- Уменьшение масштаба методологии БЭМ для небольших проектов
Итак, в этой статье я не буду говорить о jQuery и не буду рассматривать концепции или шаблоны структурного кода. Вместо этого я собираюсь познакомить вас с некоторыми функциями чистого JavaScript, которые вы можете использовать уже сегодня и о которых, возможно, никогда раньше не задумывались.
вставить соседнийHTML()
Несколько лет назад Microsoft представила метод под названием insertAdjacentHTML()
как способ вставить указанную строку текста в формате HTML или XML в определенное место в модели DOM. Эта функция доступна в 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 и работает лучше.
И если вам интересно, почему этому до сих пор не уделялось много внимания, несмотря на то, что он хорошо поддерживается во всех используемых версиях IE, причина, вероятно, в том, что, как упоминалось в статье Mozilla Hacks, это не было добавлено в Firefox до версии 8. Поскольку все другие основные браузеры поддерживают это, а пользователи Firefox автоматически обновляются с версии 5, использовать его вполне безопасно.
Подробнее об этом методе:
- «insertAdjacentHTML()» в спецификации «Синтаксический анализ и сериализация DOM», WHATWG
- «Element.insertAdjacentHTML», Сеть разработчиков Mozilla
получитьBoundingClientRect()
Вы можете получить координаты и, соответственно, размеры любого элемента на странице, используя другой, менее известный метод, 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);
- Посмотреть демо.
Здесь мы нацелились на элемент с идентификатором box
и мы получаем доступ к трем свойствам getBoundingClientRect()
метод для #box
элемент. Вот краткое изложение шести довольно очевидных свойств, которые предоставляет этот метод:
top
На сколько пикселей верхний край элемента от самого верхнего края области просмотраleft
Сколько пикселей левый край элемента от самого левого края области просмотраright
Сколько пикселей правый край элемента от самого левого края области просмотраbottom
На сколько пикселей нижний край элемента от самого верхнего края области просмотраwidth
Ширина элементаheight
Высота элемента
Все эти свойства доступны только для чтения. И обратите внимание, что свойства координат (top
, left
, right
и bottom
) все относятся к верхнему левому углу окна просмотра.
Что насчет if/else
в примере сверху? IE 6–8 не поддерживает width
и height
характеристики; поэтому, если вам нужна полная кросс-браузерная поддержка для них, вам придется использовать offsetWidth
и/или offsetHeight
.
Как с insertAdjacentHTML()
несмотря на отсутствие поддержки width
и height
этот метод поддерживается в IE с древних времен, и он поддерживается везде, где это применимо, так что его довольно безопасно использовать.
Здесь я кое-что уступлю: получение координат элемента с использованием значений на основе смещения (таких как offsetWidth
) на самом деле быстрее, чем использование getBoundingClientRect()
. Обратите внимание, однако, что значения, основанные на смещении, всегда будут округляться до ближайшего целого числа, тогда как getBoundingClientRect()
свойства будут возвращать дробные значения.
Для получения дополнительной информации:
- «Element.getBoundingClientRect», сеть разработчиков Mozilla.
- «getBoundingClientRect — это круто», — Джон Резиг.
API
Если вы когда-либо манипулировали элементами на лету с помощью JavaScript, то вы, вероятно, использовали такие методы, как createElement
, removeChild
, parentNode
и сопутствующие функции. Таким же образом вы можете манипулировать HTML-таблицами.
Но вы можете не осознавать, что существует очень специфический API для создания HTML-таблиц и управления ими с помощью JavaScript, и он очень хорошо поддерживается браузерами. Давайте кратко рассмотрим некоторые методы и свойства, доступные в этом API.
Все следующие методы доступны для использования в любом HTML-коде. table
элемент:
insertRow()
deleteRow()
insertCell()
deleteCell()
createCaption()
deleteCaption()
createTHead()
deleteTHead()
И тогда есть следующие свойства:
caption
tHead
tFoot
rows
rows.cells
С помощью этих функций мы можем создать целую таблицу, включая строки, ячейки, заголовок и содержимое ячейки. Вот пример:
var table = document.createElement('table'),
tbody = document.createElement('tbody'),
i, rowcount;
table.appendChild(tbody);
for (i = 0; i <= 9; i++) {
rowcount = i + 1;
tbody.insertRow(i);
tbody.rows[i].insertCell(0);
tbody.rows[i].insertCell(1);
tbody.rows[i].insertCell(2);
tbody.rows[i].cells[0].appendChild(document.createTextNode('Row ' + rowcount + ', Cell 1'));
tbody.rows[i].cells[1].appendChild(document.createTextNode('Row 1, Cell 2'));
tbody.rows[i].cells[2].appendChild(document.createTextNode('Row 1, Cell 3'));
}
table.createCaption();
table.caption.appendChild(document.createTextNode('A DOM-Generated Table'));
document.body.appendChild(table);
- Посмотреть демо.
Приведенный выше сценарий сочетает в себе некоторые обычные базовые методы DOM с методами и свойствами HTMLTableElement
API. Тот же самый код, написанный без табличного API, может быть значительно сложнее и, следовательно, его труднее читать и поддерживать.
Опять же, эти функции, связанные с таблицами, поддерживаются начиная с IE 7 (и, возможно, ранее) и везде, где это применимо, поэтому не стесняйтесь использовать эти методы и свойства там, где вы считаете нужным.
Для получения дополнительной информации:
- «HTMLTableElement», Сеть разработчиков Mozilla
- «Табличные данные» в спецификации «HTML», WHATWG
Подведение итогов
Это обсуждение конкретных нативных функций JavaScript было своего рода напоминанием. Мы можем легко привыкнуть к особенностям языка, который хорошо знаем, не углубляясь в синтаксис языка в поисках более простых и удобных в сопровождении способов решения наших проблем.
Так что время от времени смотри внутри коробка, так сказать. То есть исследуйте все, что может предложить ванильный JavaScript, и старайтесь не слишком полагаться на плагины и библиотекичто может излишне раздуть ваш код.
(Кредиты изображения на первой странице: nyuhuhuu)
(всегда)
[ad_2]
Source: https://smashingmagazine.com
Заключение
Вы ознакомились с статьей — Нестандартное мышление с помощью ванильного JavaScript
Пожалуйста оцените статью, и напишите комментарий.