编码风格约定

编码风格约定

写在最前面

一个统一的好的编码风格好过一打大牛

统一编码风格

统一编码风格

编码风格基本约定

缩进及空格的约定

<div id="" name="" class=""
ng-show=""
ng-click-""
ng-class="">
</div>

var i = 0; // var[ ]i[ ]=[ ]0;
var i, j;  //var[ ]i,[ ]j;
var i = 1, j = 2;  //var[ ]i[ ]=[ ]1,[ ]j[ ]=[ ]2;

var

var somting = function (p1, p2, p3) {s
}
//var[ ]somting[ ]=[ ]funtion[ ](p1,[ ]p2,[ ]p3)[ ]{}

for (var i=0; i<list.length; i++) {
}
//for[ ](var[ ]i=0;[ ]i<list.length;[ ]i++)[ ]{}

for (key : obj) {
}
//for[ ](key[ ]:[ ]obj)[ ]{}

if () {
} else {
}
//if[ ](true)[ ]{}[ ]else[ ]{}

var obj = {
doSmting: function () {
},
list: [{}, {}]
}

/*
var[ ]obj[ ]=[ ]{
doSomting:[ ]function[ ]()[ ]{
},
list:[ ][{},[ ]{}]
}
*/

var obj = {1: "", 2: ""}
//var[ ]obj[ ]=[ ]{1:[ ]"",[ ]2:[ ]""}

引号的使用

命名规范及约定

禁止一切无意义命名，禁止全局变量的定义，

禁止使用中文拼音以及拼音缩写

scope底下禁止独立变量的存在

var isBoolean = true; //布尔值以is开头
var arrayList = [];   //数组以List结尾

$scope.type = 1;      /**这种写法是禁止使用的**/

当前项目中不需要匿名函数（回调函数除外），以及自运行函数。

var getSomting = function (id) {}        //获取某个值
var loadSomting = function (agrs[]) {}   //从后台加载数据，涉及到restService
var postSomting = function (obj{}) {}    //提交表单操作，新建
var deleteSomting = function (id) {}     //删除操作
var putSomting = function (id, obj{}) {}  //提交表单操作，修改
var initSomting = function () {}         //初始化函数，一般是用来获取某个获取后台的某个资源

$scope.views = {
showSomting: function () {}
chooseSomting: function () {}
}

全局静态常量定义约定

angular.module('myApp.static', [])
.constant("USER_TYPE", {1: "个人", 2: "企业"})

全局动态变量定义约定

angular.module('myApp.somting',[])

.factory("SOME_TYPES", function ($resource) {
var SOME_TYPES = {};

$resource(url, 'GET').then(function (result) {
SOME_TYPES = result
});

return SOME_TYPES;
})

注释约定

/**
* @author
* @date
* @module name
* @description
*/

.controller(function () {
/**
* @author
* @date
* @controller name
* @description
*/
})

/**
* @fuction name
* @param {agr[0]:"描述",agr[1]:"描述"}
* @return {agr[0]:"描述",agr[1]:"描述"}
* @description
* @author
* @date
*/
function () {
return ;
}

var obj = "" ; //参数定义注释

function () {
...
// 对函数内部代码或者逻辑的特殊说明
...
}

基础数据模型定义的约定

app.factory("userService",function ($q, $resource) {

var service = {
getList : function () {
//来自后台数据
return $q(function(resolve, reject){
//success  resolve()
//failed   reject()
})
}
getDetail : function (id) {
//来自后台数据
return $q(function(resolve, reject){
//success  resolve()
//failed   reject()
})
},
post : function (user) {
//来自后台数据
return $q(function(resolve, reject){
//success  resolve()
//failed   reject()
})
},
update : function (id, user) {
//来自后台数据
return $q(function(resolve, reject){
//success  resolve()
//failed   reject()
})
},
delete : function (id) {
//来自后台数据
return $q(function(resolve, reject){
//success  resolve()
//failed   reject()
})
}
}

return service;
})

form表单验证

<form name="myForm" ng-submit="postSomting" novalidate>
<div>
<span>用户名：</span>
<input type="text" name="username" placeholder="请输入URL信息"
ng-model="some.username" required
ng-pattern="REG"/>
<div>
<div ng-messages="myForm.username.$error">
<div class="error" ng-message="required">用户名不能为空</div>
<div class="error" ng-message="pattern">请输入正确的用户名</div>
</div>
</div>
</div>
<input type="submit" ng-disable="myForm.$validate" value="提交">
</form>

分号（;）使用

代码块的分号不可被省略

if中的{}省略

if (true) return;
if (true) return somtion;

ng-src和ng-href 代替 src、href

注

项目开发代码规范

变量的定义

.controller(function($scope){
$scope.view = {}
})

代码顺序的约定

只要是在scope中用到的变量全部需要最先声明。

.controller(function () {
/*scope底下的对象最先声明*/
$scope.somting = {};
/*scope底下的function*/
$scope.doSomting = function () {}
/*controller局部函数*/
var doSomting = function () {}

/*controller的初始化函数定义*/
var run = function () {}
/*运行初始化函数*/
run();
})

视图模型定义的约定

//页面视图控制数据模型
$scope.views = {
somting: "",
isSomting: true,
chooseSomting: function () {
this.sonting = "";
},
oneObj: {
oneType: "",
showOne: fucntion () {
this.one = "";
}
}
}

//后台返回数据模型
$scope.somting = somtingService.get();

业务数据模型定义的约定

$scope.somtingSelectedList = [{
id: 1,
...
selected: true
}, {
id: 2,
...
selected: true
}, {
id: 3,
...
selected: false
}...]

PS

$scope.somting = {
list: [{}],
select: function(){},
delete: function(){},
getDate: function(){}
}

controller 中的初始化函数

注

.controller(function(){

var run = function(){
}

run();
})

ui-router的使用

//config中定义参数
$stateProvider.state('stateTo',{
url: '',
templateUrl: '',
params: {p1: '', p2: ''}
})

//state.go
$state.go('stateTo', {p1: '1', p2: '2'})

//controller中接收
controller(function($stateParams){
$stateParams.p1;
$stateParams.p2;
})

$stateProvider.state('stateTo', {
url: '',
templateUrl: '',
resolve: {
someService："someService",
init: function () {   //方法名自定义，所有方法都会在页面加载前被调用
someService.load();
}
}
})