招聘後臺投遞設置聯動按鈕迭代開發總結

       最近老博會代表夕陽再晨參展,樂帝負責統籌展區安排,這就逼迫樂帝需要思考有哪些是需要詢問、哪些是需要酌情解決的。最後得出結論,舉辦活動所考慮的無非三件事:人、物、流程。人指的是人員組織與分工、即人的安排,物涉及物得擺放與交接,流程則是將人與物按照時間的順序安排到位,組織活動特別像導演電影,人和物都在那裏,如何組織起來才能體現出導演水平的高低。

   老博會歸來有幾點感悟:

  • 老年產業得到了越來越多公司機構的重視。
  • 老年人對除了藥之外消費觀念還需要慢慢引導。
  • 老年產業不缺少創新、缺少能夠使資源有效整合的推廣人才。
    遇到的事情總會超出我們的預期,所以在每件事中找出骨架或者流程化的東西就能遊刃有餘了,上述老博會雖按人、物、流程做了預演,真正做的時候,還是有出乎意料的問題出現。人也就這樣發育着,抓着骨頭,不斷變得豐滿多肉。
    這周在公司裏,寫了一個內推系統中,修改內推人信息的頁面,相比之前開發內推系統來說,這次通過思維導圖理清思路頁面寫的極其順暢,高效的做事,離不開思考與總結。最近有點愛上思維導圖這個神器了。
   完善信息頁面交互流程:


    這周除了以上頁面的開發,主要時間都花在修改招聘後臺--投遞設置選項中修改按鈕聯動了,這期間樂帝可謂兢兢業業的閱讀源碼,跟蹤數據,總算將問題解決了。而回過頭來看,還是走了不少彎路,樂帝好好回顧了從讀源碼到開發整個流程,再加上之前項目經驗,總結出幾點規律。
    規律一:
    不管是多頁面開發還是單頁面網站開發,前端邏輯上開發都會而且只會涉及到三種情境,這三種情境分別是頁面間(或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)合併遠程分支


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