Угода при розробці AngularJS програми - Блог ITVDN
ITVDN: курси програмування
Відеокурси з
програмування

    Замовити дзвінок

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

    Подписка

    Замовити дзвінок

    +38 099 757 27 82

      Угода при розробці AngularJS програми

      advertisement advertisement

      Введение

      Давайте рассмотрим практику написания 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 () {};

      };

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

      КОМЕНТАРІ ТА ОБГОВОРЕННЯ
      advertisement advertisement

      Купуй передплатуз доступом до всіх курсів та сервісів

      Бібліотека сучасних IT знань у зручному форматі

      Вибирай свій варіант підписки залежно від завдань, що стоять перед тобою. Але якщо потрібно пройти повне навчання з нуля до рівня фахівця, краще вибирати Базовий або Преміум. А для того, щоб вивчити 2-3 нові технології, або повторити знання, готуючись до співбесіди, підійде Пакет Стартовий.

      Стартовий
      • Усі відеокурси на 3 місяці
      • Тестування з 10 курсів
      • Перевірка 5 домашніх завдань
      • Консультація з тренером 30 хв
      59.99 $
      Придбати
      Преміум Plus
      Завантажуй відео уроки
      та навчайся без інтернету
      • Усі відеокурси на 12 місяців
      • Тестування з 24 курсів
      • Перевірка 20 домашніх завдань
      • Консультація з тренером 120 хв
      • Завантаження відео уроків
      199.99 $
      Придбати
      Базовий
      • Усі відеокурси на 12 місяців
      • Тестування з 16 курсів
      • Перевірка 10 домашніх завдань
      • Консультація з тренером 60 хв
      89.99 $
      Придбати
      Notification success
      Ми використовуємо cookie-файли, щоб зробити взаємодію з нашими веб-сайтами та послугами простою та значущою.