完成贪玩蛇SDK后台管理系统后的一些反思

1. 代码复用性太差:

比如利用模态框实现相关信息的创建与修改功能,明明可以用一个模态框完成的自己却非要写两个,虽然增强了代码的可读性和可维护性,但是代码的复用性,代码的性能都大幅度的降低了。 仔细想了想,主要的问题在于自己对angualrng-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里面,自己利用angularjsng-repeat来实现创建新的div,同时需要对相关数据在js里面进行初始化

<!--向thirdProperties添加对象-->
$scope.add = function () {
    $scope.thirdProperties.push({
        name: '',
        key: '',
        value: ''
    })
};

当执行$scope.add()方法时,系统向thirdPropertiespush新的对象,从而使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应用

本项目中,由于后台没有时间,所以用了很多其他的接口,也不知道这样对程序的运行有没有造成很大的影响。

Paste_Image.png

由于需要挨个获取每一个渠道的开关状态,所以把当前广告、当前捆绑包的状态绑定到了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的方式读取键值对。

对象遍历.png

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("&");
};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,423评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,147评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,019评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,443评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,535评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,798评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,941评论 3 407
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,704评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,152评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,494评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,629评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,295评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,901评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,742评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,978评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,333评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,499评论 2 348

推荐阅读更多精彩内容