Max Home IndustryЗачем ограничиваться тем, как HTML5 и CSS могут выполнять адаптивный макет? Почему бы не перехватить весь DOM до его рендеринга или загрузки ресурсов, обработать его по своему усмотрению, а затем и только потом отрендерить? В этом вся суть Capturing.
Недавнее сообщение в блоге Mozilla предупредило нас об действительно интересном и, возможно, новаторском подходе к работе с HTML. Веб-приложения часто называют приложениями HTML5 или, в лучшем случае, приложениями HTML5 / JavaScript, но большинство из нас слишком хорошо понимают, что ведущей собакой во взаимоотношениях является JavaScript.
Веб-приложение — это приложение JavaScript, которое вынуждено использовать HTML в качестве языка разметки для пользовательского интерфейса. Хотя HTML развивается, он на самом деле не делает это достаточно быстро для тех умных вещей, которые мы можем создать с помощью кода. Есть некоторые подходы, которые заставляют HTML брать на себя подчиненную роль, но они часто имеют недостатки, такие как использование нестандартных атрибутов и в основном потеря семантических аспектов HTML. Конечно, вы можете возразить, что семантические аспекты HTML неуместны ни в чем другом, кроме довольно статичной веб-страницы, которая представляет некоторый текст и, возможно, несколько изображений. Даже в этом случае есть потенциальные проблемы — попробуйте создать веб-страницу, которая загружает именно те ресурсы, которые подходят клиенту, в котором она находится.
Обычно ресурсы начинают загружаться вместе с остальным контентом, и если вы добавите функцию JavaScript, которая определяет, какие ресурсы действительно необходимы, обычно уже слишком поздно что-либо с этим делать. Например, как загрузить растровое изображение с правильным разрешением, которое соответствует разрешению дисплея клиента? В будущем ответом может быть использование предложенного W3C элемента изображения, который поддерживает селекторы мультимедиа и загружает только то разрешение, которое соответствует мультимедиа клиента.
Например:
Существуют способы реализации схем для загрузки изображений с правильным разрешением с использованием, например, атрибутов данных и JavaScript для установки свойства src тега изображения на правильное имя файла, но все они имеют недостатки — в основном это изменение использования HTML.
Capturing — это новая библиотека с открытым исходным кодом, которая выполняет ряд вещей, которые, как вы могли предположить, были невозможны для JavaScript. Это основа, на которой построена последняя версия Mobify.js.
Во-первых, он изменяет стандартную страницу при загрузке в клиент, чтобы остановить загрузку всех ресурсов. То есть страница загружает весь HTML, но изображения и ресурсы не загружаются, и страница не отображается. Затем он предоставляет DOM страницы как объект для любого кода JavaScript, который вы хотите написать. JavaScript может модифицировать DOM обычным способом, а затем, наконец, он может попросить Capturing отобразить DOM обратно на страницу.
Короче говоря, захват дает вам доступ к DOM страницы до того, как HTML будет отрисован или какие-либо ресурсы загружены.
Например, если у вас есть тег изображения на странице, то Capturing будет представлять этот тег изображения в DOM, который он передает вашему коду. Однако никакие файлы, указанные в атрибуте src, загружаться не будут. Ваш код может изменять атрибуты src, чтобы ссылаться на файлы с соответствующим разрешением для клиента, а затем отображать DOM на странице.
Это выводит нас далеко за рамки того гибкого дизайна, которого можно достичь с помощью текущих стандартов HTML5 / CSS 3. Фактически, это переводит нас на другой уровень использования HTML в качестве языка разметки — тот, который можно настраивать до того, как с ним начнет работать стандартный движок рендеринга.
Примеры на сайте Mobify.js должны дать вам некоторые идеи, но во многих отношениях его примеры консервативны. Вы могли бы пойти дальше этого принципа, расширив HTML5 любым способом — изобрести свой собственный язык разметки для конкретной предметной области и затем обработать его до стандартного HTML перед его рендерингом. Благодаря этой технологии веб-страница освобождается от HTML.
Конечно, вы можете не захотеть этого делать, поскольку любой браузер с отключенным JavaScript не сможет правильно отобразить страницу — однако могут быть даже приложения для такого поведения.