一種ambari-web端架構(gòu)分析方法
【專利摘要】本發(fā)明提出一種ambari-web端架構(gòu)的分析方法,首先讀取ambari-web端源代碼,提取特征字段,通過搜索引擎搜索所述特征字段,確定所述ambari-web端代碼所采用的框架結(jié)構(gòu);然后解析ambari-web端代碼功能模塊,基于確定的框架結(jié)構(gòu),確定ambari-web端的代碼的調(diào)用流程圖;最后調(diào)用瀏覽器的調(diào)試工具驗證分析的正確性。基于本發(fā)明提出的方法,能夠從框架結(jié)構(gòu)入手,進(jìn)而了解某一框架結(jié)構(gòu)下代碼的功能,從而了解這樣一類網(wǎng)頁代碼的結(jié)構(gòu)和功能模塊,提高開發(fā)效率。
【專利說明】—種ambar i_web端架構(gòu)分析方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及計算機(jī)【技術(shù)領(lǐng)域】,具體涉及一種ambar1-web端架構(gòu)的分析方法。
【背景技術(shù)】
[0002]對于現(xiàn)在越來越多而且豐富多彩的網(wǎng)頁,前端的程序員們有必要建立一種全面而且高效的掌握前端代碼組織結(jié)構(gòu)和功能的方法。而且現(xiàn)在網(wǎng)頁的架構(gòu)越來越多,比如說:jQuery.js、Ember.js、Backbone.js、Knockout.js>Spine.js、Batman.js 和 Angular, js 等。如果事先不了解網(wǎng)頁的架構(gòu),那么開發(fā)人員就需要重復(fù)的瀏覽代碼,導(dǎo)致開發(fā)工作繁重,效率不高。
【發(fā)明內(nèi)容】
[0003]為了避免重復(fù)、繁重地瀏覽代碼,提高開發(fā)效率,本發(fā)明提出了一種ambar1-web端代碼的分析方法,包括如下步驟:
[0004]A.讀取ambar1-web端源代碼,提取特征字段,通過搜索引擎搜索所述特征字段,確定所述ambar1-web端代碼所采用的框架結(jié)構(gòu);
[0005]B.解析ambar1-web端代碼功能模塊,基于步驟A確定的框架結(jié)構(gòu),確定ambar1-web端的代碼的調(diào)用流程圖;
[0006]C.調(diào)用瀏覽器的調(diào)試工具驗證分析的正確性。
[0007]特別地,步驟A中確定所述ambar1-web端代碼采用了 Ember, js框架結(jié)構(gòu)。
[0008]特別地,所述ambar1-web端的代碼的調(diào)用流程圖確定為:web端通過utils模塊和server端通信,將獲得的數(shù)據(jù)通過template模塊和view模塊顯示出來,或者交給controller模塊,由它存儲到model模塊中;同時用戶操作會告知controller模塊,由其決定是把用戶提交的數(shù)據(jù)存儲到mode I中還是通過route模塊顯示出來或者傳輸給server服務(wù)器。
[0009]本發(fā)明的有益效果是:基于本發(fā)明提出的方法,能夠從框架結(jié)構(gòu)入手,進(jìn)而了解某一框架結(jié)構(gòu)下代碼的功能,從而了解這樣一類網(wǎng)頁代碼的結(jié)構(gòu)和功能模塊,提高開發(fā)效率。
【專利附圖】
【附圖說明】
[0010]附圖1是本發(fā)明提出的ambar1-web端架構(gòu)的分析方法的流程圖
[0011]附圖2是根據(jù)本發(fā)明提出的方法分析出的Ember, js架構(gòu)的模塊圖;
[0012]附圖3是根據(jù)本發(fā)明提出的方法分析出的ambar1-web端數(shù)據(jù)處理流程圖;
【具體實(shí)施方式】
[0013]下面結(jié)合附圖對本發(fā)明提出的實(shí)施方式進(jìn)行具體說明。
[0014]考慮到前端代碼復(fù)雜而且重復(fù)的特點(diǎn),本發(fā)明的一個實(shí)施方式提出的ambar1-web端架構(gòu)的分析方法,先總體分析ambar1-web端代碼的框架,再解析ambar1-web端代碼功能模塊,最后通過瀏覽器的調(diào)試工具驗證分析的正確性。參照附圖1詳細(xì)介紹如下:
[0015]1.分析ambar1-web端代碼框架結(jié)構(gòu)
[0016]通過eclipse工具讀取源代碼,總體瀏覽ambar1-web端代碼。Eclipse工具會顯示出源代碼的結(jié)構(gòu),通過查看每個代碼模塊的名稱能夠分析出相應(yīng)代碼模塊的功能。提取代碼特征,例如選擇幾個源文件打開,截取代碼中相同的部分,這些部分包括代碼中的特征字段,將這些部分作為關(guān)鍵信息通過搜索引擎搜索,即可得知ambar1-web端代碼采用了何種框架結(jié)構(gòu),例如jQuery.js和Ember, js兩種框架的融合,其中Ember, js負(fù)責(zé)顯示界面、界面間跳轉(zhuǎn)和存儲數(shù)據(jù),而jQuery.js則是負(fù)責(zé)與服務(wù)器的通訊。Ember, js的框架結(jié)構(gòu)如下圖2所示。
[0017]2.解析ambar1-web端代碼功能模塊
[0018]在知道ambar1-web端代碼框架結(jié)構(gòu)之后,執(zhí)行解析ambar1-web代碼中的功能模塊結(jié)構(gòu)的步驟。采用代碼工具分析ambar1-web代碼的根目錄,通過變量命名就可以知道動態(tài)的頁面都在app目錄下面,而public-static目錄下面存儲的是靜態(tài)的全局變量。再分析app目錄,確定其中文件屬性。這樣我們就可以基于Ember, js框架結(jié)構(gòu),將ambar1-web端的代碼的調(diào)用流程圖展現(xiàn)出來,如下圖2所示。
[0019]參見圖2, ambar1-web端的代碼的調(diào)用流程如下:web端通過utils模塊和server端通信,將獲得的數(shù)據(jù)通過template模塊和view模塊顯示出來,或者交給controller模塊,由它存儲到model模塊中。同時用戶操作會告知controller模塊,由其決定是把用戶提交的數(shù)據(jù)存儲到model中還是通過route模塊顯示出來或者傳輸給server服務(wù)器。
[0020]3.調(diào)用瀏覽器的調(diào)試工具驗證分析的正確性
[0021]本步驟通過調(diào)用瀏覽器的調(diào)試工具,根據(jù)輸出的日志信息能夠很清楚的看到數(shù)據(jù)的流向以及代碼中函數(shù)的調(diào)用過程。這樣就很容易在了解代碼整體框架的基礎(chǔ)上,更加細(xì)致的了解功能模塊的每一段代碼中的函數(shù)的功能。
[0022]當(dāng)然,本發(fā)明還可有其他多種實(shí)施例,在不背離本發(fā)明精神及其實(shí)質(zhì)的情況下,熟悉本領(lǐng)域的技術(shù)人員當(dāng)可根據(jù)本發(fā)明作出各種相應(yīng)的改變和變形,但這些相應(yīng)的改變和變形都應(yīng)屬于本發(fā)明的權(quán)利要求的保護(hù)范圍。
【權(quán)利要求】
1.一種ambar1-web端架構(gòu)的分析方法,其特征在于,包括: A.讀取ambariieb端源代碼,提取特征字段,通過搜索引擎搜索所述特征字段,確定所述ambar1-web端代碼所采用的框架結(jié)構(gòu); B.解析ambar1-web端代碼功能模塊,基于步驟A確定的框架結(jié)構(gòu),確定ambar1-web端的代碼的調(diào)用流程圖; C.調(diào)用瀏覽器的調(diào)試工具驗證分析的正確性。
2.如權(quán)利要求1所述方法,其特征在于:步驟A中確定所述ambar1-web端代碼采用了Ember, js框架結(jié)構(gòu)。
3.如權(quán)利要求2所述的方法,其特征在于:所述ambar1-web端的代碼的調(diào)用流程圖確定為:web端通過utils模塊和server端通信,將獲得的數(shù)據(jù)通過template模塊和view模塊顯示出來,或者交給controller模塊,由它存儲到model模塊中;同時用戶操作會告知controller模塊,由其決定是把用戶提交的數(shù)據(jù)存儲到model中還是通過route模塊顯示出來或者傳輸給server服務(wù)器。
【文檔編號】G06F9/44GK104133681SQ201410363957
【公開日】2014年11月5日 申請日期:2014年7月28日 優(yōu)先權(quán)日:2014年7月28日
【發(fā)明者】周國浪 申請人:浪潮(北京)電子信息產(chǎn)業(yè)有限公司