Best Practice AngularJS

Best Practice AngularJS

/* 用几组简明扼要的代码段及其说明, 展示良好的编程行为, angularjs */

// app.module.js

angular

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

// logger.js

(function() {

'use strict';

angular

.module('app')

.factory('logger', logger);

function logger() { }

})();

/*

Single Responsibility 单一责任的文件,小函数

* 1个组件, 1个文件, <400LOC (代码行)

* Small Functions,小函数 < 75LOC(1屏幕), 易于重用,维护和测试

用IIFE减少全局变量

* 类和组件, 要包裹在IIFE里面, (立即执行的函数表达式) Immediately Invoked Function Expression .

*减少全局变量, 从而减少这些变量的寿命,和重名

Modules模块定义

避免产生额外的全局变量:

* 在定义module的时候, 用chain,不要用setter语法引入中间变量,

* 在引用module的时候, 用chain + getter语法, 不定义中间变量。

* 一个module只能创建1次, 多次引用

* 用有名函数, 不要用callback, 以避免Nested的callback

*/

/* 在view中:

<div ng-controller="CustomerProductController as ProductVm">

<input ng-model="ProductVm.title"/>

</div>

*/

angular

.module('app')

.controller('CustomerProductController', CustomerProductController);

CustomerProductController.$inject = ['dataservice', 'logger'];

function CustomerProductController($scope, dataservice, logger) {

var vm = this;

vm.refresh = refresh;

vm.search = search;

vm.sessions = [];

vm.title = 'Sessions';

////////////

function refresh() {

}

function search() {

}

$scope.$watch('vm.title', function(current, original) {

$log.info('vm.title was %s', original);

$log.info('vm.title is now %s', current);

});

}

// route-config.js

angular

.module('app')

.config(config);

function config($routeProvider) {

$routeProvider

.when('/customerProduct', {

templateUrl: 'customerProduct.html',

controller: 'CustomerProductController',

controllerAs: 'productVm'

});

}

/*

Controllers

* 在view中用as语法代替$scope, 类似于new一个实例,接近本色的.语法., 避免$parent,

* 在controller自身中, 用vm(view Modal)代替this,避免歧义,并减少$scope,(仅仅剩余在$emit, $broadcast, $on, $watch等少数情况下,必须用$scope)

* 把bindable函数写在前面, 并按照字母排序, 具体的实现放在后面(如果实现只有1行,可以直接写)。

让重要的函数一览无余, 而且与函数的顺序无关。

* 薄controller, 厚service: 尽量把controller的逻辑下放到services,便于重用,和unit test

* 让controller专注到1个view, 不要重用,因为UI经常变,(而让可重用部分下放给service)

* 在route中定义controller和view,而避免在view中直接指定controller(绑死了),这样, 可以灵活地在route中重用view与controller。

*/

// service全部改用factory

angular

.module('app')

.service('logger', logger);

function logger() {

this.logError = function(msg) {

};

}

// factory

angular

.module('app')

.factory('logger', logger);

function logger() {

return {

logError: function(msg) {

}

};

}

/*

Services

* 用factory代替service,

以简化,并保持一致性。

因为,所有的service都是singleton,而且用new来实例化。

*/

function dataService($http, $location, $q, exception, logger) {

var isPrimed = false;

var primePromise;

var service = {

getAvengers: getAvengers,

ready: ready

};

return service;

////////////

function getAvengers() {

}

function ready(nextPromises) {

// implementation details go here

}

}

/*

Factories

* 与Controller一样的地方:(任务要单一, 接口函数放在前面)

*  factory都是singleton, 返回的object包括了其所有接口函数

*/

// dataService.js

angular

.module('app.core')

.factory('dataService', dataService);

dataService.$inject = ['$http', 'logger'];

function dataService($http, logger) {

return {

getAvengers: getAvengers

};

function getAvengers() {

return $http.get('/api/maa')

.then(getAvengersComplete)

.catch(getAvengersFailed);

function getAvengersComplete(response) {

return response.data.results;

}

function getAvengersFailed(error) {

logger.error('XHR Failed for getAvengers.' + error.data);

}

}

}

// controller.js

angular

.module('app.avengers')

.controller('AvengersController', AvengersController);

AvengersController.$inject = ['dataService', 'logger'];

function AvengersController(dataService, logger) {

var vm = this;

vm.avengers = [];

activate();

function activate() {

return getAvengers().then(function() {

logger.info('Activated Avengers View');

});

}

function getAvengers() {

return dataService.getAvengers()

.then(function(data) {

vm.avengers = data;

return vm.avengers;

});

}

}

/*

Data操作全部用Service

* 抽出data操作, 例如:http, local storage, db都纳入service中, (不要放在controller中)

* 返回promise, 以利于chain操作

*/

// 对于controller和service

AvengersController.$inject = ['moviesPrepService'];

// 对于 route

function config($routeProvider) {

$routeProvider

.when('/avengers', {

templateUrl: 'avengers.html',

controller: 'AvengersController',

controllerAs: 'vm',

resolve: {

moviesPrepService: moviesPrepService

}

});

}

moviesPrepService.$inject = ['movieService'];

function moviesPrepService(movieService) {

return movieService.getMovies();

}

/*

Manual Annotating for Dependency Injection: 手工注入, 让minify安全

*/

/*

其余主题:

Minification and Annotation: 注释,适合minify的

Exception Handling

*/

/* Naming: 命名规范

featureType.js

*/

用几个代码段, 和 简要的 原则注释, 来直观地展示编程好习惯。

angularjs1,2的
js的
dom的
类和子类的
module的

https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
https://github.com/johnpapa/angular-styleguide/blob/master/i18n/zh-CN.md

上一篇:什么情况下适合用UDP协议,什么情况下适合用TCP协议?


下一篇:网络协议 20 - RPC 协议(上)- 基于XML的SOAP协议