[Оглавление]

Информационные технологии в расчетах динамики твердого тела. П.з. №10.
Составление комплекта отчетной документации

Цель лабораторной работы – приобретение навыка составления отчетной документации в html-формате. Знакомство с инструментами проверки качества, форматирования и публикации программного кода (JavaScript и HTML). Занятие проводиться в компьютерном классе, в течение двух академических часов. Преподаватель рассказывает об инструментах. Демонстрирует порядок их использования и настройки. Вместе с преподавателем, под диктовку, студенты применяют инструменты в отношении образцов своего кода. Дома, самостоятельно, студенты совершенствуют отчеты по всем лабораторным работам и курсовой работе.

Повышение качества JavaScript-кода

Языков программирования, совершенных во всем, не бывает. Если оценивать качественные показатели языков программирования, то JavaScript можно оценить максимум на троечку (C# – 5, C++ – 4). С другой стороны, компиляторы для языка JavaScript самые устойчивые и лучшие. Они "прощают" ошибки синтаксиса, толерантны к устаревшим и неудачным конструкциям языка ("eval is evil"), имеют анализаторы способные исправлять ошибки программиста. Но это не значит, что этим нужно злоупотреблять. Для любого языка программирования существуют анализаторы качества кода. Один из лучших анализаторов JavaScript-кода – это бесплатно доступный online-сервис JSLint [1]. Достаточно открыть браузер и скопировать в форму фрагмент JavaScript-кода. Сервис JSLint выполняет анализ на машине клиента и не загружает код на свой сервер.

Стандартизация стиля JavaScript-кода

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

if (условие)
{
    действие1;
}
else
{
    действие2;
}
if (условие) {
    действие1;
}
else {
    действие2;
}
if (условие) {
    действие1;
} else {
    действие2;
}

При всей вольности, которая дозволительна в отношении стиля написания программ, все профессиональные редакторы текста (PSPad, AkelPad, Notepad++, Plunker editor) и все интегрированные среды разработки (включая браузеры) имеют либо собственный инструмент коррекции стиля кода (MS Visual Sudio), либо соответствующие плагины. Для коррекции стиля JavaScript-кода можно рекомендовать либо IDE браузера (F12), либо бесплатно доступный сервис Online JavaScript beautifier [2]. В последнем случае достаточно открыть в браузере сайт сервиса и скопировать в форму фрагмент JavaScript-кода. Сервис форматирует код на машине клиента и не загружает его на свой сервер.

Публикация JavaScript-кода в HTML-документе

Код любой программы разрабатывается для того, чтобы та или иная ЦВМ выполнила его и решила требуемую задачу. Документация к коду нужна, чтобы её прочитал человек. ЦВМ не нуждается в особом оформлении кода. А для человека код нужно оформить (обеспечить цветовую подсветку). Любое форматирование требует дополнительных трудовых усилий. Их можно свести к минимуму, если при составлении документации использовать библиотеку highlight.js [3]. Её необходимо подключить к html-документу. Фрагменты документируемого кода размесить внутри html-тегов с особым идентификатором. И заменить в образцах кода три конфликтующих символа их именными последовательностями (левую треугольную скобку, правую треугольную, и символ "&"). После загрузки такого документа, браузер запустит библиотеку (программу) highlight.js. Библиотека просканирует документ, в образцах кода найдёт зарезервированные слова языка программирования, автоматически добавит новые теги и правила для их отображения.

Минификация / сжатие / обфускация JavaScript-кода

Исходный код программы на языке JavaScript предназначенный для исполнения браузером передается по каналам связи. Чем меньше объем кода, тем лучше. Минифицировать код можно за счет удаления комментариев, идущих друг за другом пробелов, табуляторов, символов конца строк, заменой длинных имен переменных и функций на короткие, и пр. Написать хороший минификатор JavaScript-кода непросто. И лучшим инструментом является Microsoft Ajax Minifier [4]. Если код минифицирован, но в программе много обращений к объектной модели браузера, то для дальнейшего уменьшения размера кода можно применить алгоритм сжатия (архивирование без потерь данных) [5]. Компрессия JavaScript-кода опирается на осуждаемую специалистами функцию языка eval. И во многих сценариях использования является излишней, поскольку весь передаваемый по сетям трафик сжимается либо сервером, либо сигнальными процессорами модемов (на аппаратном уровне). При разработке коммерческих решений нередко используют тот или иной инструмент обфускации (запутывания) кода. А поскольку минифицированный и запутанный код выглядят одинаково непонятно, эти инструменты нередко путают. Следует принимать во внимание, что обфускация может приводить к увеличению размера кода.

Проверка HTML-кода на соответствие стандарту

Стандарты для web-платформы разрабатывают ведущие специалисты разных фирм, которые объединились и создали World Wide Web Consortium (W3C). Кроме стандартов консорциум поддерживает соответствующие инструменты проверки документов. Проверка HTML-кода выполняется на сервере [6]. Протокол результата выдается в окне браузера. Передать код на проверку можно тремя способами: скопировать его в форму ввода данных, загрузить на сервер файл с диска, или указать адрес размещения в сети.

Обработка HTML-кода утилитой Tidy

Может показаться, что инструментов проверки HTML-кода на соответствие стандартам множество. Они присутствуют в любом профессиональном редакторе текста. Но это не так. И на сервере у W3C-консорциума, и в редакторах текста, и на любом http-сервере (Apache, nginx, IIS) код проверяет / реформатирует консольная утилита Tidy [7]. У неё множество версий и она перенесена на разные платформы. Утилита требует конфигурирования. Может не только указывать на ошибки, но и исправлять их. Нужно знать, что все ошибки за одну попытку утилита исправить не может. Но применяя её несколько раз, с разными настройками, в отношении одного файла, и ошибки исправить можно и поднять качество кода до нового стандарта. Эффективен сценарий использования, когда утилита запускается в пакетном режиме для одномоментной обработки сотен файлов имеющихся на информационном ресурсе. Достаточно часто имеет смысл комбинирование возможностей утилиты с возможностью редакторов текста осуществлять поиск и замену текста в файлах с помощью регулярных выражений [9], что позволяют сделать редактор PSPad [8] и Microsoft Visual Studio. Перед выдачей html-документов с http-сервера целесообразно реструктурировать их так, чтобы каждый блочный тег (заголовок, абзац, элемент списка, и пр.) занимал одну строку без лишних пробелов и переносов.

Литература

  1. Douglas Crockford. JSLint – the JavaScript code quality tool // – URL: http://jslint.com (дата обращения: 29.11.2017).
  2. Einar Lielmanis, Liam Newman. Online JavaScript beautifier // – URL: http://jsbeautifier.org (дата обращения: 29.11.2017).
  3. Ivan Sagalaev, Jeremy Hull, Oleg Efimov. highlight.js – syntax highlighting for the Web // URL: https://highlightjs.org (дата обращения: 29.11.2017).
  4. Ron Logan, Eugene Chigirinskiy, Rafael Correa, Kristoffer Henriksson, Marcin Dobosz. Microsoft Ajax Minifier // URL: http://ajaxmin.codeplex.com (дата обращения: 29.11.2017).
  5. Dean Edwards. A JavaScript Compressor // URL: http://dean.edwards.name/packer (дата обращения: 29.11.2017).
  6. The W3C markup validation service // – URL: https://validator.w3.org (дата обращения: 29.11.2017).
  7. Tidy – the granddaddy of HTML tools // – URL: http://www.html-tidy.org (дата обращения: 29.11.2017), – URL: http://tidy.sourceforge.net/docs/quickref.html (дата обращения: 29.11.2017).
  8. Jan Fiala. PSPad – a freeware text editor // – URL: http://www.pspad.com/ru (дата обращения: 29.11.2017).
  9. Александр Сергиенко. RegExp builder – конструктор регулярных выражений // – URL: http://regexpres.narod.ru/calculator.html (дата обращения: 29.11.2017).

14.09.2017