Соглашение при разработке AngularJS приложения - Блог ITVDN
ITVDN: курсы программирования
Видеокурсы по
программированию

Выбери свою IT специальность

Начать бесплатно
ITVDN logo
Видеокурсы по
программированию

Выбери свою IT специальность

Начать бесплатно

Введение

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


Итак, начнем.

1) Создавая новое приложение, старайтесь разделять модуль, контроллер, фабрику, вынося их в отдельные файлы. Этот прием имеет ряд приимуществ:

  • улучшается читаемость приложения
  • улучшается рефакторинг приложения
  • легче производить дебаггинг приложения

//плохая практика

angular

       .module('app', ['ngRoute'])

       .controller('myController', myController)

       .factory('myFactory', myFactory);

function myController() { };

function myFactory() { };

//рекомендуется

//myapp.module.js – файл модуля

angular

       .module('app', ['ngRoute']);

//mycontroller.js – файл контроллера

angular

.module('app')

.controller('myController', myController);

function myController() { };

//myfactory.js – файл фабрики

angular

       .module('app')

       .factory('myFactory', myFactory);

function myFactory() { };

2) Старайтесь оборачивать код в самовызывающиеся функции.

Это позволяет :

  • сохранить переменные от глобального объекта scope
  • предотвратить перетирание глобальных переменных (т.к. они локальны)
  • при минификации кода помогает избежать путаницы переменных

//плохая практика

angular

       .module('app')

       .factory('myfactory', myfactory);

function myfactory() { };

//рекомендуется

(function () {

    'use strict';

    angular

        .module('app')

        .factory('myfactory', myfactory);

    function myfactory() { };

})();

3) Старайтесь придерживаться иерархии именования. Это поможет правильно структурировать приложение, что в итоге приведет к правильной архитектуре программы.

Избегайте создания модуля через переменную и используйте цепочный синтаксис (в виде цепочки)

//плохая практика

var app = angular.module('app', [

       'ngAnimate',

       'ngCookies',

       'firebase'

]);

//рекомендуется

angular

       .module('app', [

       'ngAnimate',

       'ngCookies',

       'firebase'

]);

4) Используйте именованные функции. Код становится более читабельным и куда лучше тестируется. 

//плохая практика

angular

       .module('app')

       .controller('mycontroller', function () { });

//рекомендуется (обратите внимание на контроллер он вынесен в отдельный файл

//от модуля)

//myapp.module.js – файл модуля

angular

       .module('app', ['ngRoute']);

//mycontroller.js – файл контроллера

angular

.module('app')

.controller('myController', myController);

function myController() { };

5) Используйте controller as нотацию вместо просто controller. Она более читабельна, помогает не запутаться в коде 

    //плохая практика

    <div ng-controller=”myController”>{{title}}div>

    //используем

    <div ng-controller=”myController as mycontroller”>{{mycontroller.name}}div>

6) Используйте слово vm(ViewModel) внутри контроллера вместо ключевого слова this. Это поможет избежать подмены контекста внутри функции. 

//антипаттерн

function mycontroller () {

       this.name = {};

       this.deleteSome = function () {};

};

//паттерн

function mycontroller () {

       var vm =  this;

       vm.name = {};

       vm.deleteSome = function () {};

};

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

КОММЕНТАРИИ И ОБСУЖДЕНИЯ
СТАТЬИ ПО СХОЖЕЙ ТЕМАТИКЕ
ВИДЕО КУРСЫ ПО СХОЖЕЙ ТЕМАТИКЕ

Стань профессионалом, используя все возможности обучения на ITVDN

Стартовый
подписка

Все видео курсы на 3 месяца за 49.99 $

0
Базовый
подписка

Все видео курсы на 6 месяцев за 89.99 $

1
Премиум
подписка

Все видео курсы на 12 месяцев за 169.99 $

2
Notification success