Мы часто видим довольно много дискуссий о методах оптимизации для различных областей разработки интерфейса. Одна из областей, которая, вероятно, больше игнорируется, чем HTML.
Я, конечно, не член лагеря «чистой, не презентационной разметки». Но я думаю, что необходима последовательность в разметке, особенно при работе с кодом, к которому многие разработчики будут обращаться.
В этой статье я расскажу об одном небольшом инструменте, который я недавно посетил и который, я думаю, многим командам разработчиков было бы неплохо рассмотреть возможность использования: HTML Inspector от Philip Walton.
Что такое HTML инспектор?
Как объясняет Филипп в README репо, это:
настраиваемый инструмент качества кода, который поможет вам (и вашей команде) написать лучшую разметку. Он направлен на то, чтобы найти баланс между бескомпромиссно строгим валидатором W3C и не иметь абсолютно никаких правил (к сожалению, для большинства из нас).
Хотя я несколько не согласен с утверждением Филиппа о том, что валидатор W3C является «бескомпромиссно строгим» (разве он не помнит XHTML?), Я, безусловно, согласен с тем, что многим командам разработчиков, скорее всего, не хватает набора логических внутренних стандартов, чтобы поддерживать их разметку обслуживаемой и своевременно.
После запуска HTML-инспектора вы получите ряд сообщений в консоли инструментов разработчика вашего браузера, в которых вы узнаете, какие проблемы в HTML-коде следует рассмотреть.
Вы можете увидеть пример вывода HTML Inspector на изображении выше, который взят из теста, который я провел на одном из моих старых проектов , который, как я знал, вероятно, будет иметь некоторую сомнительную разметку.
Установить и запустить HTML Inspector
Если вы проводите тестирование на своем непроизводственном коде, вы можете просто включить скрипт HTML Inspector на любой из ваших страниц внизу, а затем запустить его, вызвав основной метод. Ниже приведено краткое описание методов установки, а затем я объясню еще лучший способ заставить его работать на любом веб-сайте, удаленном или локальном.
Для установки и использования через командную строку вы можете использовать NPM, для чего требуется PhantomJS :
npm install -g html-inspector Или вы можете установить с Bower для использования в браузере:
bower install html-inspector
Если вы решите загрузить инструмент вручную, все, что вам нужно сделать, это получить копию html-inspector.js из корневого каталога проекта, включая ее в нижней части документа после загрузки всех других сценариев. Затем вам нужно выполнить его, как показано ниже:
<script src="js/html-inspector.js"></script> <script> HTMLInspector.inspect(); </script>
Но если вы не настраиваете скрипт, вам не нужно делать ничего из вышеперечисленного. Вы можете запустить его на любом удаленном или локальном веб-сайте за несколько секунд в любом браузере, на котором установлены инструменты разработчика.
Откройте консоль инструментов разработчика вашего браузера и выполните следующие команды:
var htmlInsp = document.createElement('script'); htmlInsp.src = '//cdnjs.cloudflare.com/ajax/libs/html-inspector/0.8.1/html-inspector.js'; document.body.appendChild(htmlInsp);
После того, как они выполнены, вы можете запустить следующее в консоли:
HTMLInspector.inspect();
Примечание. Как указано в комментариях, вам нужно выполнить последнюю строку отдельной командой после выполнения первых трех строк, чтобы это работало.
Этот скрипт использует код HTML Inspector, размещенный на cdnjs .
На самом деле, я сделаю это еще проще для вас; Вы можете создать букмарклет с кодом в этом Gist . Как только вы добавите букмарклет на панель закладок, запустите его на любом веб-сайте, откройте консоль и запустите HTMLInspector.inspect() .
Попробуйте его в действительно старом проекте или почти на любом сайте WordPress, если вы хотите увидеть предупреждения, которые он выдает по умолчанию.
Конечно, если вы решите настроить HTML Inspector, вам нужно скачать его и запустить собственную настроенную версию. Поэтому, как только у вас есть готовая версия, вы можете сделать то же, что я описал выше, но с измененным исходным URL.
Инспектор HTML: Великие Части
Вот некоторые из замечательных вещей об этом инструменте:
- Это единственный в своем роде; Я не видел ни одного еще работающего инструмента, сравнимого с точки зрения HTML-линтинга. (Если вы знаете один, дайте мне знать в комментариях!)
- Как и другие подобные инструменты для CSS и JavaScript, вы можете настроить его так, чтобы он предупреждал вас только о тех правилах, которые вам нравятся.
- Вы можете написать свои собственные правила, что, вероятно, является лучшей из всех возможностей.
- Никаких зависимостей (обратите внимание, что в оригинальном сообщении блога говорится, что он требует jQuery, но это было исправлено примерно через неделю).
- Он работает на реальном DOM в браузере, а не только на исходном статическом HTML. Это здорово, потому что позволяет вам тестировать разметку, которая динамически добавляется и изменяется другими скриптами на странице.
Отличный инструмент для команд разработчиков
Как объясняет Филипп в вышеупомянутом посте по запуску, большое преимущество использования HTML Inspector предоставляется командам, в которых может быть несколько разработчиков, которые присоединяются на короткий промежуток времени (например, стажеры и новые сотрудники).
Итак, представьте себе нового, менее опытного разработчика, работающего над вашими проектами в течение трех месяцев, в качестве летнего стажера или еще чего-нибудь. Обычно этому сотруднику может потребоваться целых три месяца, чтобы привыкнуть к написанию кода. Но с HTML Inspector все, что вам нужно сделать, — это настроить ваши собственные правила. Затем новому разработчику просто нужно запустить HTML Inspector с вашими пользовательскими правилами, затем прочитать предупреждения в консоли и внести необходимые изменения в его код.
Изменение настроек по умолчанию
Существует два способа настройки HTML Inspector: изменение значений по умолчанию в настройках конфигурации или (как уже упоминалось) написание собственных правил. Давайте сначала посмотрим на настройки по умолчанию.
Запуск HTMLInspector.inspect() с настройкой по умолчанию HTMLInspector.inspect() инструмент со значениями по умолчанию. Метод inspect() принимает необязательный объект config для их изменения. Вы можете переопределить значения, выполнив что-то вроде этого:
HTMLInspector.inspect({ domRoot: "main", excludeRules: ["validate-elements", "validate-attributes"], excludeElements: ["svg", "span", "input"], onComplete: function(errors) { errors.forEach(function(error) { console.warn(error.message, error.context) } } });
Здесь я решил не проверять элементы или атрибуты и сказал инструменту исключить некоторые элементы из проверки.
Для получения полной информации об изменении этих значений по умолчанию ознакомьтесь с соответствующими разделами в файле README на репозитории GitHub:
Написание пользовательских правил
Как уже упоминалось, вы можете не согласиться с предупреждениями инспектора HTML по умолчанию. Если это так, или если вы хотите добавить к ним, самая мощная часть инструмента является возможность писать свои собственные правила.
Вы можете сделать это, используя следующую структуру:
HTMLInspector.rules.add(name, [config], func)
В README приведен пример команды разработчиков, которые ранее использовали два конкретных пространства имен атрибута data-* , которые теперь внутренне устарели в пользу другого метода. Вот как будет выглядеть код:
HTMLInspector.rules.add( "deprecated-data-prefixes", { deprecated: ["foo", "bar"] }, function(listener, reporter, config) { // register a handler for the `attribute` event listener.on('attribute', function(name, value, element) { var prefix = /data-([az]+)/.test(name) && RegExp.$1 // return if there's no data prefix if (!prefix) return // loop through each of the deprecated names from the // config array and compare them to the prefix. // Warn if they're the same config.deprecated.forEach(function(item) { if (item === prefix) { reporter.warn( "deprecated-data-prefixes", "The 'data-" + item + "' prefix is deprecated.", element ) } }) } ) });
(Обратите внимание, что Филипп сумасшедший и поэтому не использует точки с запятой в конце строк!)
Я только поцарапал поверхность того, что возможно с пользовательскими правилами. Я надеюсь найти время, чтобы глубже вникнуть в пользовательские правила, и, возможно, напишу об этом. В то же время вы можете проверить соответствующие части README для получения дополнительной информации:
Вывод
Как и во многих инструментах разработчика, для работы HTML Inspector вам потребуется современный браузер (например, браузер должен поддерживать методы ES5, CSSOM и console.warn() ).
Как уже упоминалось, я не видел слишком много подобных инструментов (кроме обычного валидатора). Был общий инструмент HTML Lint, который, похоже, исчез. Но, кроме этого, я не могу вспомнить другой инструмент, подобный этому, и, конечно, не такой, который бы настраивался и работал на живом DOM.
Если вы опробовали HTML Inspector или знаете другой подобный инструмент, сообщите нам об этом в обсуждении.