Учебник: jQuery для начинающих. Стандарты кодирования. Данное раздел написан на основе следующих руководств: Общие правила Исходя из данных правил, может сложиться впечатление, что нельзя использовать ID в проекте, но это не так, правило касается только CSS, т.е. если вы хотите применить стиль к элементу с ID, то вам следует присвоить ему класс и применять стили уже непосредственно к нему Правила форматирования Для проверки форматирования используйте stylelint со стандартным конфигом Подробная инструкция по подключению данной утилиты к продуктам компании JetBrains можно найти в официальном руководстве Но чтобы долго не томить, вот вам краткое содержание последних двадцати серий: Если у вас проект будет посложнее чем сайт-визитка вашего питомца, то рекомендуется придерживаться БЭМ методологии, но помните - это отнюдь не панацея, и тянет за собой избыточность в HTML, ломает семантичность классов и обрастает тулзами, которые не всем одинаково полезны.
Примеры Пример форматирования CSS Комплексный пример порядка свойств Модульность Именование переменных. Как вы структурируете ваш JavaScript код? Модульный вариант шаблона. // webknowledge.ru. Перевод статьи: How Do You Structure JavaScript? The Module Pattern EditionАвтор: Chris Coyier. Язык JavaScript интересен тем, что он сам по себе не обязывает вас к соблюдению определенной структуры кода. Как говорится — «хозяин – барин». Чем больше я занимаюсь созданием веб-приложений на JavaScript, тем больше это захватывает. То, как вы структурируете ваш JavaScript код, имеет огромное значение, и вот почему: Четкая структура повышает читабельность кода, его доступность для других, а также и для вас при повторном обращении к нему.Грамотное планирование структуры позволяет поддерживать чистоту кода в будущем и является подтверждением уровня вашего мастерства.Это дает возможность тестирования вашего кода.
Прежде чем продолжить, позвольте признаться, что мой уровень познаний JavaScript далек от мастерства. По причине того, что мне пришлось написать достаточно много JavaScript кода для проекта CodePen, который переполнен скриптами, последнее время я серьезно задумывался над этой темой. Airbnb/javascript: JavaScript Style Guide. Упорядочиваем свой код | CodenameCRUD - бесплатное обучение веб-разработке. Этот раздел - сборник полезных ресурсов вроде руководств по стилю оформления (чтобы ваш код следовал установленным соглашениям), библиотек, регулярных выражений, способов ускорения загрузки страницы, локального хранилища в браузере и безопасности. Пункты для размышления Что такое "руководство по стилю оформления" и почему он так полезен для вас как для новичка? Что вы знаете о библиотеке Underscore и как она превращает Javascript в некое подобие Ruby? Как вы убедитесь, что не делаете дублирующих и избыточных вызовов jQuery к DOM (например, постоянного использования $("body") или вроде того)?
Подсказка: используйте переменные.Как производить поиск текста в строке с помощью регулярных выражения в Javascript? Ваше задание Руководства по стилю оформления Javascript позволяет вам делать так много различных вещей, что легко почувствовать полное отсутстве организационной структуры. Прочие полезные материалы Следующие ресурсы следут просто просмотреть, не стоит их зазубривать. Дополнительные ресурсы. Code Organization Concepts. When you move beyond adding simple enhancements to your website with jQuery and start developing full-blown client-side applications, you need to consider how to organize your code. In this chapter, we'll take a look at various code organization patterns you can use in your jQuery application and explore the RequireJS dependency management and build system. Before we jump into code organization patterns, it's important to understand some concepts that are common to all good code organization patterns.
Your code should be divided into units of functionality — modules, services, etc. Avoid the temptation to have all of your code in one huge $( document ).ready() block. This concept, loosely, is known as encapsulation.Don't repeat yourself. Identify similarities among pieces of functionality, and use inheritance techniques to avoid repetitive code.Despite jQuery's DOM-centric nature, JavaScript applications are not all about the DOM. How would we apply this pattern to jQuery code? Модульная разработка в JavaScript. Сегодня ни один большой web-проект не обходится без JavaScript.
Этот язык удобен для создания интерактивных интерфейсов, к тому же имеет низкий порог входа. Но начинающие разработчики часто пишут код «простыней», не задумываясь об архитектуре проекта. Это вызывает трудности с расширением и поддержкой, особенно, если ведется совместная работа. В этой статье поговорим об одном из способов организовать код в виде модулей, и о преимуществах этого подхода. Для примера реализуем на странице слайд-шоу. Будем менять атрибут srс у нужного изображения по интервалу: var imgs = ['img/first.jpg', 'img/second.jpg', 'img/third.jpg'], imgElement = document.getElementById('slideshow'), currentImg = 0;imgElement.src = imgs[currentImg]; var next = function() { currentImg = (currentImg + 1) % imgs.length; imgElement.src = imgs[currentImg]; }; setInterval(next, 3000); В таком коде все переменные находятся в глобальной области видимости, то есть являются свойствами объекта window.
Модульность Первые шаги. Организация js кода для джуниоров. С недавних пор я стал работать в сфере web разработки, и еще нахожусь в стадии падавана. Однако недавно я открыл для себя способ организации клиентского javascript кода, который может быть легко интегрирован в любой существующий проект и который легко освоить. Этот подход называют «Модульный javascript», и под катом мы научимся его применять. Статья названа так, потому что люди на уровне джедая уже используют более совершенные методики и думаю в комментариях поделятся ими. Задачу я ставил себе следующую: «Организовать весь клиентский js код удобным способом, что бы его было легко поддерживать, искать ошибки и дополнять». Мотивацией этому стала работа с чужим сайтом, где весь js был в одном, огромном файле и попытка дополнить что-то вызывала приступ апатии. Вся суть методики сводится к разбиению нашего приложения на модули. Я так же называю их «виджетами», потому что так проще воспринимать их суть.
Каждый виджет является обособленной сущностью. А теперь создадим наши модули. Что это нам дает. Использование объектов для красивой структуры кода в JavaScript. Архитектурный паттерн в javascript (object literal)