Введение
Давайте рассмотрим практику написания 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 () {};
};
Бесплатные вебинары по схожей тематике:
Это лишь базовые приемы, которые вы можете использовать в своей практике. Они помогут вам избежать некоторых проблем в вашей роботе и сделать код вашего приложения чище и понятнее. Желаю вам хорошего кода и светлых идей.
Статьи по схожей тематике
