一種web應用前端框架及其構(gòu)建方法、系統(tǒng)的制作方法
【專利摘要】本發(fā)明適用于web開發(fā)領(lǐng)域，提供了一種web應用前端框架及其構(gòu)建方法、系統(tǒng)，該方法包括：基于CMD規(guī)范的前端模塊加載器構(gòu)建框架核心類文件層，核心類文件含有框架基本信息以及整合控件接口的方法；在核心類文件的下層構(gòu)建遵循CMD模塊定義規(guī)范的接口層類，接口層類與核心類對應，且接口層類與底層控件的功能屬性對應；在修改和替換控件時，根據(jù)第三方控件的功能屬性將其封裝為符合接口層類要求的控件模塊。借此，本發(fā)明能實現(xiàn)Web控件簡單、快速、平滑的替換和修改，實現(xiàn)前端開發(fā)與項目頁面解耦，以提高工作效率。
【專利說明】一種web應用前端框架及其構(gòu)建方法、系統(tǒng)
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及web (網(wǎng)頁)開發(fā)領(lǐng)域，尤其涉及一種web應用前端框架及其構(gòu)建方法、系統(tǒng)。
【背景技術(shù)】
[0002]對于敏捷開發(fā)中的團隊，長期處于快速開發(fā)于需求響應中，處于不同崗位上的開發(fā)人員，則需要能夠根據(jù)需求快速調(diào)整自己負責的層面的代碼，而Web前端在項目開發(fā)中需求的變更更加頻繁。一個小型團隊，Web控件更多的來自第三方，控件替換以及修改和與頁面開發(fā)人員進行溝通進行知識普及，則變成前端開發(fā)人員最頻繁的工作。目前解決辦法:前端開發(fā)人員把新控件導入項目中，并將舊控件刪除。先把舊控件調(diào)用的頁面，舊控件引用路徑先刪除，換為新控件地址。然后將舊控件的使用一一處理掉，使用新控件API (Application Programming Interface,應用程序編程接口)來完成原有的功能,經(jīng)過一一測試后，項目上的改造才算完成。接下來，還需要大量的時間與開發(fā)人員溝通講解新控件的使用方法。
[0003]綜上可知，現(xiàn)有技術(shù)在實際使用上顯然存在不便與缺陷，所以有必要加以改進。

【發(fā)明內(nèi)容】

[0004]針對上述的缺陷，本發(fā)明的目的在于提供一種web應用前端框架及其構(gòu)建方法、系統(tǒng)，其能實現(xiàn)Web控件簡單、快速、平滑的替換和修改，實現(xiàn)前端開發(fā)與項目頁面解耦，以提高工作效率。
[0005]為了實現(xiàn)上述目的，本發(fā)明提供一種構(gòu)建Web應用前端框架的方法，所述方法包括如下步驟:
[0006]基于CMD規(guī)范的前端模塊加載器構(gòu)建框架核心類文件層,核心類文件含有框架基本信息以及整合控件接口的方法；
[0007]在核心類文件的下層構(gòu)建遵循CMD模塊定義規(guī)范的接口層類，所述接口層類與所述核心類對應，且所述接口層類與底層控件的功能屬性對應；
[0008]在修改和替換控件時，根據(jù)第三方控件的功能屬性將其封裝為符合所述接口層類要求的控件模塊。
[0009]根據(jù)本發(fā)明的方法，基于CMD規(guī)范的前端模塊加載器構(gòu)建框架核心類文件層的步驟中，所述核心類文件含有框架基本信息，所述框架基本信息包括版本號、建立時間以及文字提不。
[0010]根據(jù)本發(fā)明的方法，基于CMD規(guī)范的前端模塊加載器構(gòu)建框架核心類文件層的步驟中，所述核心類文件含有整合控件接口的方法，所述整合控件接口的方法為將一個接口對象中的屬性合并到核心類對象上的方法。
[0011]根據(jù)本發(fā)明的方法，在核心類文件的下層構(gòu)建遵循CMD模塊定義規(guī)范的接口層類的步驟包括:通過前端模塊加載器引入底層控件，聲明接口類對象，定義接口并實現(xiàn)，將接口對外發(fā)布以及將接口合并到核心類上。
[0012]本發(fā)明相應提供一種構(gòu)建Web應用前端框架的系統(tǒng)，所述系統(tǒng)包括:
[0013]前端模塊加載器，用于基于CMD規(guī)范構(gòu)建框架核心類文件層，核心類文件含有框架基本信息以及整合控件接口的方法，以及在核心類文件的下層構(gòu)建遵循CMD模塊定義規(guī)范的接口層類，所述接口層類與所述核心類對應，且所述接口層類與底層控件的功能屬性對應；
[0014]封裝模塊，用于在修改和替換控件時，根據(jù)第三方控件的功能屬性將其封裝為符合所述接口層類要求的控件模塊。
[0015]根據(jù)本發(fā)明的系統(tǒng)，所述框架基本信息包括版本號、建立時間以及文字提示。
[0016]根據(jù)本發(fā)明的系統(tǒng)，所述整合控件接口的方法為將一個接口對象中的屬性合并到核心類對象上的方法。
[0017]根據(jù)本發(fā)明的系統(tǒng)，前端模塊加載器還用于在構(gòu)建遵循CMD模塊定義規(guī)范的接口層類時引入底層控件，聲明接口類對象，定義接口并實現(xiàn)，將接口對外發(fā)布以及將接口合并到核心類上。
[0018]本發(fā)明相應提供一種web應用前端框架，包括:
[0019]應用層，為基于核心類文件中的API編寫的運行在不同設(shè)備環(huán)境中的頁面；
[0020]核心類文件層，包含由接口層通過核心文件整合在一起而形成供應用層調(diào)用的API集合；
[0021 ] 接口層，包括基于CMD規(guī)范編寫的控件API。
[0022]控件層，包括第三方控件或舊控件的API。
[0023]根據(jù)本發(fā)明的web應用前端框架，所述控件包括:按鈕控件、標簽控件、文本框控件、圖片控件、瀏覽器控件、視頻控件、音頻控件。
[0024]本發(fā)明通過基于CMD規(guī)范的前端模塊加載器構(gòu)建框架核心類文件，所述核心類文件含有框架基本信息以及整合控件接口的方法；在核心類文件的下層構(gòu)建遵循CMD模塊定義規(guī)范的接口層類，所述接口層類與所述核心類對應，且所述接口層類與底層控件的功能屬性對應。進行控件替換時，僅需改變控件API滿足接口層需求，便完成全部工作，減少了web前端開發(fā)人員開發(fā)工作量。更換調(diào)整Web控件，無需與其他開發(fā)人員進行新控件知識普及工作。實現(xiàn)了 web控件層與項目頁面的解耦，控件調(diào)整后，可減少頁面測試工作，保證了代碼健壯性?？梢灾苯蛹嫒葑裱瑿MD規(guī)范的第三方控件。在同一接口層下，可覆蓋同類型，不同平臺Web控件。使應用開發(fā)人員知識認知無需過多更新的情況下進行多平臺同接口開發(fā)。
【專利附圖】

【附圖說明】
[0025]圖1是本發(fā)明一種構(gòu)建Web應用前端框架的系統(tǒng)的框圖；
[0026]圖2是本發(fā)明一種web應用前端框架的示意圖；
[0027]圖3是本發(fā)明一種構(gòu)建Web應用前端框架的方法的流程圖；
[0028]圖4是本發(fā)明一種實施例中將控件導入web應用前端框架的流程圖。
【具體實施方式】[0029]為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點更加清楚明白，以下結(jié)合附圖及實施例，對本發(fā)明進行進一步詳細說明。應當理解，此處所描述的具體實施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0030]如圖1所示，本發(fā)明一種構(gòu)建Web應用前端框架的系統(tǒng)100，系統(tǒng)100包括前端模塊加載器10以及封裝模塊20。
[0031]前端模塊加載器10,用于基于CMD (Common Module Def inition,通用模塊定義)規(guī)范構(gòu)建框架核心類文件層，核心類文件含有框架基本信息以及整合控件接口的方法，以及在核心類文件的下層構(gòu)建遵循CMD模塊定義規(guī)范的接口層類，接口層類與核心類對應，且接口層類與底層控件的功能屬性對應。具體的，框架基本信息包括版本號、建立時間以及文字提示，整合控件接口的方法為將一個接口對象中的屬性合并到核心類對象上的方法。
[0032]封裝模塊20，用于在修改和替換控件時，根據(jù)第三方控件的功能屬性將其封裝為符合所述接口層類要求的控件模塊。
[0033]該web應用前端框架如圖2所示,web應用前端框架包括:web應用層、核心類文件層、控件接口層以及控件層。
[0034]web應用層，為基于核心類文件中的API編寫的運行在不同設(shè)備環(huán)境中的頁面。
[0035]核心類文件層，包含由接口層通過核心文件整合在一起而形成供應用層調(diào)用的API集合。具體的，核心類文件層包含一些簡單的工具方法(如ajaxError:AJAX調(diào)用失敗的回調(diào)處理方法)其他與控件相關(guān)的方法(如PlayWarning:播放告警聲音)由接口層通過核心文件中clone方法整合在一起而形成供應用層調(diào)用的javascript的API集合。工具方法真實存在于核心文件中，控件相關(guān)方法真實存在于接口層文件中。
[0036]控件接口層，包括基于CMD規(guī)范編寫的控件API。具體的，控件接口層指為每一個第三方控件或舊控件在其原有API基礎(chǔ)上編寫的基于CMD規(guī)范的適用于當前業(yè)務需求的API和基于CMD規(guī)范編寫的控件API。這些API在控件層存在，并且未使用核心文件中的工具方法的情況下，可以不依賴核心文件單獨使用，但并不推薦。
[0037]控件層，包括第三方控件或舊控件的API。如圖2所示，該控件層的控件包括:按鈕控件、標簽控件、文本框控件、圖片控件、瀏覽器控件、視頻控件以及音頻控件等等。
[0038]應用層調(diào)用的是核心類文件層的API，這層與控件相關(guān)的API由接口層的API拼合而成，核心類文件層主要任務將接口層的API進行拼合，對應用層展現(xiàn)統(tǒng)一模式的API，核心類文件層以下的變化對于應用層是屏蔽的；接口層是核心類文件層與具體控件相關(guān)的API的真實API，接口層是離散的，一組接口對應著一組與控件相關(guān)操作?？丶佑傻谌娇丶团f控件組成，它們很多都已經(jīng)很成熟，經(jīng)過了開源社區(qū)中開發(fā)人員們的使用和測試，而開發(fā)人員一時無法基于CMD規(guī)范改造且改造成本較高。在項目前期，根據(jù)實際效果和需求，可以對其進行更換和調(diào)整，接口層編碼根據(jù)控件層的變化做相應的修改即可，但接口層不能改變對外發(fā)布的接口。上層應用通過核心類文件訪問控件接口，控件接口封裝了底層的控件庫。
[0039]進行控件替換時，僅需改變控件API滿足接口層需求，便完成全部工作，減少了web前端開發(fā)人員開發(fā)工作量。更換調(diào)整Web控件，無需與其他開發(fā)人員進行新控件知識普及工作。實現(xiàn)了 web控件層與項目頁面的解耦，控件調(diào)整后，可減少頁面測試工作，保證了代碼健壯性?？梢灾苯蛹嫒葑裱瑿MD規(guī)范的第三方控件。在同一接口層下，可覆蓋同類型，不同平臺Web控件。使應用開發(fā)人員知識認知無需過多更新的情況下進行多平臺同接口開發(fā)。
[0040]在本發(fā)明的一個實施例中，前端模塊加載器10可以選用SeaJS、KISSY等遵循CommonJS規(guī)范的模塊加載框架，如采用SeaJS框架核心類文件結(jié)構(gòu)如下:
[0041]
【權(quán)利要求】
1.一種構(gòu)建Web應用前端框架的方法，其特征在于，所述方法包括如下步驟: 基于CMD規(guī)范的前端模塊加載器構(gòu)建框架核心類文件層，核心類文件含有框架基本信息以及整合控件接口的方法； 在核心類文件的下層構(gòu)建遵循CMD模塊定義規(guī)范的接口層類，所述接口層類與所述核心類對應，且所述接口層類與底層控件的功能屬性對應； 在修改和替換控件時，根據(jù)第三方控件的功能屬性將其封裝為符合所述接口層類要求的控件模塊。
2.根據(jù)權(quán)利要求1所述的方法，其特征在于，基于CMD規(guī)范的前端模塊加載器構(gòu)建框架核心類文件層的步驟中， 所述核心類文件含有框架基本信息，所述框架基本信息包括版本號、建立時間以及文字提不。
3.根據(jù)權(quán)利要求1所述的方法，其特征在于，基于CMD規(guī)范的前端模塊加載器構(gòu)建框架核心類文件層的步驟中， 所述核心類文件含有整合控件接口的方法，所述整合控件接口的方法為將一個接口對象中的屬性合并到核心類對象上的方法。
4.根據(jù)權(quán)利要求1所述的方法，其特征在于，在核心類文件的下層構(gòu)建遵循CMD模塊定義規(guī)范的接口層類的步 驟包括: 通過前端模塊加載器引入底層控件，聲明接口類對象，定義接口并實現(xiàn)，將接口對外發(fā)布以及將接口合并到核心類上。
5.一種構(gòu)建Web應用前端框架的系統(tǒng)，其特征在于，所述系統(tǒng)包括: 前端模塊加載器，用于基于CMD規(guī)范構(gòu)建框架核心類文件層，核心類文件含有框架基本信息以及整合控件接口的方法，以及在核心類文件的下層構(gòu)建遵循CMD模塊定義規(guī)范的接口層類，所述接口層類與所述核心類對應，且所述接口層類與底層控件的功能屬性對應； 封裝模塊，用于在修改和替換控件時，根據(jù)第三方控件的功能屬性將其封裝為符合所述接口層類要求的控件模塊。
6.根據(jù)權(quán)利要求5所述的系統(tǒng)，其特征在于，所述框架基本信息包括版本號、建立時間以及文字提示。
7.根據(jù)權(quán)利要求5所述的系統(tǒng)，其特征在于，所述整合控件接口的方法為將一個接口對象中的屬性合并到核心類對象上的方法。
8.根據(jù)權(quán)利要求5所述的系統(tǒng)，其特征在于，前端模塊加載器還用于在構(gòu)建遵循CMD模塊定義規(guī)范的接口層類時引入底層控件，聲明接口類對象，定義接口并實現(xiàn)，將接口對外發(fā)布以及將接口合并到核心類上。
9.一種web應用前端框架，其特征在于，包括: 應用層，為基于核心類文件中的API編寫的運行在不同設(shè)備環(huán)境中的頁面； 核心類文件層，包含由接口層通過核心文件整合在一起而形成供應用層調(diào)用的API集合； 接口層，包括基于CMD規(guī)范編寫的控件API。 控件層，包括第三方控件或舊控件的API。
10.根據(jù)權(quán)利要求9所述的web應用前端框架，其特征在于，所述控件包括:按鈕控件、標簽控件、文本框 控件、圖片控件、瀏覽器控件、視頻控件、音頻控件。
【文檔編號】G06F9/44GK103984548SQ201410203465
【公開日】2014年8月13日 申請日期:2014年5月14日 優(yōu)先權(quán)日:2014年5月14日
【發(fā)明者】丁亞飛 申請人:陜西上訊信息技術(shù)有限公司