Введение в руководства по стилю AngularJS

Руководства по стилю AngularJS

Google предоставляет официальное руководство по стилю и лучшие практики , но самые популярные и всесторонние руководства принадлежат сообществу AngularJS:

• Руководство по стилю AngularJS Минько Гечева
• AngularJS Руководство по стилю Тодда Мотто
• Руководство по стилю AngularJS Джона Папы

Трудно сказать, какой из них лучший, так как они все хорошие гиды по стилю. Руководство Джона Папы является всеобъемлющим и развивающимся, руководство Тодда Мотто лаконичным и отличным для начала, а руководство Минько Гечева переведено на разные языки. Но похоже, что руководство по стилю Джона Папы было официально рекомендовано как самое актуальное и подробное руководство по стилю AngularJS.

На мой взгляд, это наиболее важные особенности AngularJS в руководстве по стилю Jonh Papa, которые следует учитывать при запуске совершенно новых проектов AngularJS:

• Принцип ЛИФТА
• Контроллер как синтаксис
• Fle шаблоны и фрагменты
• Семенные аппликации

Принцип ЛИФТА

Принцип LIFT связан со структурой приложения и определяет следующие рекомендации:

1. Быстро найдите свой код
2. Я сглаживаю код с первого взгляда
3. сохранить структуру F lattest вы можете
4. Пробуйте остаться сухим

Это делает структуру приложения более масштабируемой, а разработчики — более эффективными, поскольку они быстрее находят код. Использование структуры папок по функциям, естественно, помогает следовать принципу.

ControllerAs

Использование синтаксиса controllerAs поверх синтаксиса «classic controller with $scope

 <!-- avoid -->
<div ng-controller="CustomerController">
    {{ name }}
</div>

<!-- recommended -->
<div ng-controller="CustomerController as customer">
    {{ customer.name }}
</div>

и в контроллере:

 /* avoid */
function CustomerController($scope) {
    $scope.name = {};
    $scope.sendMessage = function() { };
}

/* better */
function CustomerController() {
    this.name = {};
    this.sendMessage = function() { };
}

На самом деле, рекомендуется пойти дальше и назначить this

 /* recommended */
function CustomerController() {
    var customerVM = this;
    customerVM.name = {};
    customerVM.sendMessage = function() {
        // we can access the controller's scope as customerVM
    };
}

Шаблоны файлов и фрагменты

В руководстве Джона Папы приведен ряд шаблонов файлов и фрагментов для разных редакторов и IDE. Использование шаблонов файлов и фрагментов обеспечивает согласованность между различными файлами, модулями и подсистемами, и, особенно если вы работаете в команде, это может сэкономить много времени во время рефакторинга или когда новые разработчики присоединяются к вашей команде. Он также сохраняет код проекта в чистоте и пригоден для повторного использования.

Семенные Приложения

Если вы спешите или хотите учиться на полном примере, HotTowel — это вариант, который следует учитывать при запуске новых проектов AngularJS. Этот генератор Yeoman создает приложение, которое служит отправной точкой для вашего приложения AngularJS, следуя руководству по стилю Джона Папы. Сгенерированное приложение настраивается с помощью пакета npm, файла gulp, подсказок JavaScript и LESS, поэтому, если у вас нет особых потребностей, все, что вам нужно сделать, это реализовать новые функции! Вы можете просматривать и запускать приложение AngularJS, созданное с помощью HotTowel, на моей игровой площадке AngularJS на GitHub.

Пример из реального мира

Примером руководства по стилю, используемого для реального проекта, является стилегид GoCardless AngularJS , в котором вы можете найти более конкретные и продвинутые фрагменты кода. Это продвигает использование директив вместо контроллеров в HTML. В качестве примера рассмотрим это руководство по именам директив:

Имена директив должны содержать только az и хотя бы одну черту (-) . Почему: пользовательские элементы должны иметь тире (пространство имен), чтобы отличать их от собственных элементов и предотвращать будущие конфликты компонентов .

 <!-- Recommended -->
<dialog-box></dialog-box>
<button click-toggle="isActive"></button>

<!-- Avoid -->
<dialog></dialog>
<button toggle="isActive"></button>

Руководство по стилю GoCardless может стать отличной отправной точкой для вдохновения в настройку и расширение упомянутых выше общих руководств по стилю с учетом потребностей вашей команды и проекта.

Использование руководства по стилю в команде

Руководства по стилю кода должны быть обязательным входом для большинства проектов AngularJS, особенно если проект рассчитывает на быстрый рост или новая команда. Кроме того, руководства по стилю кода должны поддерживаться во время проекта и изменяться или расширяться каждый раз, когда появляется новая потребность или обнаружение.

Будущее: 2016 и далее

В ближайшее время все изменится быстро. Следующая задача — обновить руководства по стилю для AngularJS 2, особенно в отношении разработок с веб-компонентами, ECMAScript 2015 (ES6) и ECMAScript 2016 и выше.

Мне бы хотелось услышать об опыте других людей в руководствах по стилю, как для Angular, так и для JavaScript в целом. Есть ли какие-то замечательные руководства, которые я пропустил, или какие-либо рекомендации, которые вы считаете особенно спорными? Дай мне знать в комментариях!