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

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

    FREE FOR UKRAINE

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

    FREE FOR UKRAINE

      Угода при розробці 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

      Пакети підписки з доступом до всіх курсів та сервісів

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