part-bid第三张卡《组织竞价》学习记录

 

 

 

• 报名出价者的信息显示在“竞价”页面上，页面上仅显示序号、姓名和联系方式信息，不显示具体出价
• “竞价”页面以列表形式显示报名者的个人信息并统计报名人数
• 点击“竞价”页面上的【结束】按钮，竞价结束，竞价人数从此固定不变，如果再发送一条报名出价信息给系统，页面不显示此报名者信息

• “JJ”不限制大小写；后面可以有空格
• 报名者发送“JJ+价格“到18601126251进行出价，系统接收到这条报名信息并返回报名者一条确认信息“恭喜！您已出价成功”
• 同一报名者发送多条出价信息。系统只记录第一条出价，对之后的出价请求，系统返回一条错误信息“您已成功出价，请勿重复出价”
• 系统在活动结束后接收到报名出价信息，系统返回出价者错误信息“对不起，活动已结束！”
• 系统在活动出价开始前接收到报名出价信息。系统返回出价者错误信息“对不起，活动尚未开始！”
• 系统接收到未报名者的出价信息。系统返回出价者错误信息“对不起，您没有报名此次活动！”

• 竞价开始后，组织者误点【结束】按钮。弹窗询问是否确实要终止此次竞价。点【是】结束本次竞价，点【否】页面恢复原状态
• 点击“竞价列表”页面中的“竞价1”查看竞价活动具体情况
• 当前正在进行的竞价活动以及所对应的活动名称底色为黄色。
• 当前竞价未结束之前，活动列表的“创建活动“按钮不能使用。
• “竞价列表”页面中处于出价状态的竞价底色为黄色
• 竞价开始后，“竞价列表”页面上方的【开始】按钮为灰色的不可点击状态
• 点击“竞价”页面上的【返回】按钮，返回到“竞价列表页面”，可以查看到新创建的竞价显示在竞价列表顶部
• 点击“竞价列表”页面上的【开始】按钮，开始一次新竞价，进入“竞价报名”页面
• 活动报名结束后，“活动报名”页面上的“结束”按钮变为灰色的不可点击状态。页面自动跳转到“竞价列表”页面
• 点击“竞价列表”页面上的【返回】按钮，页面返回到“活动列表”页面

• 在“竞价列表”页面中，可以查看到全部已创建的竞价活动

 对卡三的分析用了非常长的时间，主要是对数据存储结构的重新思考，之前每有一项活动，就会多建一个localStorage来存储相关的报名信息，无限创建活动，就会无限添加localStorage，虽然方便存储，但是数据间的内部联系更少，不利于以后对多数据的分析。另外选中的活动和正在进行的活动标识也是另外多加两个表来处理，分析数据时，需要取出更多表的内容。所以，我的第二次重构就是专门针对数据结构进行的。存储活动时，我添加了两个属性，即进行状态属性和选中状态属性，通过这两个属性，我可以得知哪一项活动正在进行，哪一项活动是当前页面的活动。而报名信息，则是将报名者的信息与他报名的活动相关联在一起，我可以通过活动，查找出该活动中每一位报名者的信息。同时，重构过程中，我也将竞价信息的数据结构写了进去，类似活动信息，不过添加一个竞价数属性，用来展示某一活动的第几次竞价。最终只需要四个表就能存储所有我想要的数据，并且轻松处理他们。另外，我也了解到，localStorage中可以进行无限的嵌套，比如在活动表中，活动名称下可以嵌套与之相关的报名者信息和该活动下的所有竞价。在某一竞价中，又有该竞价中所有出价者的出价信息。这样的话，一张表就能存储所有的数据。他的好处是，查询数据非常简单，我需要什么数据，通过每一层筛选就行了，逻辑特别清晰，但是他的缺点是，存储数据不太方便，不，应该是编写代码时，逻辑要整理得很清晰，每一层都要考虑到，所以最终我的办法仅仅是折中了一下，放弃了嵌套，增加了属性，就像数据库中的key值一样，联系每一张表。

在功能实现中，我印象比较深的是这段代码： 

     ($scope.prices = function() {

            $scope.price_number = price_sms().numbers;

            $scope.Messages = price_sms().messages;

        })()

函数被括号括起来，后面的括号里添加需要的参数，这样，函数就可以自己调用自己。

 function freshActivityList() {

            var signUpScope = angular.element("#page_head").scope();

            if(signUpScope != undefined)  {

                if (typeof(signUpScope.page_head) == "function") {

                    signUpScope.$apply(signUpScope.page_head.bind(signUpScope));

                }

            }

        }

这段代码则是页面自动刷新需要用到的，找到id为"page_head"的控件，重新加载这个控件，实现了控件的刷新，因为在页面中不是全部控件都需要刷新，所有这段代码作用在部分控件即可。

最开始我的理解是卡三是对卡一卡二的总结和加强练习。所以在做卡三时，又会有一些新的思考在里面，比如竞价信息的匹配就会比报名信息的匹配更加麻烦，而且活动列表页面也会根据竞价状态显示不一样的背景，又会向之前做的界面加入新的代码。其实这对于新手做这个简单的网页还是可以接受的问题，但是做实际项目还是要做全局的考虑，分小步走也是要站在全局的角度上，不然后期涉及全局的东西越多，修改起来就会越麻烦，影响了整体的效率。