混合開發(fā)前端mvc框架實現(xiàn)方法和系統(tǒng)的制作方法
【專利摘要】本發(fā)明公開了一種混合開發(fā)前端MVC框架實現(xiàn)方法和系統(tǒng)，用以解決現(xiàn)有混合開發(fā)前端模式中程序代碼管理邏輯混亂，不易維護和重構的問題。所述方法包括：表現(xiàn)層捕獲用戶界面中一頁面模塊的動作事件，并將所述動作事件通知控制層；所述控制層在接收到通知后，根據(jù)所述動作事件判斷所述頁面模塊是否需要從服務層獲取數(shù)據(jù)；在判定為是時，確定所述動作事件對應的數(shù)據(jù)模型，并將所述數(shù)據(jù)模型通知數(shù)據(jù)模型層；所述數(shù)據(jù)模型層調用所述數(shù)據(jù)模型，以向服務層請求所述數(shù)據(jù)；并在接收到所述服務層返回的所述數(shù)據(jù)后，將所述數(shù)據(jù)發(fā)送給所述控制層；所述控制層將所述數(shù)據(jù)填充到所述表現(xiàn)層，并刷新所述頁面模塊。
【專利說明】
混合開發(fā)前端MVC框架實現(xiàn)方法和系統(tǒng)
技術領域
[0001]本發(fā)明涉及計算機領域，特別是涉及一種混合開發(fā)前端MVC框架實現(xiàn)方法和系統(tǒng)。 【背景技術】
[0002]隨著智能終端(手機、平板電腦等)的發(fā)展和普及，很多辦公、娛樂及操作軟件已從大型硬件電腦軟件轉變成終端APP(應用程序，Applicat1n的縮寫)，而終端APP的開發(fā)正逐步由單一1S或Android開發(fā)模式向混合開發(fā)模式(i0S+HTML5+Javascript或Android+ HTML5+Javascript)轉變，HTML5+Javascript開發(fā)被稱為混合開發(fā)模式中的前端開發(fā)。
[0003]目前，由于前端開發(fā)興起時間較短，大部分開發(fā)者對前端開發(fā)的理解停留在較陳舊模式中，使得前端開發(fā)代碼管理邏輯混亂，不易維護和重構，增加了開發(fā)成本，從而造成了開發(fā)的應用程序刷新效率和數(shù)據(jù)存儲性能較低，導致應用程序的用戶體驗不夠好。
【發(fā)明內容】

[0004]鑒于現(xiàn)有技術的缺陷，本發(fā)明目的在于提供一種混合開發(fā)前端MVC框架實現(xiàn)方法和系統(tǒng)，用以解決現(xiàn)有混合開發(fā)前端模式中程序代碼管理邏輯混亂，不易維護和重構的問題。
[0005]本發(fā)明目的主要是通過以下技術方案實現(xiàn)的:
[0006]根據(jù)本發(fā)明的一個方面，本發(fā)明提供一種混合開發(fā)的前端MVC框架實現(xiàn)方法，包括:
[0007]表現(xiàn)層捕獲用戶界面中一頁面模塊的動作事件，并將所述動作事件通知控制層；
[0008]所述控制層在接收到通知后，根據(jù)所述動作事件判斷所述頁面模塊是否需要從服務層獲取數(shù)據(jù);在判定為是時，確定所述動作事件對應的數(shù)據(jù)模型，并將所述數(shù)據(jù)模型通知數(shù)據(jù)模型層；
[0009]所述數(shù)據(jù)模型層調用所述數(shù)據(jù)模型，以向服務層請求所述數(shù)據(jù)；以及接收所述服務層返回的所述數(shù)據(jù)，并將所述數(shù)據(jù)發(fā)送給所述控制層；
[0010]所述控制層將所述數(shù)據(jù)填充到所述表現(xiàn)層，并刷新所述頁面模塊。
[0011]進一步，所述表現(xiàn)層采用單頁面應用模式。
[0012]進一步，所述方法還包括:
[0013]將所述表現(xiàn)層的程序代碼、所述控制層的程序代碼和所述數(shù)據(jù)模型層的程序代碼分咼。
[0014]進一步，所述數(shù)據(jù)模型層向所述服務層請求所述數(shù)據(jù)時采用異步請求方式。
[0015]進一步，所述數(shù)據(jù)模型層在接收到所述服務層返回的所述數(shù)據(jù)后，將所述數(shù)據(jù)發(fā)送給所述控制層的步驟，還包括:
[0016]按照預定的數(shù)據(jù)格式封裝所述數(shù)據(jù)，并將封裝后的所述數(shù)據(jù)發(fā)送給所述控制層。
[0017]根據(jù)本發(fā)明的另一個方面，本發(fā)明還提供一種混合開發(fā)的前端MVC框架實現(xiàn)系統(tǒng)， 包括:
[0018]表現(xiàn)層，用于捕獲用戶界面中一個頁面模塊的動作事件，將所述動作事件通知控制層；以及用于接收所述控制層填充的數(shù)據(jù)，并在所述用戶界面上展示刷新后的頁面模塊；
[0019]控制層，用于在接收到通知后，根據(jù)所述動作事件判斷所述頁面模塊是否需要從服務層獲取數(shù)據(jù);在判定為是時，確定所述動作事件對應的數(shù)據(jù)模型，并將所述數(shù)據(jù)模型通知數(shù)據(jù)模型層；以及用于接收數(shù)據(jù)模型層發(fā)送的所述數(shù)據(jù)，將所述數(shù)據(jù)填充到所述表現(xiàn)層，并刷新所述頁面模塊；
[0020]數(shù)據(jù)模型層，用于調用所述數(shù)據(jù)模型，以向服務層請求所述數(shù)據(jù)；以及接收所述服務層返回的所述數(shù)據(jù)，并將所述數(shù)據(jù)發(fā)送給所述控制層。
[0021 ]進一步，所述表現(xiàn)層采用單頁面應用模式。
[0022]進一步，所述表現(xiàn)層的程序代碼、所述控制層的程序代碼和所述數(shù)據(jù)模型層的程序代碼分離。
[0023]進一步，所述數(shù)據(jù)模型層向所述服務層請求所述數(shù)據(jù)時采用異步請求方式。
[0024]進一步，所述數(shù)據(jù)模型層在接收所述服務層返回的所述數(shù)據(jù)后，還用于按照預定的數(shù)據(jù)格式封裝所述數(shù)據(jù)，并將封裝后的所述數(shù)據(jù)發(fā)送給所述控制層。
[0025]本發(fā)明有益效果如下:
[0026]本發(fā)明的方法和系統(tǒng)通過使控制層采用數(shù)據(jù)注入的方式將數(shù)據(jù)傳給表現(xiàn)層，從而實現(xiàn)表現(xiàn)層的程序代碼和控制層的程序代碼的分離；同時通過控制層調用數(shù)據(jù)模型層的相應數(shù)據(jù)模型，并使該數(shù)據(jù)模型向服務層請求數(shù)據(jù)，從而實現(xiàn)數(shù)據(jù)模型層的程序代碼和控制層的程序代碼的分離;從而使混合開發(fā)的表現(xiàn)層，控制層及數(shù)據(jù)層彼此分立，模塊維護獨立互不影響，使程序代碼管理邏輯清晰，易維護和重構；并且通過頁面局部刷新，降低應用數(shù)據(jù)請求所占內存，提高運行性能，為軟件及APP開發(fā)帶來更好的用戶體驗。
【附圖說明】
[0027]圖1是本發(fā)明實施例中混合開發(fā)前端MVC框架實現(xiàn)方法的主流程圖；
[0028]圖2是本發(fā)明實施例中混合開發(fā)前端MVC框架實現(xiàn)系統(tǒng)的框架示意圖。
【具體實施方式】
[0029]為了解決現(xiàn)有混合開發(fā)前端模式中程序代碼管理邏輯混亂，不易維護和重構的問題，本發(fā)明提供了一種混合開發(fā)前端MVC(Model (對象實例)View(視圖)Control Ier (控制器))框架實現(xiàn)方法和系統(tǒng)，以下結合附圖以及實施例，對本發(fā)明進行進一步詳細說明。應當理解，此處所描述的具體實施例僅用以解釋本發(fā)明，并不限定本發(fā)明。
[0030]實施例一
[0031]如圖1所示，本發(fā)明實施例提供一種混合開發(fā)的前端MVC框架實現(xiàn)方法，包括:
[0032]步驟A、捕捉用戶操作，也就是說，表現(xiàn)層捕獲用戶界面中一頁面模塊的動作事件，并將所述動作事件通知控制層；
[0033]步驟B、調用數(shù)據(jù)處理，也就是說，所述控制層在接收到通知后，根據(jù)所述動作事件判斷所述頁面模塊是否需要從服務層獲取數(shù)據(jù);在判定為是時，確定所述動作事件對應的數(shù)據(jù)模型，并將所述數(shù)據(jù)模型通知數(shù)據(jù)模型層；
[0034]步驟C、請求數(shù)據(jù)，也就是說，所述數(shù)據(jù)模型層調用所述數(shù)據(jù)模型，以向服務層請求所述數(shù)據(jù);并在接收到所述服務層返回的所述數(shù)據(jù)后，將所述數(shù)據(jù)發(fā)送給所述控制層；
[0035]步驟D、服務層返回數(shù)據(jù)；
[0036]步驟E、返回數(shù)據(jù)到控制器，也就是說，所述數(shù)據(jù)模型層接收所述服務層返回的所述數(shù)據(jù)，將所述數(shù)據(jù)發(fā)送給所述控制層；
[0037]步驟F、局部刷新頁面填充數(shù)據(jù)，也就是說，所述控制層將所述數(shù)據(jù)填充到所述表現(xiàn)層，并刷新所述頁面模塊。
[0038]具體說，表現(xiàn)層用來提供用戶界面，用戶界面包括若干頁面模塊;也就是說表現(xiàn)層向用戶提供展示頁面;頁面展示的內容包括瀏覽器或APP中用戶能看到的所有內容，包括文字、圖片、動畫和加載提示，以及用戶自己輸入的文字及表情等。
[0039]數(shù)據(jù)是指從服務器拿到的所有動態(tài)變化的內容，包括動態(tài)更新顯示的新聞、廣告、 用戶信息、訂單信息、用戶習慣和設備當前狀態(tài)等。
[0040]控制層用來判斷表現(xiàn)層的用戶操作，并調用數(shù)據(jù)模型層請求數(shù)據(jù)；用戶操作泛指用戶在頁面中做出的所有動作事件，包括:輸入動作、點擊動作和滑動動作等，例如注冊時輸入信息，登陸時輸入用戶名密碼，點擊瀏覽下一頁，在APP中滑動頁面加載更多內容，點擊某商品進入商品詳細介紹頁面等。
[0041]數(shù)據(jù)模型層用于保存多個功能模塊(即數(shù)據(jù)模型)，每個功能模塊對應與表現(xiàn)層中的一個動作，用于實現(xiàn)表現(xiàn)層中相應動作所要實現(xiàn)的功能。[〇〇42]現(xiàn)有前端開發(fā)模式中，是在HTML中引入或嵌入相關的Javascript代碼，這種開發(fā)模式使得代碼邏輯不夠清晰，代碼維護繁瑣;并且這種開發(fā)模式在表現(xiàn)層需要數(shù)據(jù)是，需要刷新整個頁面，從而造成了服務端處理需要處理整個頁面數(shù)據(jù)，從而頁面加載時間較長;并且頁面之間邏輯耦合較高，不易分離。
[0043]本發(fā)明實施例通過在表現(xiàn)層的用戶界面需要載入數(shù)據(jù)時，控制層向數(shù)據(jù)模型層發(fā)送數(shù)據(jù)請求，以使所述數(shù)據(jù)模型層返回所述數(shù)據(jù)，所述控制層接收到所述數(shù)據(jù)后，刷新所述用戶界面上所述數(shù)據(jù)所屬的頁面模塊，并將所述數(shù)據(jù)填充到所述表現(xiàn)層，從而使控制層采用數(shù)據(jù)注入的方式將數(shù)據(jù)傳給表現(xiàn)層，從而實現(xiàn)表現(xiàn)層的程序代碼和控制層的程序代碼的分離，使程序代碼管理邏輯清晰，易維護和重構;并且通過頁面局部刷新，降低應用數(shù)據(jù)請求所占內存，提高運行性能，為軟件及APP開發(fā)帶來更好的用戶體驗。
[0044]在本發(fā)明的一個優(yōu)選的實施方式中，還對上述方法進行了優(yōu)化，具體來說，所述方法還包括:
[0045]所述表現(xiàn)層采用單頁面應用模式，只提供一個頁面作為用戶界面。
[0046]單頁面應用模式具體包括:一個應用(包括門戶網站及APP)只有一個頁面入口(用戶界面)；所有的請求及頁面變化通過控制層控制實現(xiàn)，不需要發(fā)送url改變請求，節(jié)省流量提高加載速度。
[0047]在本發(fā)明的一個優(yōu)選的實施方式中，還對上述方法進行了優(yōu)化，具體來說，所述表現(xiàn)層捕獲用戶界面中一頁面模塊的動作事件的步驟之前，還包括:
[0048]將所述表現(xiàn)層的程序代碼、所述控制層的程序代碼和所述數(shù)據(jù)模型層的程序代碼分咼。[〇〇49]也就是說，采用模塊化開發(fā)方式，模塊之間可繼承。模塊化開發(fā)方式使開發(fā)者像添加模塊一樣添加新的開發(fā)功能，所有功能互不影響，獨立管理。具體說，需要新增功能時，只需新增一個模塊進行開發(fā)，此模塊會作為單一獨立模塊，與其他功能模塊互相之間不會影響，且可選擇繼承其他模塊功能。例如，HTML頁面和Javascript代碼都可作為單一片段，按需加載，使用完后實例自動銷毀，合理管理內存空間。
[0050]在本發(fā)明的一個優(yōu)選的實施方式中，還對上述方法進行了優(yōu)化，具體來說，
[0051 ]數(shù)據(jù)模型向所述服務層發(fā)送數(shù)據(jù)請求的方式為異步請求。
[0052]在本發(fā)明的一個優(yōu)選的實施方式中，還對上述方法進行了優(yōu)化，具體來說，所述數(shù)據(jù)模型層接收所述數(shù)據(jù)后，按照預定的數(shù)據(jù)格式封裝所述數(shù)據(jù)，并將封裝后的所述數(shù)據(jù)發(fā)送給所述控制層。
[0053]也就是說，在本優(yōu)選的實施方式中，控制層主要用來分析處理用戶界面需要載入的數(shù)據(jù)，根據(jù)需要載入的數(shù)據(jù)，調用數(shù)據(jù)模型層中的相應數(shù)據(jù)模型(model)，使數(shù)據(jù)模型從服務器中獲取該數(shù)據(jù)。比如:用戶點擊注冊，控制層需調用注冊的model并發(fā)送用戶信息到服務器進行注冊;又如:用戶點擊下一頁，控制層負責頁面正確跳轉并且展示頁面跳轉的動畫(比如手機APP中新頁面是從右向左滑動出現(xiàn))。
[0054]頁面中所有的動作或者請求，都有控制層先進行分析，然后處理。
[0055]數(shù)據(jù)模型層主要負責發(fā)送請求，并且封裝請求回來的數(shù)據(jù)。控制層負責處理頁面所有的動作和邏輯，并決定是否需要調用數(shù)據(jù)模型層來發(fā)送請求，以及調用哪個數(shù)據(jù)模型來發(fā)送請求。并在接收到服務層返回的數(shù)據(jù)后，在S102中每次只需重繪用戶需要看到變化的部分，從而減輕服務端的處理負擔，提高網頁響應速度，且將數(shù)據(jù)交互從服務端轉移到瀏覽器端，做到數(shù)據(jù)按用戶所需加載的目的。
[0056]如圖1所示，以HTML5+JavaScript為例，詳細描述本發(fā)明實施例方法，本發(fā)明實施例方法包括:
[0057]A:HTML表現(xiàn)層用來展示頁面及數(shù)據(jù)，在用戶觸發(fā)某種事件后捕獲事件并通知控制層;例如:用戶在海爾商城首頁看到所有的商品列表，點擊某一個商品，會觸發(fā)一個”點擊”事件，控制層會監(jiān)控到。
[0058]B: Javascript控制層用來分析表現(xiàn)層捕獲的事件類型及相對應的處理機制，調用該事件對應的數(shù)據(jù)模型請求數(shù)據(jù);例如:控制層分析當前的”點擊”事件是什么類型，比如這個事件不是注冊，不是登陸，不是頁面跳轉，而是點擊商品需要進入商品詳情頁面。
[0059]控制層控制頁面跳轉到商品詳情頁，并且調用取商品詳情的數(shù)據(jù)model發(fā)送該商品數(shù)據(jù)的請求。
[0060]C:數(shù)據(jù)模型層收到數(shù)據(jù)請求后，發(fā)送Ajax請求后臺服務器；
[0061]D:服務器返回數(shù)據(jù)；
[0062]E:數(shù)據(jù)模型層按照規(guī)定的數(shù)據(jù)格式封裝取回的數(shù)據(jù)并傳回控制層；
[0063]F:控制層接收數(shù)據(jù)，并局部刷新對應的頁面模塊，將數(shù)據(jù)填充到HTML表現(xiàn)層中。
[0064]也就是說，按照此流程，混合開發(fā)的表現(xiàn)層，控制層及數(shù)據(jù)層彼此分立，模塊維護獨立互不影響，無論從編碼或者維護方面考察，都更加簡便，且更符合面向對象邏輯。
[0065]實施例二
[0066]如圖2所示，本發(fā)明實施例提供一種混合開發(fā)的前端MVC框架實現(xiàn)系統(tǒng)，包括:
[0067]表現(xiàn)層，用于捕獲用戶界面中一個頁面模塊的動作事件，將所述動作事件通知控制層；以及用于接收所述控制層填充的數(shù)據(jù)，并在所述用戶界面上展示刷新后的頁面模塊；
[0068]控制層，用于在接收到通知后，根據(jù)所述動作事件判斷所述頁面模塊是否需要從服務層獲取數(shù)據(jù);在判定為是時，確定所述動作事件對應的數(shù)據(jù)模型，并將所述數(shù)據(jù)模型通知數(shù)據(jù)模型層；以及用于接收數(shù)據(jù)模型層發(fā)送的所述數(shù)據(jù)，將所述數(shù)據(jù)填充到所述表現(xiàn)層， 并刷新所述頁面模塊；
[0069]數(shù)據(jù)模型層，用于調用所述數(shù)據(jù)模型，以向服務層請求所述數(shù)據(jù);并在接收到所述服務層返回的所述數(shù)據(jù)后，將所述數(shù)據(jù)發(fā)送給所述控制層。
[0070]其中，所述表現(xiàn)層采用單頁面應用模式，只提供一個入口頁面作為用戶界面。
[0071]所述表現(xiàn)層的程序代碼、所述控制層的程序代碼和所述數(shù)據(jù)模型層的程序代碼分離。
[0072]所述數(shù)據(jù)模型向所述服務層發(fā)送數(shù)據(jù)請求的方式為異步請求。
[0073]所述數(shù)據(jù)模型層在接收所述服務層返回的所述數(shù)據(jù)后，還用于按照預定的數(shù)據(jù)格式封裝所述數(shù)據(jù)，并將封裝后的所述數(shù)據(jù)發(fā)送給所述控制層。
[0074]本發(fā)明實施例的系統(tǒng)可使開發(fā)者更容易管理展示頁面與邏輯控制代碼，模式由面向腳本語言開發(fā)轉為面向對象開發(fā)。需要新增功能時，只需新增一個模塊進行開發(fā)，此模塊會作為單一獨立模塊，與其他功能模塊互相之間不會影響，且可選擇繼承其他模塊功能。 HTML頁面和Javascript代碼都可作為單一片段，按需加載，使用完后實例自動銷毀，合理管理內存空間。
[0075]盡管為示例目的，以上已經公開了本發(fā)明的優(yōu)選實施例，但本領域的技術人員將意識到各種改進、增加和取代也是可能的，因此，本發(fā)明的范圍應當不限于上述實施例。
【主權項】
1.一種混合開發(fā)的前端MVC框架實現(xiàn)方法，其特征在于，包括: 表現(xiàn)層捕獲用戶界面中一頁面模塊的動作事件，并將所述動作事件通知控制層； 所述控制層在接收到通知后，根據(jù)所述動作事件判斷所述頁面模塊是否需要從服務層獲取數(shù)據(jù);在判定為是時，確定所述動作事件對應的數(shù)據(jù)模型，并將所述數(shù)據(jù)模型通知數(shù)據(jù)模型層； 所述數(shù)據(jù)模型層調用所述數(shù)據(jù)模型，以向服務層請求所述數(shù)據(jù)；以及接收所述服務層返回的所述數(shù)據(jù)，并將所述數(shù)據(jù)發(fā)送給所述控制層； 所述控制層將所述數(shù)據(jù)填充到所述表現(xiàn)層，并刷新所述頁面模塊。2.如權利要求1所述的方法，其特征在于， 所述表現(xiàn)層采用單頁面應用模式。3.如權利要求1所述的方法，其特征在于，所述方法還包括: 將所述表現(xiàn)層的程序代碼、所述控制層的程序代碼和所述數(shù)據(jù)模型層的程序代碼分離。4.如權利要求1-3中任意一項所述的方法，其特征在于，所述數(shù)據(jù)模型層向所述服務層請求所述數(shù)據(jù)時采用異步請求方式。5.如權利要求1-3中任意一項所述的方法，其特征在于，所述數(shù)據(jù)模型層在接收到所述服務層返回的所述數(shù)據(jù)后，將所述數(shù)據(jù)發(fā)送給所述控制層的步驟，還包括: 按照預定的數(shù)據(jù)格式封裝所述數(shù)據(jù)，并將封裝后的所述數(shù)據(jù)發(fā)送給所述控制層。6.一種混合開發(fā)的前端MVC框架實現(xiàn)系統(tǒng)，其特征在于，包括: 表現(xiàn)層，用于捕獲用戶界面中一個頁面模塊的動作事件，將所述動作事件通知控制層；以及用于接收所述控制層填充的數(shù)據(jù)，并在所述用戶界面上展示刷新后的頁面模塊； 控制層，用于在接收到通知后，根據(jù)所述動作事件判斷所述頁面模塊是否需要從服務層獲取數(shù)據(jù);在判定為是時，確定所述動作事件對應的數(shù)據(jù)模型，并將所述數(shù)據(jù)模型通知數(shù)據(jù)模型層；以及用于接收數(shù)據(jù)模型層發(fā)送的所述數(shù)據(jù)，將所述數(shù)據(jù)填充到所述表現(xiàn)層，并刷新所述頁面模塊； 數(shù)據(jù)模型層，用于調用所述數(shù)據(jù)模型，以向服務層請求所述數(shù)據(jù)；以及接收所述服務層返回的所述數(shù)據(jù)，并將所述數(shù)據(jù)發(fā)送給所述控制層。7.如權利要求6所述的系統(tǒng)，其特征在于， 所述表現(xiàn)層采用單頁面應用模式。8.如權利要求6所述的系統(tǒng)，其特征在于，所述表現(xiàn)層的程序代碼、所述控制層的程序代碼和所述數(shù)據(jù)模型層的程序代碼分離。9.如權利要求6-8中任意一項所述的系統(tǒng)，其特征在于，所述數(shù)據(jù)模型層向所述服務層請求所述數(shù)據(jù)時采用異步請求方式。10.如權利要求6-8中任意一項所述的系統(tǒng)，其特征在于，所述數(shù)據(jù)模型層在接收所述服務層返回的所述數(shù)據(jù)后，還用于按照預定的數(shù)據(jù)格式封裝所述數(shù)據(jù)，并將封裝后的所述數(shù)據(jù)發(fā)送給所述控制層。
【文檔編號】G06F9/44GK105955714SQ201610235863
【公開日】2016年9月21日
【申請日】2016年4月15日
【發(fā)明人】劉旭升
【申請人】北京海爾廣科數(shù)字技術有限公司, 青島海爾智能家電科技有限公司