工作日常--又是在一天的改八阿哥和小需求中度过

我也不知道我自己能坚持写工作日常博客多久

想想，每晚这么听着民谣总结一天的日常也是蛮好的。昨天的第一篇没有讲到我的职业和背景。我是在上海的一个码农，对万千码农之中的一个前端程序员。目前会写angular和vue。我是16年毕业的，在刚毕业去了一家做网站的外包公司待了算是一点多吧。具体时间我自己都不知道怎么计算。16年七月份算是正式拿到毕业证毕业，可是我在16年一月就在那家公司实习了。工资低到我自己都不好意思讲出来。

然后今年二月底跳槽辞职，不应该叫做跳槽辞职吧。我是直接裸辞的，具体为什么我要裸辞。因为我在之后的两个多月中找工作的时候深刻的了解到我辞职的明智之举。虽然有一年的工作经验，可是自己会的也不过是css2和部分CSS3，那时候甚至连angular和vue都没有真正的去了结果，更别说会想到我这里写代码片现在工作的日常是写angular1了。

我也不知道为什么，觉得写前端不是那么有意思。自己到目前位置还在看的书是《JavaScript高级程序设计》。这本书反正现在慢慢看也是觉得很受益的。算是js的入门工具书吧，最开始看这个书的时候感觉就像是打开了新世界一样。自己也在网上入手了java的工具书，名字叫做《java编程思想》第四版。

好吧，总结下今天的工作日常吧。其实今天感觉又犯了一些简单的弱智问题。比如我之前写了一个组件。大概的用处是下拉多选框。我负责的系统是用的angular.material框架，这个框架类似于bootstrap有自己的通用组件库和自己的一些css样式。下图是我实现的一个简单的下拉多选框的组件。

具体的使用如下图。

这个其实在我们使用的框架里面，是有类似的组件的。去看文档还不如我自己写一个。/捂脸 我不是时间多，只是单纯的不想去花很多时间看它组件的相关方法和回掉啥的。因为是不能直接拿过来用。所以就自己花了点时间写了一个组件了。

大概说下这个组件的具体使用吧。有两个参数，一个是ngModel，一个是datalist。很明显这两个变量都应该是数组。为了方便多元化的其他模块调用，我没有将输出的ngModel做出直接字符串输出。输出的是datalist中选中的元素直接添加进入ngModel中。可以在你需要的controller中自己去处理选中后的数组结构。

其实在这样子已经算是完成了基本功能了，突然想到之前产品告诉我需要在下拉列表中添加一个叫做‘全部门店’亦或者全部职位的东西。后台需要的接口数据类型是直接将数组对象转换为字符串就好了。代码如下

// 比如我拿到的全部门店ID是这样子的var storeIds = ["666666","111111","888888"];// 后台需要storeIds.join(',');// 也就是""666666","111111","888888""

其实想要实现这样子的数据结构，也不需要我的组件做出一些改变。数据自然可以拿得到，我只需要在将所有的ID循环出来然后添加到第一位就好了。然后代码大概是这样子

var storeList = [  {name:"测试门店1",id:"66666"},  {name:"测试门店2",id:"88888"}];var tempStoreCon = [];for(var i = 0;i < storeList.length;i++){   var temp = storeList[i];   tempStoreCon.push(temp.id)}storeList.unshift({ name:"全部门店", id:tempStoreCon.join(",")})

这样子其实就已经简单的实现了显示出来第一个是全部门店了。可是用户的操作习惯不会像你想的那么简单。在实际操作中，很有可能在选择了全部门店之后，有去操作点击任意一个已经选择了的门店。那么实际拿到的门店ID就会有重复。怎么办呢？其实解决方案有两种，一种是在拿到这个带有重复门店ID的数组之后，将全部门店的ID进行数组格式化，然后进行与已添加门店进行对比。其实这总处理方法很麻烦。再说了，我现在是写了一个组件。那么就要兼容使用全部这个。于是就在组件内部进行了处理。全部门店ID的获取是在组件内部拿到的。因为我有全部门店的数据，那么就在组件内部处理。外部当然也还要传入一个全部门店，外部传入的datalist中的全部门店不需要遍历出所有门店ID字符串。只需要在这个全部门店的对象中做一个特殊标记即可。然后逻辑全部在组件内部处理。最后实现出来就是，当如果有点击全部门店这个选项那么就删除其他的重复添加的门店，亦或者当添加单个门店之后就删除全部门店。

具体实现代码如下

             function chooseItem(item) {                    // 全部数据的Id                    var allIds = [];                    angular.forEach(scope.datalist, function(item1) {                        if (item1.id != "allId") {                            allIds.push(item1.id);                        }                    });                    if (item.id == "allId") {                        scope.ngModel.splice(0, scope.ngModel.length);                        scope.ngModel.push({ name: item.name, id: allIds.join(',') });                        hide();                        return;                    }                    var point = 0;                    angular.forEach(scope.ngModel, function(model) {                        if (item.id == model.id) {                            point++;                        }                    });                    if (point == 0) {                        angular.forEach(scope.ngModel, function(item2, index) {                            var temp = item2.id;                            if (temp == allIds.join(',')) {                                scope.ngModel.splice(index, 1);                            }                        });                        scope.ngModel.push(item);                    }                    hide()                }                function hide() {                    showData();                    if (scope.ngModel.length > 0) {                        scope.placeholder = '';                    }                }// 点击事件将被点击的元素的数据传入函数用来做出相应的判断

最后，，，今天还是蛮累的。有一个模块的代码，明明可以用一套代码完成的。解决硬生生的将他分了10个文件夹。明天去维护好这个模块。