招聘后台投递设置联动按钮迭代开发总结

       最近老博会代表夕阳再晨参展,乐帝负责统筹展区安排,这就逼迫乐帝需要思考有哪些是需要询问、哪些是需要酌情解决的。最后得出结论,举办活动所考虑的无非三件事:人、物、流程。人指的是人员组织与分工、即人的安排,物涉及物得摆放与交接,流程则是将人与物按照时间的顺序安排到位,组织活动特别像导演电影,人和物都在那里,如何组织起来才能体现出导演水平的高低。

   老博会归来有几点感悟:

  • 老年产业得到了越来越多公司机构的重视。
  • 老年人对除了药之外消费观念还需要慢慢引导。
  • 老年产业不缺少创新、缺少能够使资源有效整合的推广人才。
    遇到的事情总会超出我们的预期,所以在每件事中找出骨架或者流程化的东西就能游刃有余了,上述老博会虽按人、物、流程做了预演,真正做的时候,还是有出乎意料的问题出现。人也就这样发育着,抓着骨头,不断变得丰满多肉。
    这周在公司里,写了一个内推系统中,修改内推人信息的页面,相比之前开发内推系统来说,这次通过思维导图理清思路页面写的极其顺畅,高效的做事,离不开思考与总结。最近有点爱上思维导图这个神器了。
   完善信息页面交互流程:


    这周除了以上页面的开发,主要时间都花在修改招聘后台--投递设置选项中修改按钮联动了,这期间乐帝可谓兢兢业业的阅读源码,跟踪数据,总算将问题解决了。而回过头来看,还是走了不少弯路,乐帝好好回顾了从读源码到开发整个流程,再加上之前项目经验,总结出几点规律。
    规律一:
    不管是多页面开发还是单页面网站开发,前端逻辑上开发都会而且只会涉及到三种情境,这三种情境分别是页面间(或view间)通信、页面(或view)内部交互、与后台接口调用(存、取数据)。
    这三种情境总体来说是线性的:进入页面、页面渲染、页面交互、离开页面。

   规律二:
   这条规律相对前端MVC架构中父子视图关系来说,如下图所示:

      说到本次做到的项目,各个view视图树形关系,如下图所示:

  有了视图间树形关系,下一步只需要看父子视图数据或信号的传递,就可以快速掌握整个项目逻辑关系,本项目父子视图数据或信号传递渲染逻辑关系,如下图:



       再遇到项目时,首先理清楚父子视图关系、然后看数据传递,最后再按照规律一,统一思考整个项目逻辑,就会节省大量时间,高效完成工作了。

   下面则是本次项目中遇到的一些知识点:

   1.调用接口返回异步数据问题

   最近无论是做单页面项目,还是移动端多页面项目,都被异步返回数据折磨的够呛,最表层的问题是,当数据还没返回来时,你需要给用户一个提示。这次MVC架构中反映的问题更深层,如何处理好未返回数据时,模板渲染、其他函数执行的问题。

  这里使用了公司内部封装的一个异步接口调用方法:

_.getDataSync(
                new Talent.Model(), "MobileSetting/JobAdSetting/GetFormSystemFieldList", {
                    data: null
                }, "fetch"
            )

    如乐帝对延迟对象的讨论,这个异步调用接口方法返回的是一个延迟对象,这就回到了延迟对象的范畴。如下述代码所示:

var self = this;
            // 调用系统列表接口
            var dtd = self.getFormSystemFieldList();
            $.when(dtd).done(function(resp) {
                self.systemFieldList = resp;
                self.model = new Talent.Model({
                    systemFieldList: resp
                });
                //设置本view的model重新渲染数据到模板,再触发父视图将子视图显示出
                self.render();
                self.trigger("systemFieldListData", resp);

            });

      采用延迟对象方法,当执行完再执行回调,重新渲染数据至模板。MVC中渲染和显示即render和display是两个范畴。渲染是将数据填充到模板,显示才是将渲染好的模板显示在指定位置。

 这里解决异步调用取得view数据的方法即:采用延迟对象完成时,回调重新渲染数据至模板。

 另外要提到的一点是,接口报500,一般会是传参数有问题。

  由于一开始view有些变量是没有的,这里采用如下代码解决变量未定义的问题:

typeof fs

   2.view中html元素的取用

  以前在view中取用html元素,直接采用jquery dom对象方法取用,而这种方法起作用是有个前提的即:

$(document).ready()

            也即dom文档在浏览器加载完,并显示出来才能采用jquery dom对象取用的方法,这在MVC架构中就会存在当模板虽然渲染但是还没有显示(show)时,这样采用jquery方法取html元素是无效的。所以统一推荐采用以下方法取html元素:

var dataType = this.$el.find(".fieldList").find("option:selected").attr("data-dataType");

        即$el.find()这种层级选择方法。

   3.项目中用到的特殊视图类

  (1)Layout (官方文档为LayoutView)

  • LayoutView是ItemView和一系列Region对象的混合模式。
  • 对于渲染拥有多个子region应用布局非常理想。
  • layoutView 也可以用于CompositeView使多个view聚集。
  • 你可以在Regions中通过层叠使用layoutView 管理器操作复杂的view。
 (2)CompositeView
  • CompositeView 继承自CollectionView,作为混合视图被使用。
  • 常见使用场景:在树形结构中,既是枝条又是叶子的角色,即中间层view角色。或者在一个外层模板中,一个collection需要被渲染。
   不得不说,当真正做过项目了,才会体会到官方文档对其功能和使用场景描述的如此透彻。


     4.github合并代码操作

 (1)提交代码前,先查看当前状态


(2)如果需要添加文件则用add命令添加,否则采用checkout忽略添加

(3)本地提交所有文件并作注释


(4)合并远程分支


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章