本發(fā)明涉及Web前端框架技術領域，更具體地說，涉及一種基于提高前端開發(fā)效率的web前端框架系統(tǒng)及架構方法。

背景技術：

目前流行的前端框架有很多，例如，如果是純移動端的話，一般是zepto加frozenui加seajs。如果是做H5那種活動頁，則多半采用motion.js，PC端的話，jq+bootstrap是個挺好的組合，或者用backbone也是挺普遍的，但是如果是開發(fā)企業(yè)管理系統(tǒng)那種的web頁面可以考慮extjs，現(xiàn)在改名叫sencha了，組件多。

對于敏捷開發(fā)中的團隊，長期處于快速開發(fā)于需求響應中，處于不同崗位上的開發(fā)人員，則需要能夠根據(jù)需求快速調整自己負責的層面的代碼，而Web前端在項目開發(fā)中需求的變更更加頻繁。一個小型團隊，Web控件更多的來自第三方，控件替換以及修改和與頁面開發(fā)人員進行溝通進行知識普及，則變成前端開發(fā)人員最頻繁的工作。目前解決辦法：前端開發(fā)人員把新控件導入項目中，并將舊控件刪除。先把舊控件調用的頁面，舊控件引用路徑先刪除，換為新控件地址。然后將舊控件的使用一一處理掉，使用新控件API(Application Programming Interface，應用程序編程接口)來完成原有的功能，經過一一測試后，項目上的改造才算完成。接下來，還需要大量的時間與開發(fā)人員溝通講解新控件的使用方法。

為了解決上述問題，如圖1所示，專利申請?zhí)枮?01410203465.7的文獻公開了一種web應用前端框架，包括：應用層，為基于核心類文件中的API編寫的運行在不同設備環(huán)境中的頁面；核心類文件層，包含由接口層通過核心文件整合在一起而形成供應用層調用的API集合；接口層，包括基于CMD規(guī)范編寫的控件API?？丶?，包括第三方控件或舊控件的API。根據(jù)上述方案的web應用前端框架，所述控件包括：按鈕控件、標簽控件、文本框控件、圖片控件、瀏覽器控件、視頻控件、音頻控件。該技術方案通過基于CMD規(guī)范的前端模塊加載器構建框架核心類文件，所述核心類文件含有框架基本信息以及整合控件接口的方法；在核心類文件的下層構建遵循CMD模塊定義規(guī)范的接口層類，所述接口層類與所述核心類對應，且所述接口層類與底層控件的功能屬性對應。進行控件替換時，僅需改變控件API滿足接口層需求，便完成全部工作，減少了web前端開發(fā)人員開發(fā)工作量。更換調整Web控件，無需與其他開發(fā)人員進行新控件知識普及工作。實現(xiàn)了web控件層與項目頁面的解耦，控件調整后，可減少頁面測試工作，保證了代碼健壯性?？梢灾苯蛹嫒葑裱瑿MD規(guī)范的第三方控件。在同一接口層下，可覆蓋同類型不同平臺Web控件。使應用開發(fā)人員知識認知無需過多更新的情況下進行多平臺同接口開發(fā)。

然而，本發(fā)明人發(fā)現(xiàn)，上述技術方案主要是針對控件而設計的框架結構，沒有考慮安全問題和工具提供等其他相關需求。

技術實現(xiàn)要素：

本發(fā)明的目的在于提供一種新的web前端框架，用來快速開發(fā)移動端、微信端和PC端項目，提高項目內部的前端開發(fā)效率。

本發(fā)明的技術方案為，一種web前端框架系統(tǒng)，包括項目層、消息處理中心層、中間件處理器層、橋連接層、應用層、工具類層和打包構建工具層；其中，所述項目層包括項目配置和項目頁面模塊；所述消息處理中心層包括自定義組件模塊、組件模塊和元件模塊，所述組件用于項目中的獨立組件封裝，并快速進行拼接頁面，所述消息處理中心層用于處理每個組件之間的消息；所述中間件處理器層用于處理第三方中間件數(shù)據(jù)，所述橋連接層用于調用不同平臺的API；所述打包構建工具層用于對代碼的打包、壓縮、加密，并針對不同的平臺，打包成不同的上線包。

進一步地，，所述中間件處理器層包括事件管理模塊、適配器模塊、路由管理模塊、網絡請求模塊、安全模塊和緩存模塊；其中，所述事件管理模塊用于處理不同平臺的點擊、移動，數(shù)據(jù)綁定等事件；所述網絡請求模塊用于處理和后端交互的數(shù)據(jù)讀??；所述安全模塊用于在數(shù)據(jù)傳輸中，對數(shù)據(jù)進行加密；所述適配器模塊用于對不同的數(shù)據(jù)源進行數(shù)據(jù)格式化，使前端保持統(tǒng)一的數(shù)據(jù)格式；所述路由管理模塊用于處理頁面與頁面之間跳轉的動畫。

進一步地，所述應用層包括PC模塊、微信模塊、IOS模塊和Android模塊。

一種web前端框架系統(tǒng)架構方法，包括如下步驟:前端啟動；框架選型；構建項目；梳理UE；編寫實現(xiàn)業(yè)務邏輯代碼/交互；集成/聯(lián)調；打包工具進行打包壓縮上線；結束。

進一步地，上述梳理UE步驟之后，包括如下步驟，梳理技術難點和尋找解決方案。

進一步地，，所述梳理UE步驟之后，包括如下步驟，梳理公用模塊、方法和輸出公共類。

進一步地，所述梳理UE步驟之后，包括如下步驟，規(guī)劃接口數(shù)據(jù)和構建本地數(shù)據(jù)容器。

一種web前端框架系統(tǒng)架構方法，包括如下步驟:前端啟動；框架選型；構建項目；梳理UI；規(guī)劃項目整體頁面結構；抽取公用模版/組件/元件；輸出靜態(tài)頁面/模版/組件/元件；集成/聯(lián)調；打包工具進行打包壓縮上線；結束。

一種web前端框架系統(tǒng)架構方法，包括如下步驟:開始；讀取配置文件；加載頁面；渲染組件；讀取數(shù)據(jù)；渲染頁面；結束；其特征在于，所述渲染組件步驟包括：判斷是否是自定義組件，如果所述組件是自定義組件，則加載自定義組件，注冊到消息中心。

進一步地，所述讀取數(shù)據(jù)步驟包括：

第一步，判斷是否使用API路由中間件，如果是，則進入API路由解析；如果否，則直接進入第二步；

第二步，判斷是否使用緩存中間件，如果是，則獲取緩存數(shù)據(jù)；如果否，則進入第三步；

第三步，判斷是否使用適配器中間件，如果是，則數(shù)據(jù)通過適配器格式化；如果否，則返回數(shù)據(jù)。

本發(fā)明的有益效果在于，提供了一種功能強大、反應迅速的web前端框架系統(tǒng)及方法，能快速開發(fā)移動端、微信端和PC端項目，大大提高使用者內部的前端開發(fā)效率。

附圖說明

圖1為本發(fā)明的背景技術的結構示意圖；

圖2為本發(fā)明一種web前端框架系統(tǒng)的結構示意圖；

圖3為本發(fā)明一種web前端框架系統(tǒng)架構方法的實施例的流程示意圖；

圖4為本發(fā)明一種web前端框架系統(tǒng)架構方法的另一實施例的流程示意圖

具體實施方式

下面結合附圖和實施例進一步說明本發(fā)明，如圖2所示，一種web前端框架系統(tǒng)，包括項目層、消息處理中心層、中間件處理器層、橋連接層、應用層、工具類層和打包構建工具層；其中，所述項目層包括項目配置和項目頁面模塊；所述消息處理中心層包括自定義組件模塊、組件模塊和元件模塊，所述組件用于項目中的獨立組件封裝，并快速進行拼接頁面，所述消息處理中心層用于處理每個組件之間的消息；所述中間件控制器層用于處理第三方中間件數(shù)據(jù)；所述橋連接層用于調用不同平臺的API；所述打包構建工具層用于對代碼的打包、壓縮、加密，并針對不同的平臺，打包成不同的上線包。

進一步地，所述中間件處理器層包括事件管理模塊、適配器模塊、路由管理模塊、網絡請求模塊、安全模塊和緩存模塊；其中，所述事件管理模塊用于處理不同平臺的點擊、移動，數(shù)據(jù)綁定等事件；所述網絡請求模塊用于處理和后端交互的數(shù)據(jù)讀取；所述安全模塊用于在數(shù)據(jù)傳輸中，對數(shù)據(jù)進行加密；所述適配器模塊用于對不同的數(shù)據(jù)源進行數(shù)據(jù)格式化，使前端保持統(tǒng)一的數(shù)據(jù)格式；所述路由管理模塊用于處理頁面與頁面之間跳轉的動畫。

在此說明，本發(fā)明的所述中間件處理器層是一個對第三方或者自己開發(fā)的中間件進行維護，可以新增任何中間件(可以是第三方開發(fā)的)，也可以移除任何一個中間件，按項目所需，對中間件進行管控和數(shù)據(jù)分發(fā)處理，這樣邏輯上可以最大程度的靈活處理項目上的特殊業(yè)務。

進一步地，所述應用層包括PC模塊、微信模塊、IOS模塊和Android模塊。

如圖3所示，一種web前端框架系統(tǒng)架構方法，包括如下步驟:前端啟動；框架選型；構建項目；梳理UE；編寫實現(xiàn)業(yè)務邏輯代碼/交互；集成/聯(lián)調；打包工具進行打包壓縮上線；結束。

進一步地，上述梳理UE步驟之后，包括如下步驟，梳理技術難點和尋找解決方案。

進一步地，，所述梳理UE步驟之后，包括如下步驟，梳理公用模塊、方法和輸出公共類。

進一步地，所述梳理UE步驟之后，包括如下步驟，規(guī)劃接口數(shù)據(jù)和構建本地數(shù)據(jù)容器。

如圖3所示，一種web前端框架系統(tǒng)架構方法，包括如下步驟:前端啟動；框架選型；構建項目；梳理UI；規(guī)劃項目整體頁面結構；抽取公用模版/組件/元件；輸出靜態(tài)頁面/模版/組件/元件；集成/聯(lián)調；打包工具進行打包壓縮上線；結束。

如圖4所示，一種web前端框架系統(tǒng)架構方法，包括如下步驟:開始；讀取配置文件；加載頁面；渲染組件；讀取數(shù)據(jù)；渲染頁面；結束；其特征在于，所述渲染組件步驟包括：判斷是否是自定義組件，如果所述組件是自定義組件，則加載自定義組件，注冊到消息中心。

進一步地，所述讀取數(shù)據(jù)步驟包括：

第一步，判斷是否使用API路由中間件，如果是，則進入API路由解析；如果否，則直接進入第二步；

第二步，判斷是否使用緩存中間件，如果是，則獲取緩存數(shù)據(jù)；如果否，則進入第三步；

第三步，判斷是否使用適配器中間件，如果是，則數(shù)據(jù)通過適配器格式化；如果否，則返回數(shù)據(jù)。本發(fā)明的技術方案的有益效果在于：首先，本發(fā)明通過引入NOS解決了不同環(huán)境之間網絡隔離的問題，將更新后的配置文件先發(fā)送到NOS上，然后各個環(huán)境中配置對應的agent從NOS上獲取更新后的的配置文件。

以上的描述僅僅涉及本發(fā)明的一些具體實施方式，任何本領域的技術人員基于本發(fā)明的精神所做的替換或改進均應為本發(fā)明的保護范圍所涵蓋，本發(fā)明的保護范圍應以權利要求書為準。