1. 代码复用性太差:
比如利用模态框实现相关信息的创建与修改功能,明明可以用一个模态框完成的自己却非要写两个,虽然增强了代码的可读性和可维护性,但是代码的复用性,代码的性能都大幅度的降低了。 仔细想了想,主要的问题在于自己对angualr
的ng-model
的指定,创建和修改可以用一套model
实现,如:
<!--标志信息-->
var add_or_delete = 0;
<!--model信息-->
$scope.ngModel = {
'name' = '',
'id' = '',
'en_name' = '',
'channel' = ''
};
<!--添加-->
$scope.showAdd = function(){
add_or_delete = 1;
$scope.ngModel.name = '';
$scope.ngModel.id = '';
$scope.ngModel.en_name = '';
$scope.ngModel.channel = '';
};
<!--删除-->
$scope.showDelete = function(){
add_or_delete = 2;
$scope.ngModel.name = $scope.selectedMSG[0].name;
$scope.ngModel.id = $scope.selectedMSG[0].id;
$scope.ngModel.en_name = $scope.selectedMSG[0].en_name;
$scope.ngModel.channel = $scope.selectedMSG[0].channel;
};
<!--提交信息-->
$scope.commitInfo = function(){
var obj = $scope.ngModel;
switch (add_or_delete) {
case: 1{
$http({
header: {
'Authorization': headers
},
url: url,
data: obj,
method: method
}).success(function(data, header, config, status){
<!--添加操作-->
if(data.code != 0){
alert(data.error);
}
}).error(function(){
})
break;
}
case: 2{
$http: ({
header: {
'Authorization': headers
},
url: url,
data: obj,
method: method
}).success(function(data, header, config, status){
}).error(function(data, header, config, status){
})
}
}
}
在HTML
页面可以直接用ng-model="ngModel.name"
绑定,不管是添加还是修改,套用一个模态框即可,而非必须用多个模态框来实现类似的功能。
2. 创建新的键值对的div
:
由于理解错了案子的意思,所以最开始自己直接新建了两个键值对的div
,并且通过ng-show
的方法控制显示,后来清楚案子后想,为什么一定要用两个div
来实现,要是有多个键值对呢?100个怎么办?难道就去建立100个div
吗?显而易见,这种方法一定不行。后来自己用建立对象数组的方法实现相关功能。
<div class="modal-footer" style="float:left;" ng-if="showPack">
<input class="btn btn-success" type="button" style="width: 100px;display: block;float: left" value="收起" ng-click="pickUp()">
<span class="fa fa-plus-square fa-lg" style="display: block;float: left;margin-left: 20px;line-height: 35px" ng-click="add()"></span>
</div>
<div ng-repeat="item in thirdProperties" style="margin-bottom: 10px">
<div style="float: left">
<span class="addSpan">名称:</span>
<input class="form-control" style="width: 90px" ng-model="item.name">
</div>
<div style="float:left;">
<span class="addSpan">键:</span>
<input class="form-control" style="width: 90px" ng-model="item.key">
</div>
<div style="float:left;">
<span class="addSpan">值:</span>
<input class="form-control" style="width: 90px" ng-model="item.value">
</div>
</div>
在HTML
里面,自己利用angularjs
的ng-repeat
来实现创建新的div
,同时需要对相关数据在js
里面进行初始化
<!--向thirdProperties添加对象-->
$scope.add = function () {
$scope.thirdProperties.push({
name: '',
key: '',
value: ''
})
};
当执行$scope.add()
方法时,系统向thirdProperties
中push
新的对象,从而使thirdProperties
数量增加,HTML
接收到相关信息,增加新的div
。
但是,因为是键值对的形式存在,如果输入相同的name
呢?这应该做怎样的处理?所以必须去遍历thirdProperties
,寻找到具有相同的name
的键值对,把它们合并。
var result = {};
$scope.thirdProperties.forEach(function (item) {
var tmp = {};
if (!!result[item.name]) {
tmp = result[item.name];
}
tmp[item.key] = item.value;
result[item.name] = tmp;
});
3. jquery的filter应用
本项目中,由于后台没有时间,所以用了很多其他的接口,也不知道这样对程序的运行有没有造成很大的影响。
由于需要挨个获取每一个渠道的开关状态,所以把当前广告、当前捆绑包的状态绑定到了
auto_download
属性,
<td>
<select ng-change="changeAd(index)" ng-model="opt.id" ng-options="opt.id as opt.name for opt in addApk">
<option value="{{opt.value}}"></option>
</select>
</td>
filter:如果返回 true,则保留元素,否则元素将被移除。
$scope.channelListInner.filter(function (item) {
return item.auto_download;
}).forEach(function (item) {
<!--需要执行的动作-->
$http({
method: 'post',
url: $scope.testUrl + 'channels/apks?app_id=' + $scope.currentAppID + '&channel_id=' + item.id,
data: JSON.stringify({
auto_download: true, apks: $scope.selectedApkList.map(function (apk) {
return apk.id
})
}),
headers: {
'Authorization': window.__token
}
}).success(function (data, status, headers, config) {
if(data.code != 0){
alert(data.code);
return;
}
}).error(function (data, status, headers, config) {
alert(data.error);
})
})
map:把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。
上面用到的map,把所有选中的apk的id提取到了一个数组中,发个后台的是选中apk的id的对象集合
4. 字典
$scope.userStatus = {
'1': '正常',
'2': '删除',
'3': '冻结',
'4': '绑定'
};
$scope.userList.forEach(function (item) {
item.status = $scope.userStatus[item.status];
});
由于后台返回的user_status
是用1、2、3、4来区别每个的状态的,所以用字典来修改显示在web端的字段很方便之后的维护。
5. 对象遍历
对于对象,都是以键值对的形式存在的,由于后台设计的原因,每次给我的键都不是固定的值,所以需要客户端去读取相关的键并且显示在页面上,通过什么方式读取呢?后台哥哥给我讲解了一下js的原理,并且通过for in
的方式读取键值对。
6. join
在开发过程中,由于有赛选条件,最开始的想法是if(){} else{}
来实现,但是当赛选条件太多之后,多重嵌套if(){}else{}
语句,不仅降低的程序的可读性和可维护性,同时会不会影响程序性能?通过请教后台哥哥得知,完全没必要采用多重嵌套循环,可以通过判断条件把符合条件的先关内容push
到数组,同时在生成url
时,利用join
方法,把数组拆分,再在拆分的每一个数组中通过加入需要的&
符号。
$scope.getUrl = function () {
$scope.urlData = "";
var parameters = [];
if ($scope.selectIncome) {
parameters.push("type=" + $scope.selectIncome);
}
if ($scope.userID) {
parameters.push("uid=" + $scope.userID);
}
if ($scope.orderID) {
parameters.push("order_id=" + $scope.orderID);
}
if ($scope.selectApp) {
parameters.push("appid=" + $scope.selectApp);
}
if ($scope.selectChannel) {
parameters.push("channel_id=" + $scope.selectChannel);
}
if ($scope.startTime) {
$scope.tempStart = Date.parse(new Date($scope.startTime));
parameters.push("start=" + Math.round($scope.tempStart / 1000));
}
if ($scope.endTime) {
$scope.tempEnd = Date.parse(new Date($scope.endTime));
parameters.push("end=" + Math.round($scope.tempEnd / 1000));
}
$scope.urlData = window.url + "/v1/?offset=" + $scope.offset + "&count=15&" + parameters.join("&");
};