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

本文链接：https://blog.csdn.net/yingyiledi/article/details/41323175

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

老博会归来有几点感悟：

老年产业得到了越来越多公司机构的重视。
老年人对除了药之外消费观念还需要慢慢引导。
老年产业不缺少创新、缺少能够使资源有效整合的推广人才。

遇到的事情总会超出我们的预期，所以在每件事中找出骨架或者流程化的东西就能游刃有余了，上述老博会虽按人、物、流程做了预演，真正做的时候，还是有出乎意料的问题出现。人也就这样发育着，抓着骨头，不断变得丰满多肉。

这周在公司里，写了一个内推系统中，修改内推人信息的页面，相比之前开发内推系统来说，这次通过思维导图理清思路页面写的极其顺畅，高效的做事，离不开思考与总结。最近有点爱上思维导图这个神器了。

完善信息页面交互流程：

这周除了以上页面的开发，主要时间都花在修改招聘后台--投递设置选项中修改按钮联动了，这期间乐帝可谓兢兢业业的阅读源码，跟踪数据，总算将问题解决了。而回过头来看，还是走了不少弯路，乐帝好好回顾了从读源码到开发整个流程，再加上之前项目经验，总结出几点规律。

规律一：

不管是多页面开发还是单页面网站开发，前端逻辑上开发都会而且只会涉及到三种情境，这三种情境分别是页面间（或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）合并远程分支