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

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

    Підписка

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

    Підписка

      Угода при розробці 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 $
      Придбати
      Базовий
      • Усі відеокурси на 6 місяців
      • Тестування з 16 курсів
      • Перевірка 10 домашніх завдань
      • Консультація з тренером 60 хв
      89.99 $
      Придбати
      Преміум
      • Усі відеокурси на 1 рік
      • Тестування з 24 курсів
      • Перевірка 20 домашніх завдань
      • Консультація з тренером 120 хв
      169.99 $
      Придбати
      Notification success
      Ми використовуємо cookie-файли, щоб зробити взаємодію з нашими веб-сайтами та послугами простою та значущою.