Форматирование кода. Что такое красивый код, и как его писать? Используйте сокращенные виды математических и строковых операций
Доброго времени суток всем, кто сейчас читает данную публикацию. Сегодня я хочу рассказать вам об одном из инструментов сайтостроения, без которого ни один веб-ресурс не может обойтись. Это меню сайта, или как еще говорят карта сайта. На сегодняшний день существует безграничное множество видов и подвидов меню.
Разработчики интернет-магазинов, блогов, обучающих сервисов и других ресурсов экспериментируют и создают все более новые и необычные карты. После прочтения статьи вы узнаете, на какие основные группы делятся все виды панелей навигации, сможете опробовать каждую из них, а также научиться писать код меню для сайта html. А теперь перейдем непосредственно к делу!
Инструменты для создания панели навигации
В языке разметки существует несколько способов создания меню. Основная их концепция заключается в использовании ненумерованного списка. Таким образом, в привычном для нас html 4 разработчики прописывают на станице теги
- и
- .
Как оговаривалось в предыдущих публикациях, парный элемент
- создает маркированный список, а
- — один элемент списка. Для наглядности давайте напишем код простого меню:
Навигация Навигация сайта
- Главная
- Новости недели
- Технологические достижения
- Чат
Однако с появлением платформы язык разметки пополнился дополнительными тегами. Именно поэтому меню современных веб-сайтов создается при помощи специального тега < menu> . В использовании этот элемент ничем не отличается от маркированных списков.
Вместо единицы < ul> прописывается < menu> . Однако существенные различия появляются если судить со стороны работы . Так, второй пример ускоряет работу поисковых программ и роботов в . При анализе структуры сайта они сразу понимают, что данный кусок кода отвечает за карту сайта.
Бывают горизонтальные, вертикальные и выпадающие меню. Иногда панель навигации оформляют в виде изображения. Так как сегмент технологий расширился, веб-сервисы делают адаптивными, т.е. структура страниц автоматически адаптируется под размер экрана девайсов. Рассмотрим же перечисленные группы меню.
Создадим-ка горизонтальную навигационную модель
Такой вид навигации наиболее популярен. При горизонтальном оформлении панели все пункты меню расположены в шапке страницы или в «подвале» (иногда навигационные элементы дублируются, отображаясь одновременно и сверху, и снизу).
В качестве примера мы создадим горизонтальную панель, пункты меню которого будут оформлены при помощи css (каскадных таблиц стилей), а точнее трансформированы. Так, каждый отдельный элемент будет находится в скошенном прямоугольнике. Заинтриговал?
Для трансформации мы используем свойство css под названием transform . Чтобы указать трансформацию, используется встроенная функция skewX , в которой угол наклона указывается в градусах.
К сожалению, каждый браузер работает с данным свойством по-своему, не смотря на прописанные стандарты. Поэтому для обозначения того или были созданы специальные префиксы:
- -ms- (Internet Explorer)
- -o- (Opera)
- -webkit- (Chrome, Safari)
- -moz- (Firefox)
А теперь полученные знания применим к написанию примера.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 <a href="/ochen-prostaya-gorizontalnaya-panel-navigacii-chto-znachit/">Горизонтальная панель</a> Горизонтальная панель А теперь вертикально. Я сказал вертикально!
Для второй программы используем за основу предыдущий код. Я захотел, чтобы пункты моего вертикального меню были не скошены, а с округленными углами.
Для этого я воспользовался еще одним свойством css border-radius .
В предыдущих статьях я уже работал с данным параметром, так что сложностей с пониманием его функционирования, думаю, не возникнет.
Вертикальная панель Как вы уже заметили, главное изменение в этом коде – это отсутствие объявления display: inline-block , который собственно и отвечал за горизонтальное расположение пунктов навигации.
Подпункты в меню: выпадающий список
Мы с вами рассмотрели основные группы навигационных панелей, однако существует еще несколько разновидностей или лучше сказать дополнений.
Иногда возникают такие ситуации, когда некоторые из пунктов дополняют основные. В этом случае не обойтись без выпадающих списков. Они создаются путем преобразований инструментами css.
Ниже я прикрепил код небольшой программки, в которой реализуется данный подход.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 Выпадающий список Выпадающий список В данном примере я разделил единицы меню на два класса:
- m-menu
- s-menu
Первый класс отвечает за основное меню, а s-menu – за подменю.
В коде можно встретить такой прием, как .m-menu > li:hover или .m-menu > li.
Так, при помощи:hover указывается, как будет вести себя элемент при наведении на него курсора.
При этом знак «>» видоизменяет селектор так, чтобы блочно-строчными были только объекты, относящиеся к верхнему уровню.
Изначально подменю было задано display: none , что оповещает обработчик скрывать данный объект. После наведения на элемент навигации с указанием hover , значение свойства display меняется на block и поэтому открывается выпадающий список.
Как видите, реализация такого приема очень простая.
Теперь вы освоили основные виды навигационных панелей и можете самостоятельно их видоизменять, дополнять и модернизировать. Если вам понравилась моя статья, то подписывайтесь на обновления блога и делитесь источником знаний с друзьями и коллегами. Пока-пока!
С уважением, Роман Чуешов
Прочитано: 1010 раз
Чтобы все дальнейшие описание было Вам более понятным, скачайте этот PDF фаил или просто откройте в новой вкладке Вашего браузера это изображение .
Иногда интересно обратить внимание на то, всегда ли в красивом внешне вебсайте использован "красивый" html код, т.е. точный, структурированный, безошибочный. Html код это своеобразное искусство. Он не такой развитый и многообразный, как динамический язык, и тем не менее может быть написан довольно изящно и мастерски.
Вот список тех особенностей с помощью которых можно определить написан ли код с мастерством или нет.
1. DOCTYPE, определенный должным образом. Эта строка позволяет не только определить ваш код, но и "говорит" браузеру о том, как следует отобразить вашу страницу.
2. Опрятный раздел в тегах
Заголовок установлен. Кодировка объявлена. Таблицы стилей подключены. Скрипты подключены, а не написаны полностью.3. Присвоение ID вашему документу позволяет создавать свойства CSS, которые уникальны для каждой страницы. Например, вы можете захотеть, чтобы Ваш
тэг выглядел по-особенному, к примеру, на домашней странице. В таблице стилей CSS вы можете написать: #home h2 {}, чтобы достигнуть этого.
4. Чистое меню. Вы, наверно, часто встречались с тем, что в качестве меню используются списки. Это очень удобно, т.к. дает вам возможность контролировать его.
5. Заключение всего содержания страницы в главный тег
. Этот пункт даст вам возможность все контролировать. То есть вы сможете установить максимальную и минимальную ширину страницы.6. Важное нужно размещать в начале. Новости и важные события в коде должны следовать первыми, а меню, маловажное содержание следует размещать в конце.
7. "Включение" элементов сайта. Большинство элементов сайта повторяются на каждой странице, значит их нужно включать, с помощью php-команды include.
8. Код должен быть табулирован по разделам. Если каждый раздел кода будет выделен отступом, то структура кода будет намного понятнее. Код, который выровнен по левому краю трудно читать и понять.
9. Правильные заключительные теги . Исключите заключительные теги в непарных тегах, и проверьте, чтобы парные теги были закрыты.
10. Используйте теги заголовков . Использование заголовков необходимо, т.к. они показывают иерархию разделов, и больше упорядочивают их.
12. Никаких стилей! Ваш html код должен быть сосредоточен на структуре и содержании, а не на оформлении страницы! Все стили выносите в отдельный файл CSS.
Роберту Мартину удалось идеально описать измерение качества кода кода:
Единственным ценным измерением качества кода является WTF/мин.
Объясню чуть подробнее. Когда я провожу code review, у меня бывает только три эмоции:
- WTF (с отвращением) - этот код не нужен.
- WTF (с восхищением) - этот человек умен.
- WTF (раздраженно) - эту ерунду невозможно разобрать.
Что же влияет на нас первым делом, когда мы видим любой код? Это чистота и красота его написания. Создание чистого и красивого кода - это знак отличного мастера.
В изучении этого ремесла есть два направления: знание и работа. Знание учит вас шаблонам, принципам и методам, которые вам нужны для того, чтобы стать лучше в профессии. Но это знание нужно применять на постоянной практике и в упорной работе.
Вот несколько способов, которые могут помочь вам в искусстве написания чистого и красивого кода.
Начните с имени
Кендрик Ламар отлично сказал:
Если я захочу рассказать реальную историю, то я начну со своего имени.
Названия находятся в программе повсеместно. Мы называем наши функции, классы, аргументы и много других вещей. Мы называем файлы с исходниками, директории и всё, что внутри них. Мы постоянно придумываем новые имена, пока они не начинают засорять наш чистый код.
Название должно показывать намерение. Выбор хороших названий требует времени, но в итоге сохраняет его вам в будущем. Поэтому думайте о названиях и изменяйте их, если вдруг вы придумали имя получше. Помните, что название каждой переменной, функции или класса должно отвечать на три вопроса: почему оно существует, что оно делает и для чего используется.
Это требует не только хороших навыков описания, но и широкого культурного бэкграунда, и этому можете научиться только вы сами.
Функции должны делать одну вещь
Луис Салливан однажды сказал:
Форма следует за функцией.
Каждая система создается на основе предметно-ориентированного языка, который создан программистами для возможности точного описания. Функции являются глаголами этого языка, а классы - существительными. Функции должны быть первыми в очередь на организацию в любом языке программирования, и создание хороших функций - это суть написания хорошего кода.
Существует только два золотых правила создания чистых функций:
- Они должны быть небольшими
- Они должны делать одну вещь и делать ее хорошо
Это означает, что в вашей функции не должно содержаться вложенных структур. Таким образом, уровень отступа в функции не должен быть больше, чем один или два. Этот метод делает код проще для чтения и понимания. В дополнение к этому, нам нужно убедиться, что утверждения в нашей функции находятся на одном уровне абстракции. Смешивание уровней абстракции в функции приводит к коду, который нельзя будет исправить. Мастера-программисты думают о функциях, как об историях, которые нужно рассказать, а не как о коде, который нужно написать.
Они используют удобства выбранного языка, чтобы создавать выразительный и чистый блок кода, который будет хорошо рассказывать нужную историю.
Комментарии не исправят плохой код
Винус Уильямс заметила:
Каждый оставляет свои комментарии. Так рождаются слухи.
Комментарии - это обоюдоострый нож. Хорошо размещенный комментарий может быть очень полезен. Но с другой стороны, ничего так не засорит код, как бесполезные комментарии. И ничего не может так распространять дезинформацию, как комментарии.
Так что комментарии - это необходимое зло. Не всегда, но в большинстве случаев. Чем старше комментарий, тем сложнее становится его поддерживать, и многие программисты не выравнивают комментарии со своим кодом. Код двигается и развивается. Части кода перемещаются туда и сюда, а комментарии - нет, и это становится проблемой.
Всегда помните, что чистый и выразительный код с несколькими комментариями лучше, чем засоренный и сложный код с множеством комментариев. Не тратьте время на объяснение созданного беспорядка, лучше уберите его.
Форматирование кода - всегда приоритет
Форматирование кода - это коммуникация, а коммуникация - это приоритет для профессионального разработчика, - отмечает Роберт Мартин.
Отформатированный код - это окно в ваш разум. Мы хотим, чтобы люди были впечатлены нашим стремлением к порядку, вниманием к деталям и ясностью мысли. Но если они увидят непонятную массу кода без выраженного начала или окончания, это несомненно пошатнет вашу репутацию.
Если вы думаете, что главное, чтобы все работало, вы не правы. Функциональность, которую вы создаете сегодня, могут заменить в следующем релизе, но читаемость вашего кода не изменится.
Всегда знайте, что вас будут помнить за стиль и дисциплину, а не за ваш код. Поэтому вы должны позаботиться о том, чтобы ваш код был хорошо отформатирован и чтобы он подчинялся простым правилам, которые понимают все члены вашей команды.
Сначала напишите try-catch-finally
Жорж Кангилем правильно сказал:
Ошибаться - это по-человечески, постоянно ошибаться - это бесчеловечно.
Программисты постоянно справляются с ошибками. Входные данные могут быть ненормальными, и устройства могут выходить из строя. Как разработчики, мы должны убедиться, что код делает то, что ожидается. Однако проблема заключается не в обработке ошибки, проблема заключается в обработке ошибки с сохранением чистого читаемого вида.
Часто исправление ошибок сильно меняет код. Все становится таким разрозненным, что понять цель и логику главного кода становится сложно. Это неправильно. Код должен быть чистым и надежным, а ошибки должны быть исправлены с грацией и стилем. Это признак мастера в разработке.
Один из способов добиться этого - правильное размещение всех ошибок в блоках try-catch. Эти блоки определяют объем вашего кода. Когда вы выполняете часть кода в части try, вы утверждаете, что это выполнение может прерваться в любой момент времени и продолжиться в catch.
Поэтому, когда вы пишете код, хорошей практикой будет начать с утверждения try-catch-finally. Это поможет вам определить, чего ожидает пользователь, независимо от того, что произойдет неправильно с кодом в секции try.
Помните, что для каждого исключения вы должны описать достаточно контекста для того, чтобы определить источник и место ошибки. Творческие информативные сообщения об ошибках запомнятся надолго после того, как код был написан, а программисты ушли из организации.
Заключение
Каким словом можно обобщить все сказанное здесь?
Это чувство кода, аналог здравого смысла в программном обеспечении.
Согласно Роберту Мартину, «написание чистого кода требует дисциплинированного использования мириад маленьких техник, примененных для ощущения чистоты. Эти маленькие методы вместе образуют чувство кода».
Некоторые из нас рождаются с ним, а некоторые упорно приобретают его через практику. Это чувство кода не только помогает нам различать хороший и плохой код, но и позволяет нам формировать стратегии трансформации плохого кода в хороший. Чувство кода помогает программисту выбирать лучшие инструменты из доступных, чтобы создавать ценный, чистый и красивый код.
Подвести итог можно словами Гарольда Абельсона:
Программы должны быть написаны прежде всего для людей, которые будут их читать, и только потом для машин, которые будут их выполнять.
Уметь писать код - не значит уметь делать это правильно. Хороший код - это как красиво оформленный пост - его удобно читать, в нём легко ориентироваться и разработчику всегда понятно как его расширить, отладить или использовать для других целей.
Поэтому всегда важно уделять внимание оформлению кода, комментировать сложные участки кода.Вначале немного теории. Один и тот же код можно писать разными способами. Код может быть процедурным , функциональным и объектно-ориентированным .
Процедурный подход
Процедурный подход самый простой. Под ним подразумевается скрипт, в котором сплошняком написан команды и вызваны элементарные php функции.
Например:$a = 10;
$c = $a % $b;
$e + $d;
echo round($e);
?>Такой подход уместен, если у вас очень маленький код или он выполняет строго одну задачу(например генерирует картинку), как говорится "ни шаг вправо, ни шаг влево".
Функциональный подход
В функциональном подходе ваш код разделён на части и каждая из них помещена в свою функцию. Это позволит избежать дублирования кода, придаст коду лаконичность и его будет проще читать.
Так-же у каждой функции будет своя собственная область видимости переменных. То есть переменные, "живущие внутри неё" никогда не просочатся наружу и переменные, используемые вне функции так-же не попадут в саму функцию.
Определяя функцию вы сами можете указать какие переменные должны попасть в функцию и что она должна вернуть, то есть вы строго контролируете этот процесс.Теперь пробуем функционально .
//вернёт стоимость
function getPrice($price, $weight) {
$result_price * $weight;
return $result_price;
}
//вернёт все веса
function getWeights() {
return array(5, 12, 14, 16, 22, 135, 150, 200, 254, 300, 400);
}//получаем веса в переменную
$weights все фрукты
foreach ($fruits as $fruit) {
foreach ($weights as $weight) {
echo $fruit["name"] . " " . $weight . "кг стоят " . getPrice($fruit["price"], $weight) . "руб.
";
}
}
?>Код вышел гораздо более читабельным. Веса указаны в функции getWeights и простым добавлением их туда посчитать сколько бы стоил другой вес каждых фруктов.
Я перебрал все фрукты и при каждом переборе перебирал все веса. Можно было сделать и наоборот.
Исходник на pastebin http://pastebin.com/07QTBihXИ наконец реализация на ООП .
class Fruiting {
public $fruits;
public $weights;public function setData($fruits, $weights) {
$this->fruits = $fruits;
$this->weights = $weights;
}private function getPrice($price, $weight) {
$result_price = $price * $weight;
return $result_price;
}public function getResult() {
//перебираем все фрукты
foreach ($this->fruits as $fruit) {
//перебираем все веса для каждого фрукта
foreach ($this->weights as $weight) {
echo $fruit["name"] . " " . $weight . "кг стоят " . self::getPrice($fruit["price"], $weight) . "руб.
";
}
}
}
}$fruiting = new Fruiting();
$fruiting->setData($fruits, array(5, 12, 14, 16, 22, 135, 150, 200, 254, 300, 400));
$fruiting->getResult();
?>Как видите - код более объёмный. При простых вычислениях можно обойтись и функциональным подходом, но все действительно большие и сложные проекты написаны с использованием ООП.
При написании материала старался следовать советам @ontofractal :)
P.S. Когда пишете код - представьте, что поддерживать его будет психически неуравновешенный маньяк, который знает где вы живёте.
- — один элемент списка. Для наглядности давайте напишем код простого меню: