1. 代碼復(fù)用性太差：
比如利用模態(tài)框?qū)崿F(xiàn)相關(guān)信息的創(chuàng)建與修改功能纹安，明明可以用一個模態(tài)框完成的自己卻非要寫兩個流济，雖然增強了代碼的可讀性和可維護性奔则，但是代碼的復(fù)用性赢笨，代碼的性能都大幅度的降低了未蝌。 仔細(xì)想了想，主要的問題在于自己對angualr的ng-model的指定茧妒，創(chuàng)建和修改可以用一套model實現(xiàn)萧吠，如：
<!--標(biāo)志信息-->
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"綁定，不管是添加還是修改桐筏，套用一個模態(tài)框即可纸型，而非必須用多個模態(tài)框來實現(xiàn)類似的功能。
2. 創(chuàng)建新的鍵值對的div：
由于理解錯了案子的意思九昧，所以最開始自己直接新建了兩個鍵值對的div绊袋，并且通過ng-show的方法控制顯示，后來清楚案子后想铸鹰，為什么一定要用兩個div來實現(xiàn)癌别，要是有多個鍵值對呢？100個怎么辦蹋笼？難道就去建立100個div嗎展姐？顯而易見，這種方法一定不行剖毯。后來自己用建立對象數(shù)組的方法實現(xiàn)相關(guān)功能圾笨。
<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來實現(xiàn)創(chuàng)建新的div逊谋，同時需要對相關(guān)數(shù)據(jù)在js里面進行初始化
<!--向thirdProperties添加對象-->
$scope.add = function () {
$scope.thirdProperties.push({
name: '',
key: '',
value: ''
})
};
當(dāng)執(zhí)行$scope.add()方法時擂达，系統(tǒng)向thirdProperties中push新的對象，從而使thirdProperties數(shù)量增加胶滋，HTML接收到相關(guān)信息板鬓，增加新的div。
但是究恤，因為是鍵值對的形式存在俭令，如果輸入相同的name呢？這應(yīng)該做怎樣的處理部宿？所以必須去遍歷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應(yīng)用
本項目中赫蛇，由于后臺沒有時間绵患，所以用了很多其他的接口，也不知道這樣對程序的運行有沒有造成很大的影響棍掐。
由于需要挨個獲取每一個渠道的開關(guān)狀態(tài)藏雏，所以把當(dāng)前廣告、當(dāng)前捆綁包的狀態(tài)綁定到了
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) {
<!--需要執(zhí)行的動作-->
$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：把每個元素通過函數(shù)傳遞到當(dāng)前匹配集合中奏寨，生成包含返回值的新的 jQuery 對象。
上面用到的map鹰服，把所有選中的apk的id提取到了一個數(shù)組中病瞳，發(fā)個后臺的是選中apk的id的對象集合
4. 字典
$scope.userStatus = {
'1': '正常',
'2': '刪除',
'3': '凍結(jié)',
'4': '綁定'
};
$scope.userList.forEach(function (item) {
item.status = $scope.userStatus[item.status];
});
由于后臺返回的user_status是用1、2悲酷、3套菜、4來區(qū)別每個的狀態(tài)的，所以用字典來修改顯示在web端的字段很方便之后的維護设易。
5. 對象遍歷
對于對象逗柴，都是以鍵值對的形式存在的，由于后臺設(shè)計的原因顿肺，每次給我的鍵都不是固定的值戏溺，所以需要客戶端去讀取相關(guān)的鍵并且顯示在頁面上，通過什么方式讀取呢屠尊？后臺哥哥給我講解了一下js的原理旷祸，并且通過for in的方式讀取鍵值對。
6. join
在開發(fā)過程中讼昆，由于有賽選條件托享，最開始的想法是if(){} else{}來實現(xiàn)，但是當(dāng)賽選條件太多之后浸赫，多重嵌套if(){}else{}語句闰围，不僅降低的程序的可讀性和可維護性，同時會不會影響程序性能掺炭？通過請教后臺哥哥得知，完全沒必要采用多重嵌套循環(huán)凭戴，可以通過判斷條件把符合條件的先關(guān)內(nèi)容push到數(shù)組涧狮，同時在生成url時，利用join方法，把數(shù)組拆分者冤，再在拆分的每一個數(shù)組中通過加入需要的&符號肤视。
$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("&");
};