命名
文件命名
文件名应该说明该文件的作用，以及类型，不要使用简写或缩写，单词的拼接可以使用- ,也可以用驼峰命名
错误示范
mainbusCtrl.js // 简写单词，这里的bus 本意是business
bonuslist.html //字母拼接方式不规范
childcomCtr.js //意义不明
正确的示范
bonus-list.html
charts.module.js
friendlyLink.controller.js
common-style.sass
变量命名
参考 这里
优化
最大限度减少代码冗余
- 定义最少量的路由
错误示范1：
$stateProvider
.state('mainbus', {
url:'/mainbus',
template: '上面一段代码存在几个问题，
由title 可以看出，在mainbus.mainbus-edit和mainbus.mainbus-add两个路由的页面内，表单结构是完全一样的，既然一样的，就没有必要新建两个html文件，也没有必要写两个controller，因为交互和判断的逻辑肯定是一样的。而且,'mainbus.mainbus-add中的url是/mainbus-add/:id ,既然是添加，肯定不会有参数传进来。
控制器的名字也起的不好。
错误示范2:
$stateProvider
.state('download', {
url:'/download',
template: '这两个路由的templateUrl和controller值都是一样的，没必要分成两个，可以把app和pc作为参数：url:'/list/:type'
- 写最少的代码
一个例子：
每个路由对应的html文件都不一样,但是$stateProvider .state('material', { url: '/material', template : '', abstract: true, title: '物料管理' }) .state('material.bom', { url: '/bom', templateUrl: 'app/pages/material/bom/bom-list.html', title: 'BOM清单', controller:'systemListCtrl', data:{ url:'/api/dos-boms', listTitle:'物料数据字典' } }) .state('material.material-stock', { url: '/material-stock', templateUrl: 'app/pages/material/material/stock-list.html', title: '原料库存表', controller:'systemListCtrl', data:{ url:'/api/dos-bom-stocks', listTitle:'原料库存列表', partType:'RM', search:'/api/_search/dos-bom-stocks' } }) .state('material.material-price', { url: '/material-price', templateUrl: 'app/pages/material/material/price-list.html', title: '零原料价格清单', controller:'systemListCtrl', data:{ url:'/api/dos-rm-prices', listTitle:'零原料价格清单' } }) .state('material.product-stock', { url: '/product-stock', templateUrl: 'app/pages/material/material/stock-list.html', title: '成品库存', controller:'systemListCtrl', data:{ url:'/api/dos-bom-stocks', listTitle:'成品库存列表', partType:'FG', search:'/api/_search/dos-bom-stocks' } }) .state('material.product-price', { url: '/product-price', templateUrl: 'app/pages/material/product/price-list.html', title: '成品价格清单', controller:'systemListCtrl', data:{ url:'/api/dos-fg-prices', listTitle:'成品价格清单' } }) .state('material.semi-manufactures', { url: '/semi-manufactures', templateUrl: 'app/pages/material/material/stock-list.html', title: '半成品库存表', controller:'systemListCtrl', data:{ url:'/api/dos-bom-stocks', listTitle:'半成品库存表', partType:'SFG', search:'/api/_search/dos-bom-stocks' } }) ; controller确是一样的，这些路由对应一个个列表页，把列表页的公共逻辑提取出来，不一样的地方可以在data属性里面定义。
所以，在看不见的地方，其实少写了很多代码，如没有特殊逻辑，整个项目的列表页都不需要再写控制器了。
p s:这个结构比较特殊，要求服务器返回的数据结构严格一致，可以借鉴，不必模仿。
增强代码可读性
这里主要说明一下controller文件的规范，其他js文件以此为参考。一个controller中需要定义一些变量，用在页面中的数据双向绑定，这些变量通常作为$scope对象的属性在html页面中使用，将这些变量统一绑定在一个对象中，写在逻辑代码的最前面。
在逻辑代码前面声明函数。
函数的写法全部使用function语法，写在逻辑代码的后面。
以一个文件为单位，先来看一个糟糕的例子
/**
* @author a.demeshko
* created on 18.01.2016
*/
(function() {
'use strict';
angular.module('BlurAdmin.pages.home')
.controller('childcomeditCtrl', childcomeditCtrl);
/** @ngInject */
function childcomeditCtrl($scope, $state, $timeout, $stateParams, toastr, $uibModal, apiRequest, QINIU_LINK, IMAGE_UPLOAD) {
$scope.companyType = [
{ id: 0, name: "子公司" },
{ id: 2, name: "分公司" }
];
$scope.is_headcom = true;
$scope.issubcom = true;
$scope.selected = 0;
if ($scope.selected != 1) {
$scope.is_headcom = false;
}
if($stateParams.id){
$scope.tip = '修改';
}else{
$scope.tip = '添加';
}
$scope.getdefaultData = function() {
apiRequest.get('/home/city-list', {}, function(res) {
if (res.code == "200") {
$scope.list = res.data.regions;
$scope.provinceArr = [];
$scope.cityArr = [];
$scope.areaArr = [];
for (var i = 0; i < $scope.list.length; i++) {
var vp = $scope.list[i];
$scope.provinceArr.push({
id: vp.id,
name: vp.name
})
if (vp.id != $scope.ppid) continue;
for (var j = 0; j < vp.regions.length; j++) {
var vc = vp.regions[j];
$scope.cityArr.push({
id: vc.id,
name: vc.name
})
if (vc.id != $scope.ccid) continue;
for (var k = 0; k < vc.regions.length; k++) {
var va = vc.regions[k];
$scope.areaArr.push({
id: va.id,
name: va.name
})
}
}
}
$scope.areaArr.unshift({ id: 0, name: "请选择区域" });
} else {
toastr.error(res.message, '');
$scope.$apply();
}
});
}
$scope.getdefaultData();
//根据id获取该id对应的信息
$scope.getInfo = function() {
apiRequest.get('/home/column-detail', { id: $stateParams.id, type: 2 }, function(res) {
if (res.code == "200") {
$scope.column = { street: '' }
$scope.column = res.data;
console.log(res)
$scope.selected = $scope.is_headcom = $scope.column.is_head;
console.log($scope.selected)
// $scope.selected = res.data.is_head;
$scope.column.street = res.data.address.street;
$scope.ppid = res.data.address.province.id;
$scope.ccid = res.data.address.city.id;
if (res.data.address.area == null) {
$scope.aaid = 0;
} else {
$scope.aaid = res.data.address.area.id;
}
if (res.data.points != null) {
$scope.pointarr = res.data.points.split(",");
$scope.column.points1 = $scope.pointarr[0];
$scope.column.points2 = $scope.pointarr[1];
}
// if ($scope.selected != 1) {
// $scope.is_headcom = false;
// }
// if ($scope.selected != 0) {
// }
if ($scope.selected == 0) {
$scope.issubcom = true;
}else{
$scope.issubcom = false;
$scope.column.is_show = 1;
}
} else {
toastr.error(res.message, '');
$scope.$apply();
}
});
}
if($stateParams.id){
$scope.getInfo();
}
//判断链接地址是否正确
//$scope.isUrl=function(str){
// var reg=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
// return reg.test(str);
//}
//判断数字是否正确
$scope.isNumber = function(str) {
var reg = /^[0-9]*$/;
return reg.test(str);
}
////判断英文是否正确
//$scope.isLetter=function(str){
// var reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
// if(reg.test(str)){
// return false;
// }
// else{
// return true;
// }
//}
//判断邮箱是否正确
$scope.isEmail = function(str) {
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
return reg.test(str);
}
////判断输入的经度是否正确
//$scope.isAltitude=function(str){
// var reg=/^(((\d|[1-9]\d|1[1-7]\d|0)\.\d{0,4})|(\d|[1-9]\d|1[1-7]\d|0{1,3})|180\.0{0,4}|180)$/;
// return reg.test(str);
//}
//
////判断输入的纬度是否正确
//$scope.isLatitudes=function(str){
// var reg=/^([0-8]?\d{1}\.\d{0,4}|90\.0{0,4}|[0-8]?\d{1}|90)$/;
// return reg.test(str);
//}
$scope.change_sel = function(selected) {
$scope.selected = selected;
$scope.column.is_head = selected;
if (selected == 0) {
$scope.issubcom = true;
} else {
$scope.issubcom = false;
}
}
$scope.confirm = function(link) {
$scope.modal = {
link: link,
}
$uibModal.open({
animation: true,
templateUrl: 'app/pages/ui/modals/modalTemplates/confirm.html',
controller: 'ModalCtrl',
size: 'md',
resolve: {
modal: function() {
return $scope.modal;
}
}
});
};
$scope.column = {
address: {
street: '',
}
};
$scope.isShowcg = function(is_show) {
$scope.column.is_show = is_show;
}
$scope.changeX = function(id) {
$scope.selected1 = id;
};
$scope.changeY = function(id) {
$scope.selected2 = id;
};
$scope.changeZ = function(id) {
$scope.selected3 = id;
};
$scope.changeXX = function(pid, cid, aid) {
console.log("===============", $scope.ppid, $scope.ccid, $scope.aaid, "===============");
var pid = pid || $scope.ppid;
$scope.cityArr = [];
for (var i = 0; i < $scope.list.length; i++) {
if ($scope.list[i].id == pid) {
break;
}
}
for (var j = 0; j < $scope.list[i].regions.length; j++) {
$scope.cityArr.push({ id: $scope.list[i].regions[j].id, name: $scope.list[i].regions[j].name });
if (j == 0) {
$scope.areaArr = [];
for (var k = 0; k < $scope.list[i].regions[j].regions.length; k++) {
$scope.areaArr.push({ id: $scope.list[i].regions[j].regions[k].id, name: $scope.list[i].regions[j].regions[k].name });
}
}
}
console.log($scope.cityArr, $scope.areaArr);
$scope.areaArr.unshift({ id: 0, name: "请选择区域" });
$scope.ccid = $scope.cityArr[0].id;
$scope.aaid = $scope.areaArr[0].id;
$scope.ppid = pid;
$timeout(function() {
for (var i = 0; i < angular.element("body").find("option:selected").length; i++) {
if (angular.element("body").find("option:selected")[i].label == '') {
angular.element("body").find("option:selected")[i].remove('option');
}
}
}, 50);
}
$scope.changeYY = function(pid, cid) {
console.log("===============", $scope.ppid, $scope.ccid, $scope.aaid, "===============");
var pid = pid || $scope.ppid;
var cid = cid || $scope.ccid;
//debugger;
$scope.areaArr = [];
for (var i = 0; i < $scope.list.length; i++) {
if ($scope.list[i].id == pid) {
break;
}
}
for (var j = 0; j < $scope.list[i].regions.length; j++) {
if ($scope.list[i].regions[j].id == cid) {
break;
}
}
for (var k = 0; k < $scope.list[i].regions[j].regions.length; k++) {
$scope.areaArr.push({ id: $scope.list[i].regions[j].regions[k].id, name: $scope.list[i].regions[j].regions[k].name });
}
$scope.areaArr.unshift({ id: 0, name: "请选择区域" });
$scope.aaid = $scope.areaArr[0].id;
$scope.ppid = pid;
$scope.ccid = cid;
$timeout(function() {
for (var i = 0; i < angular.element("body").find("option:selected").length; i++) {
if (angular.element("body").find("option:selected")[i].label == '') {
angular.element("body").find("option:selected")[i].remove('option');
}
}
}, 50);
}
$scope.changeZZ = function(pid, cid, aid) {
console.log("===============", $scope.ppid, $scope.ccid, $scope.aaid, "===============");
$scope.ppid = pid;
$scope.ccid = cid;
$scope.aaid = aid;
console.log("###############", $scope.ppid, $scope.ccid, $scope.aaid, "###############");
$timeout(function() {
for (var i = 0; i < angular.element("body").find("option:selected").length; i++) {
if (angular.element("body").find("option:selected")[i].label == '') {
angular.element("body").find("option:selected")[i].remove('option');
}
}
}, 50);
}
$scope.column = {
name_zh: '',
name_en: '',
is_head: $scope.selected,
link: '',
logo1: '',
logo2: '',
street: '',
summery1: '',
summery2: '',
addr: {
"province_id": $scope.selected1,
"city_id": $scope.selected2,
"area_id": $scope.selected3,
"street": '',
},
e_mail: '',
blog: '',
we_chat: '',
weixin: '',
tell: '',
fax: '',
code: '',
points1: '',
points2: '',
points: '',
order: 0,
is_show: 0
};
$scope.column.type = 2;
$scope.isadd = true;
$scope.checkinput = function() {
if ($scope.column.name_zh == '') {
toastr.error('公司名称输入不能为空', '', {});
return false;
}
if (!$scope.isNumber($scope.column.order)) {
toastr.error('显示顺序格式不正确', '', {});
return false;
}
if($scope.selected == 1 || $scope.selected ==0){
if ($scope.column.name_en == '') {
toastr.error('公司英文名称输入不能为空', '', {});
return false;
}
if ($scope.column.logo1 == '') {
toastr.error('公司logo1图片不能为空', '', {});
return false;
}
if ($scope.column.logo2 == '') {
toastr.error('公司logo2图片不能为空', '', {});
return false;
}
if ($scope.column.summery1 == '') {
toastr.error('公司简介1不能为空', '', {});
return false;
}
if ($scope.column.summery2 == '') {
toastr.error('公司简介2不能为空', '', {});
return false;
}
}
if ($scope.isadd) {
if ((typeof $scope.ppid == 'undefined')) {
toastr.error('请选择省份', '', {});
return false;
}
if ((typeof $scope.ccid == 'undefined')) {
toastr.error('请选择市区', '', {});
return false;
}
//if((typeof $scope.selected3=='undefined')){
// toastr.error('请选择区域', '', {});
// return false;
//}
}
if ($scope.column.street == '') {
toastr.error('街道地址不能为空', '', {});
return false;
}
if ($scope.column.code == '') {
toastr.error('公司邮编不能为空', '', {});
return false;
}
if (!$scope.isNumber($scope.column.code)) {
toastr.error('输入邮编格式不正确', '', {});
return false;
}
if ($scope.column.code.length != 6) {
toastr.error('输入邮编格式不正确', '', {});
return false;
}
if ($scope.column.tell == '') {
toastr.error('客服电话不能为空', '', {});
return false;
}
if ($scope.column.link == '') {
toastr.error('公司网址不能为空', '', {});
return false;
}
//if(!$scope.isUrl($scope.column.link)){
// toastr.error('输入公司网址不正确', '', {});
// return false;
//}
if ($scope.column.points1 == '') {
toastr.error('经度不能为空', '', {});
return false;
}
//if(!$scope.isAltitude($scope.column.points1)){
// toastr.error('经度输入格式不正确', 'Warning', {});
// return false;
//}
if ($scope.column.points2 == '') {
toastr.error('纬度不能为空', '', {});
return false;
}
//if(!$scope.isLatitudes($scope.column.points2)){
// toastr.error('纬度输入格式不正确', 'Warning', {});
// return false;
//}
if ($scope.selected == 1) {
if ($scope.column.blog == '') {
toastr.error('公司微博输入不能为空', '', {});
return false;
}
//if(!$scope.isUrl($scope.column.blog)){
// toastr.error('输入微博网址不正确', '', {});
// return false;
//}
if ($scope.column.we_chat == '') {
toastr.error('公司官方微信输入不能为空', '', {});
return false;
}
if ($scope.column.e_mail == '') {
toastr.error('公司官方邮箱输入不能为空', '', {});
return false;
}
if (!$scope.isEmail($scope.column.e_mail)) {
toastr.error('输入邮箱格式不正确', '', {});
return false;
}
if ($scope.column.fax == '') {
toastr.error('公司传真输入不能为空', '', {});
return false;
} else {
return true;
}
}
/**2017/05/03**QA:CTZQ-97**START BY zuobaiquan**/
//if($scope.selected==0||$scope.selected==2) {
// if($scope.column.weixin==''){
// toastr.error('公司微信号输入不能为空', 'Warning', {});
// return false;
// }
// if($scope.column.e_mail==''){
// toastr.error('公司官方邮箱输入不能为空', 'Warning', {});
// return false;
// }
// if(!$scope.isEmail($scope.column.e_mail)){
// toastr.error('输入邮箱格式不正确', 'Warning', {});
// return false;
// }
// else{
// return true;
// }
//}
/**2017/05/03**QA:CTZQ-97**END BY zuobaiquan**/
else {
return true;
}
}
$scope.is_show = true;
$scope.disable = false;
$scope.add = function() {
console.log('add');
console.log($scope.column);
return ;
if ($scope.checkinput()) {
if ($scope.disable) {
return;
}
$scope.isadd = true;
if($scope.column.type == 2){
$scope.column.is_show = 1;
}
$scope.column.addr.street = $scope.column.street;
$scope.column.addr.province_id = $scope.selected1 || 0;
$scope.column.addr.city_id = $scope.selected2;
$scope.column.addr.area_id = $scope.selected3;
$scope.column.points = $scope.column.points1 + "," + $scope.column.points2;
$scope.disable = true;
apiRequest.postJson('/home/column-add', $scope.column, function(res) {
if (res.code == "200") {
toastr.success('添加成功');
$state.go("home.childcom", {}, { reload: true });
} else {
$scope.disable = false;
toastr.error(res.message, '');
$scope.$apply();
}
});
} else {
console.log("输入内容错误");
}
};
$scope.update = function() {
if ($scope.aaid == null && ($scope.ccid != null)) {
for (var i = 0; i < $scope.list.length; i++) {
if ($scope.list[i].id == $scope.ppid) {
break;
}
}
for (var j = 0; j < $scope.list[i].regions.length; j++) {
if ($scope.list[i].regions[j].id == $scope.ccid) {
break;
}
}
$scope.aaid = $scope.list[i].regions[j].regions[0].id;
}
if ($scope.aaid == null && ($scope.ccid == null)) {
for (var i = 0; i < $scope.list.length; i++) {
if ($scope.list[i].id == $scope.ppid) {
break;
}
}
$scope.ccid = $scope.list[i].regions[0].id;
$scope.aaid = $scope.list[i].regions[0].regions[0].id;
}
if ($scope.aaid != null && ($scope.ccid == null)) {
for (var i = 0; i < $scope.list.length; i++) {
if ($scope.list[i].id == $scope.ppid) {
break;
}
}
$scope.ccid = $scope.list[i].regions[0].id;
}
console.log("#################", $scope.ppid, $scope.ccid, $scope.aaid);
$scope.isadd = false;
if ($scope.checkinput()) {
$scope.column.type = 2;
$scope.column.addr = new Object();
$scope.column.addr = $scope.column.address;
delete $scope.column.address;
console.log($scope.ppid)
$scope.column.addr.province_id = $scope.ppid || 0;
$scope.column.addr.city_id = $scope.ccid;
$scope.column.addr.area_id = $scope.aaid;
$scope.column.points = $scope.column.points1 + "," + $scope.column.points2;
$scope.column.addr.street = $scope.column.street;
console.log(11111, $scope.column);
apiRequest.postJson('/home/column-update', $scope.column, function(res) {
if (res.code == "200") {
toastr.success('修改成功');
$state.go("home.childcom", {}, { reload: true });
} else {
toastr.error(res.message, '');
$scope.$apply();
}
}, function(res2) {
toastr.error(res2.data.message, '');
});
} else {
console.log("输入内容错误");
}
}
$scope.submit = function(){
if($scope.tip == '修改'){
$scope.update();
}else{
$scope.add();
}
}
}
})();
总结一下上面这个文件的问题：
- 代码一共有500 ，属性赋值，初始化逻辑， 在页面中多处位置出现，不利于维护，可读性极差
- 函数命名风格不统一，有的是小驼峰式写法，有的是用
-链接的小写字母，推荐用小驼峰命名法 - 函数命名不规范，甚至乱起名字
- 无用的
console和注释太多，应该及时删掉 - 没有格式化
- 其他问题
修改的思路如下：
/**
* @author yuxiaojing
* created on 2017/06/20
* 公司信息管理 详情页。 //文件注释一点要写，而且要写清楚此文件的用途
*/
(function() {
'use strict';
angular.module('BlurAdmin.pages.home')
.controller('ChildCompanyEditCtrl', ChildCompanyEditCtrl);
//控制器的命名采用驼峰式命名法
/** @ngInject */
function ChildCompanyEditCtrl($scope, $state, $timeout, $stateParams, toastr, $uibModal, apiRequest, QINIU_LINK, IMAGE_UPLOAD) {
/***基本属性的定义***/
//非表单提交的变量写在一个对象里
$scope.global = {
companyType: [
{ id: 0, name: "子公司" },
{ id: 2, name: "分公司" }
],
is_headcom: true,
issubcom: true,
selected: 0,
}
//表单提交的参数写在一个对象里
$scope.column = {
name_zh: '',
name_en: '',
is_head: $scope.selected,
link: '',
logo1: '',
logo2: '',
street: '',
summery1: '',
summery2: '',
addr: {
"province_id": $scope.selected1,
"city_id": $scope.selected2,
"area_id": $scope.selected3,
"street": '',
},
e_mail: '',
blog: '',
we_chat: '',
weixin: '',
tell: '',
fax: '',
code: '',
points1: '',
points2: '',
points: '',
order: 0,
is_show: 0
};
/***基本属性的定义***/
/***声明函数***/
$scope.fn = {
getCityList: getCityList,
getCompanyDetail: getCompanyDetail,
changingType: changingType,
confirm: confirm
}
/***声明函数***/
/***初始化逻辑，如果太多可以写一个初始化函数***/
if ($scope.selected != 1) {
$scope.is_headcom = false;
}
if ($stateParams.id) {
$scope.tip = '修改';
} else {
$scope.tip = '添加';
}
$scope.getdefaultData();
if ($stateParams.id) {
$scope.getInfo();
}
$scope.column = {
address: {
street: '',
}
};
$scope.column.type = 2;
$scope.isadd = true;
$scope.is_show = true;
$scope.disable = false;
/***初始化逻辑，如果太多可以写一个初始化函数***/
/***最后是函数的实现***/
// $scope.getdefaultData = function() {}
// 函数名无意思，这个函数的功能是获取城市列表，所以不妨改成getCityList
function getCityList() {
apiRequest.get('/home/city-list', {}, function(res) {
if (res.code == "200") {
$scope.list = res.data.regions;
$scope.provinceArr = [];
$scope.cityArr = [];
$scope.areaArr = [];
for (var i = 0; i < $scope.list.length; i++) {
var vp = $scope.list[i];
$scope.provinceArr.push({
id: vp.id,
name: vp.name
})
if (vp.id != $scope.ppid) continue;
for (var j = 0; j < vp.regions.length; j++) {
var vc = vp.regions[j];
$scope.cityArr.push({
id: vc.id,
name: vc.name
})
if (vc.id != $scope.ccid) continue;
for (var k = 0; k < vc.regions.length; k++) {
var va = vc.regions[k];
$scope.areaArr.push({
id: va.id,
name: va.name
})
}
}
}
$scope.areaArr.unshift({ id: 0, name: "请选择区域" });
} else {
toastr.error(res.message, '');
$scope.$apply();
}
});
}
//根据id获取该id对应的信息
// $scope.getInfo = function() {}
//这个函数的功能是根据id获取公司详细信息，所以不妨改成getCompanyDetail 活着 getCompanyInfo
function getCompanyDetail() {
apiRequest.get('/home/column-detail', { id: $stateParams.id, type: 2 }, function(res) {
if (res.code == "200") {
//seccess operate
} else {
toastr.error(res.message, '');
$scope.$apply();
}
});
}
/***多余的注释应该去掉，并且表单的验证应该在页面中就完成，参考模版项目中的表单验证***/
//判断链接地址是否正确
//$scope.isUrl=function(str){
// var reg=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
// return reg.test(str);
//}
//判断数字是否正确
$scope.isNumber = function(str) {
var reg = /^[0-9]*$/;
return reg.test(str);
}
////判断英文是否正确
//$scope.isLetter=function(str){
// var reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
// if(reg.test(str)){
// return false;
// }
// else{
// return true;
// }
//}
//判断邮箱是否正确
$scope.isEmail = function(str) {
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
return reg.test(str);
}
////判断输入的经度是否正确
//$scope.isAltitude=function(str){
// var reg=/^(((\d|[1-9]\d|1[1-7]\d|0)\.\d{0,4})|(\d|[1-9]\d|1[1-7]\d|0{1,3})|180\.0{0,4}|180)$/;
// return reg.test(str);
//}
//
////判断输入的纬度是否正确
//$scope.isLatitudes=function(str){
// var reg=/^([0-8]?\d{1}\.\d{0,4}|90\.0{0,4}|[0-8]?\d{1}|90)$/;
// return reg.test(str);
//}
/***多余的注释应该去掉，并且表单的验证应该在页面中就完成，参考模版项目中的表单验证***/
//此函数的功能是当前台修改公司类型的时候，一些属性的值应该做些调整，不妨改名成changingType
// $scope.change_sel = function(selected) {
// }
function changingType(type) {
$scope.selected = type;
$scope.column.is_head = type;
if (selected == 0) {
$scope.issubcom = true;
} else {
$scope.issubcom = false;
}
}
//此函数的功能是，当退出页面的时候，给出弹出按提示，函数名与功能基本符合，但是应用场景无法一眼看出，应该写
//个注释
// $scope.confirm = function(link) {
// };
/**
* 退出页面提示弹窗
* @param {string} link 跳转的路由
* @return {[type]}
*/
function confirm(link) {
$scope.modal = {
link: link,
}
$uibModal.open({
animation: true,
templateUrl: 'app/pages/ui/modals/modalTemplates/confirm.html',
controller: 'ModalCtrl',
size: 'md',
resolve: {
modal: function() {
return $scope.modal;
}
}
});
}
/***这几个方法是改变下拉框的值，修改相应属性的值，不推荐这种写法，
应该在select标签中用ng-model绑定相应的属性***/
$scope.isShowcg = function(is_show) {
$scope.column.is_show = is_show;
}
$scope.changeX = function(id) {
$scope.selected1 = id;
};
$scope.changeY = function(id) {
$scope.selected2 = id;
};
$scope.changeZ = function(id) {
$scope.selected3 = id;
};
/***这几个方法是改变下拉框的值，修改相应属性的值，不推荐这种写法，
应该在select标签中用ng-model绑定相应的属性***/
/***这几个方法是一个省市区三级联动的功能，
并且项目中还有其他地方需要用到此功能
因此应该提取出来写成一个指令
并且函数命名实在是。。。
***/
$scope.changeXX = function(pid, cid, aid) {
console.log("===============", $scope.ppid, $scope.ccid, $scope.aaid, "===============");
var pid = pid || $scope.ppid;
$scope.cityArr = [];
for (var i = 0; i < $scope.list.length; i++) {
if ($scope.list[i].id == pid) {
break;
}
}
for (var j = 0; j < $scope.list[i].regions.length; j++) {
$scope.cityArr.push({ id: $scope.list[i].regions[j].id, name: $scope.list[i].regions[j].name });
if (j == 0) {
$scope.areaArr = [];
for (var k = 0; k < $scope.list[i].regions[j].regions.length; k++) {
$scope.areaArr.push({ id: $scope.list[i].regions[j].regions[k].id, name: $scope.list[i].regions[j].regions[k].name });
}
}
}
console.log($scope.cityArr, $scope.areaArr);
$scope.areaArr.unshift({ id: 0, name: "请选择区域" });
$scope.ccid = $scope.cityArr[0].id;
$scope.aaid = $scope.areaArr[0].id;
$scope.ppid = pid;
$timeout(function() {
for (var i = 0; i < angular.element("body").find("option:selected").length; i++) {
if (angular.element("body").find("option:selected")[i].label == '') {
angular.element("body").find("option:selected")[i].remove('option');
}
}
}, 50);
}
$scope.changeYY = function(pid, cid) {
console.log("===============", $scope.ppid, $scope.ccid, $scope.aaid, "===============");
var pid = pid || $scope.ppid;
var cid = cid || $scope.ccid;
//debugger;
$scope.areaArr = [];
for (var i = 0; i < $scope.list.length; i++) {
if ($scope.list[i].id == pid) {
break;
}
}
for (var j = 0; j < $scope.list[i].regions.length; j++) {
if ($scope.list[i].regions[j].id == cid) {
break;
}
}
for (var k = 0; k < $scope.list[i].regions[j].regions.length; k++) {
$scope.areaArr.push({ id: $scope.list[i].regions[j].regions[k].id, name: $scope.list[i].regions[j].regions[k].name });
}
$scope.areaArr.unshift({ id: 0, name: "请选择区域" });
$scope.aaid = $scope.areaArr[0].id;
$scope.ppid = pid;
$scope.ccid = cid;
$timeout(function() {
for (var i = 0; i < angular.element("body").find("option:selected").length; i++) {
if (angular.element("body").find("option:selected")[i].label == '') {
angular.element("body").find("option:selected")[i].remove('option');
}
}
}, 50);
}
$scope.changeZZ = function(pid, cid, aid) {
console.log("===============", $scope.ppid, $scope.ccid, $scope.aaid, "===============");
$scope.ppid = pid;
$scope.ccid = cid;
$scope.aaid = aid;
console.log("###############", $scope.ppid, $scope.ccid, $scope.aaid, "###############");
$timeout(function() {
for (var i = 0; i < angular.element("body").find("option:selected").length; i++) {
if (angular.element("body").find("option:selected")[i].label == '') {
angular.element("body").find("option:selected")[i].remove('option');
}
}
}, 50);
}
/***这几个方法是一个省市区三级联动的功能，
并且项目中还有其他地方需要用到此功能
因此应该提取出来写成一个指令
并且函数命名实在是。。 ***/
/*** 提交接口之前的数据check ,应该要简化此方法中的逻辑，
大部分的表单的验证应该在页面中就完成，参考模版项目中的表单验证
有些第三方插件无法直接用ng-model直接绑定才需要在这里检验
函数名应该叫checkInput或者 checkForm 或者checkData
***/
$scope.checkinput = function() {
if ($scope.column.name_zh == '') {
toastr.error('公司名称输入不能为空', '', {});
return false;
}
if (!$scope.isNumber($scope.column.order)) {
toastr.error('显示顺序格式不正确', '', {});
return false;
}
if ($scope.selected == 1 || $scope.selected == 0) {
if ($scope.column.name_en == '') {
toastr.error('公司英文名称输入不能为空', '', {});
return false;
}
if ($scope.column.logo1 == '') {
toastr.error('公司logo1图片不能为空', '', {});
return false;
}
if ($scope.column.logo2 == '') {
toastr.error('公司logo2图片不能为空', '', {});
return false;
}
if ($scope.column.summery1 == '') {
toastr.error('公司简介1不能为空', '', {});
return false;
}
if ($scope.column.summery2 == '') {
toastr.error('公司简介2不能为空', '', {});
return false;
}
}
if ($scope.isadd) {
if ((typeof $scope.ppid == 'undefined')) {
toastr.error('请选择省份', '', {});
return false;
}
if ((typeof $scope.ccid == 'undefined')) {
toastr.error('请选择市区', '', {});
return false;
}
//if((typeof $scope.selected3=='undefined')){
// toastr.error('请选择区域', '', {});
// return false;
//}
}
if ($scope.column.street == '') {
toastr.error('街道地址不能为空', '', {});
return false;
}
if ($scope.column.code == '') {
toastr.error('公司邮编不能为空', '', {});
return false;
}
if (!$scope.isNumber($scope.column.code)) {
toastr.error('输入邮编格式不正确', '', {});
return false;
}
if ($scope.column.code.length != 6) {
toastr.error('输入邮编格式不正确', '', {});
return false;
}
if ($scope.column.tell == '') {
toastr.error('客服电话不能为空', '', {});
return false;
}
if ($scope.column.link == '') {
toastr.error('公司网址不能为空', '', {});
return false;
}
//if(!$scope.isUrl($scope.column.link)){
// toastr.error('输入公司网址不正确', '', {});
// return false;
//}
if ($scope.column.points1 == '') {
toastr.error('经度不能为空', '', {});
return false;
}
//if(!$scope.isAltitude($scope.column.points1)){
// toastr.error('经度输入格式不正确', 'Warning', {});
// return false;
//}
if ($scope.column.points2 == '') {
toastr.error('纬度不能为空', '', {});
return false;
}
//if(!$scope.isLatitudes($scope.column.points2)){
// toastr.error('纬度输入格式不正确', 'Warning', {});
// return false;
//}
if ($scope.selected == 1) {
if ($scope.column.blog == '') {
toastr.error('公司微博输入不能为空', '', {});
return false;
}
//if(!$scope.isUrl($scope.column.blog)){
// toastr.error('输入微博网址不正确', '', {});
// return false;
//}
if ($scope.column.we_chat == '') {
toastr.error('公司官方微信输入不能为空', '', {});
return false;
}
if ($scope.column.e_mail == '') {
toastr.error('公司官方邮箱输入不能为空', '', {});
return false;
}
if (!$scope.isEmail($scope.column.e_mail)) {
toastr.error('输入邮箱格式不正确', '', {});
return false;
}
if ($scope.column.fax == '') {
toastr.error('公司传真输入不能为空', '', {});
return false;
} else {
return true;
}
}
/**2017/05/03**QA:CTZQ-97**START BY zuobaiquan**/
//if($scope.selected==0||$scope.selected==2) {
// if($scope.column.weixin==''){
// toastr.error('公司微信号输入不能为空', 'Warning', {});
// return false;
// }
// if($scope.column.e_mail==''){
// toastr.error('公司官方邮箱输入不能为空', 'Warning', {});
// return false;
// }
// if(!$scope.isEmail($scope.column.e_mail)){
// toastr.error('输入邮箱格式不正确', 'Warning', {});
// return false;
// }
// else{
// return true;
// }
//}
/**2017/05/03**QA:CTZQ-97**END BY zuobaiquan**/
else {
return true;
}
}
/*** 提交接口之前的数据check ,应该要简化此方法中的逻辑，
大部分的表单的验证应该在页面中就完成，参考模版项目中的表单验证
有些第三方插件无法直接用ng-model直接绑定才需要在这里检验
***/
$scope.add = function() {
console.log('add');
console.log($scope.column);
return;
if ($scope.checkinput()) {
if ($scope.disable) {
return;
}
$scope.isadd = true;
if ($scope.column.type == 2) {
$scope.column.is_show = 1;
}
$scope.column.addr.street = $scope.column.street;
$scope.column.addr.province_id = $scope.selected1 || 0;
$scope.column.addr.city_id = $scope.selected2;
$scope.column.addr.area_id = $scope.selected3;
$scope.column.points = $scope.column.points1 + "," + $scope.column.points2;
$scope.disable = true;
apiRequest.postJson('/home/column-add', $scope.column, function(res) {
if (res.code == "200") {
toastr.success('添加成功');
$state.go("home.childcom", {}, { reload: true });
} else {
$scope.disable = false;
toastr.error(res.message, '');
$scope.$apply();
}
});
} else {
console.log("输入内容错误");
}
};
$scope.update = function() {
if ($scope.aaid == null && ($scope.ccid != null)) {
for (var i = 0; i < $scope.list.length; i++) {
if ($scope.list[i].id == $scope.ppid) {
break;
}
}
for (var j = 0; j < $scope.list[i].regions.length; j++) {
if ($scope.list[i].regions[j].id == $scope.ccid) {
break;
}
}
$scope.aaid = $scope.list[i].regions[j].regions[0].id;
}
if ($scope.aaid == null && ($scope.ccid == null)) {
for (var i = 0; i < $scope.list.length; i++) {
if ($scope.list[i].id == $scope.ppid) {
break;
}
}
$scope.ccid = $scope.list[i].regions[0].id;
$scope.aaid = $scope.list[i].regions[0].regions[0].id;
}
if ($scope.aaid != null && ($scope.ccid == null)) {
for (var i = 0; i < $scope.list.length; i++) {
if ($scope.list[i].id == $scope.ppid) {
break;
}
}
$scope.ccid = $scope.list[i].regions[0].id;
}
console.log("#################", $scope.ppid, $scope.ccid, $scope.aaid);
$scope.isadd = false;
if ($scope.checkinput()) {
$scope.column.type = 2;
$scope.column.addr = new Object();
$scope.column.addr = $scope.column.address;
delete $scope.column.address;
console.log($scope.ppid)
$scope.column.addr.province_id = $scope.ppid || 0;
$scope.column.addr.city_id = $scope.ccid;
$scope.column.addr.area_id = $scope.aaid;
$scope.column.points = $scope.column.points1 + "," + $scope.column.points2;
$scope.column.addr.street = $scope.column.street;
console.log(11111, $scope.column);
apiRequest.postJson('/home/column-update', $scope.column, function(res) {
if (res.code == "200") {
toastr.success('修改成功');
$state.go("home.childcom", {}, { reload: true });
} else {
toastr.error(res.message, '');
$scope.$apply();
}
}, function(res2) {
toastr.error(res2.data.message, '');
});
} else {
console.log("输入内容错误");
}
}
$scope.submit = function() {
if ($scope.tip == '修改') {
$scope.update();
} else {
$scope.add();
}
}
}
})();
最后整理一下,看一个清爽的版本：
/**
* @author yuxiaojing
* created on 2017/06/20
* 公司信息管理 详情页。
*/
(function() {
'use strict';
angular.module('BlurAdmin.pages.home')
.controller('ChildCompanyEditCtrl', ChildCompanyEditCtrl);
/** @ngInject */
function ChildCompanyEditCtrl($scope, $state, $timeout, $stateParams, toastr, $uibModal, apiRequest, QINIU_LINK, IMAGE_UPLOAD) {
$scope.global = {
companyType: [
{ id: 0, name: "子公司" },
{ id: 2, name: "分公司" }
],
is_headcom: true,
issubcom: true,
selected: 0,
tip:''
}
$scope.column = {
name_zh: '',
name_en: '',
is_head: $scope.selected,
link: '',
logo1: '',
logo2: '',
street: '',
summery1: '',
summery2: '',
addr: {
"province_id": $scope.selected1,
"city_id": $scope.selected2,
"area_id": $scope.selected3,
"street": '',
},
e_mail: '',
blog: '',
we_chat: '',
weixin: '',
tell: '',
fax: '',
code: '',
points1: '',
points2: '',
points: '',
order: 0,
is_show: 0
};
$scope.fn = {
init:init,
getCityList: getCityList,
getCompanyDetail: getCompanyDetail,
changingType: changingType,
confirm: confirm,
submit:submit
}
$scope.fn.init();
function init(){
if ($stateParams.id) {
$scope.global.tip = '修改';
} else {
$scope.global.tip = '添加';
}
/**
......
**/
}
function getCityList() {
apiRequest.get('/home/city-list', {}, function(res) {
if (res.code == "200") {
/**
......
**/
} else {
toastr.error(res.message, '');
$scope.$apply();
}
});
}
function getCompanyDetail() {
apiRequest.get('/home/column-detail', { id: $stateParams.id, type: 2 }, function(res) {
if (res.code == "200") {
//seccess operate
/**
......
**/
} else {
toastr.error(res.message, '');
$scope.$apply();
}
});
}
function changingType(type) {
$scope.selected = type;
$scope.column.is_head = type;
if (selected == 0) {
$scope.issubcom = true;
} else {
$scope.issubcom = false;
}
}
/**
* 退出页面提示弹窗
* @param {string} link 跳转的路由
* @return {[type]}
*/
function confirm(link) {
$scope.modal = {
link: link,
}
$uibModal.open({
animation: true,
templateUrl: 'app/pages/ui/modals/modalTemplates/confirm.html',
controller: 'ModalCtrl',
size: 'md',
resolve: {
modal: function() {
return $scope.modal;
}
}
});
}
function checkInput(){
/**
......
**/
}
/**
* 添加新公司
* @return
*/
function add(){
/**
......
**/
apiRequest.postJson('/home/column-add', $scope.column, function(res) {
if (res.code == "200") {
toastr.success('添加成功');
$state.go("home.childcom", {}, { reload: true });
} else {
$scope.disable = false;
toastr.error(res.message, '');
$scope.$apply();
}
});
}
/**
* 更新公司信息
* @return
*/
function update(){
/**
......
**/
apiRequest.postJson('/home/column-update', $scope.column, function(res) {
if (res.code == "200") {
toastr.success('修改成功');
$state.go("home.childcom", {}, { reload: true });
} else {
toastr.error(res.message, '');
$scope.$apply();
}
}, function(res2) {
toastr.error(res2.data.message, '');
});
}
/**
* 提交表单
* @return
*/
function submit(){
if ($scope.global.tip == '修改') {
update();
} else {
add();
}
}
}
})();
特别声明：
此规范是建立在前端开发基本规范上之上的，具体参考下面两篇文档
- 前端开发规范手册
- javascript 基本规范