本發(fā)明屬于計算機軟件技術(shù)領(lǐng)域，更具體地說，涉及一種圖形化的js代碼編輯器。

背景技術(shù)：

在傳統(tǒng)ecp(enterprisecloudplatform，企業(yè)管理云平臺)開發(fā)平臺下，如遠(yuǎn)光軟件的yg-ecp企業(yè)云平臺，前端開發(fā)人員每開發(fā)一個新功能都需要編寫大量的js(javascript)代碼，效率無法提高，而且每個開發(fā)人員存在能力差異，導(dǎo)致編寫出來的代碼質(zhì)量參差不齊，代碼的復(fù)用性差。而且代碼存在不直觀的缺點，當(dāng)發(fā)生人員調(diào)動等需要將代碼轉(zhuǎn)出情況時，接手人員要閱讀大量程序代碼，這使得程序維護(hù)復(fù)雜且代價昂貴。此外，一個優(yōu)秀前端開發(fā)人員需要花費大量時間累積經(jīng)驗，人員培養(yǎng)周期長。盡管開發(fā)人員已盡量避免重復(fù)勞動，但是依然需要使用大量時間編寫一些差異不大或者重復(fù)的代碼，擠壓了開發(fā)人員學(xué)習(xí)其他技能的學(xué)習(xí)時間。

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

本發(fā)明的目的是提供一種圖形化的js代碼編輯器，可以實現(xiàn)js代碼塊內(nèi)容的圖形化編輯。

為了實現(xiàn)上述目的，本發(fā)明采取如下的技術(shù)解決方案：

一種頁面流編輯器，包括：

元模型獲取模塊，用于獲取頁面流編輯所需的元模型；

頁面流處理模塊，用于在后臺處理js代碼的編輯；

頁面流展示模塊，用于提供圖形化界面，展示編輯界面和圖元。

進(jìn)一步地，所述圖形化界面為gef框架與ui框架相結(jié)合的封裝，將emf模型與gef框架相結(jié)合，使用emf模型作為gef編輯器中的模型層，提供基礎(chǔ)的編輯擴展，并對展現(xiàn)層提供默認(rèn)實現(xiàn)。

進(jìn)一步地，所述頁面流處理模塊包括：

模型解析模塊，用于掃描js代碼塊，獲取代碼塊完整字符串及模型標(biāo)識，并對代碼塊進(jìn)行解析和生成模型；

模型校驗?zāi)K，用于對通過模型解析模塊所生成的模型進(jìn)行校驗；

代碼生成模塊，用于將通過模型解析模塊所生成的模型生成代碼。

進(jìn)一步地，所述模型解析模塊進(jìn)一步包括：

掃描器，用于掃描js代碼；

模型規(guī)則解析器，用于解析模型的js代碼解析，定位模型所在的代碼塊；

模型解析器，用于將js代碼塊解析為模型。

進(jìn)一步地，所述代碼解析和模型生成是通過如下步驟實現(xiàn)：

掃描器逐個字符掃描js代碼塊，并根據(jù)解析需要獲取指定位置字符；模型規(guī)則解析器根據(jù)規(guī)則判斷代碼塊是否為開始，字符是否接受，代碼塊是否結(jié)束，獲取代碼塊完整字符串及模型標(biāo)識；模型解析器進(jìn)行模型解析和生成。

進(jìn)一步地，所述代碼生成模塊進(jìn)一步包括，

節(jié)點訪問者，用于生成節(jié)點模型的代碼；

代碼生成器，用于將模型生成js代碼；

進(jìn)一步地，代碼生成是通過如下步驟實現(xiàn)：

根據(jù)模型找到對應(yīng)的代碼生成器，根據(jù)傳入的模型類型創(chuàng)建節(jié)點訪問者；

節(jié)點訪問者輸出代碼塊的開始部分；

遍歷模型的所有子節(jié)點，將子節(jié)點作為參數(shù)創(chuàng)建節(jié)點訪問者；

節(jié)點訪問者輸出代碼塊的結(jié)束部分；

代碼生成器輸出代碼塊字符串。

進(jìn)一步地，所述模型校驗?zāi)K進(jìn)一步包括，

模型校驗器，用于對模型進(jìn)行編譯檢查。

進(jìn)一步地，所述模型校驗通過如下步驟實現(xiàn)：

依據(jù)模型框架，根據(jù)實現(xiàn)頁面流所對應(yīng)的文件，找到對應(yīng)的模型庫，調(diào)用模型庫綁定的模型校驗器對文件進(jìn)行校驗；

模型校驗器對模型進(jìn)行校驗，并在實現(xiàn)頁面流所對應(yīng)的文件上標(biāo)記錯誤信息。

進(jìn)一步地，所述頁面流處理模塊還包括模型轉(zhuǎn)換器，用于實現(xiàn)文件模型與emf模型之間的轉(zhuǎn)換，將文件格式轉(zhuǎn)換成編輯器可識別的對象。

進(jìn)一步地，所述頁面流處理模塊還包括類接口描述器，用于管理某一種模型所有使用的模型解析器、代碼生成器、模型轉(zhuǎn)換器和模型校驗器。

進(jìn)一步地，所述頁面流編輯器采用emf模型框架事先定義編輯器中使用的頁面流模型，采用ide模型索引框架對頁面流模型進(jìn)行管理。

由以上技術(shù)方案可知，本發(fā)明實現(xiàn)了圖形化編程，開發(fā)便捷，邏輯處理直觀、簡潔、易于維護(hù)，降低了開發(fā)成本；在代碼編輯過程中，開發(fā)工程師可在頁面流展示模塊形成的圖元界面上輸入命令，頁面流處理模塊按照指定規(guī)則生成代碼，統(tǒng)一規(guī)范了js代碼格式，保證了js代碼的質(zhì)量。同時，本發(fā)明的頁面流編輯器使用統(tǒng)一的模型框架規(guī)范了模型的結(jié)構(gòu)，規(guī)范化模型管理。

附圖說明

為了更清楚地說明本發(fā)明實施例，下面將對實施例或現(xiàn)有技術(shù)描述中所需要使用的附圖做簡單介紹，顯而易見地，下面描述中的附圖僅僅是本發(fā)明的一些實施例，對于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動的前提下，還可以根據(jù)這些附圖獲得其他的附圖。

圖1為本發(fā)明實施例的模塊框圖；

圖2為頁面流處理模塊的框圖；

圖3為模型解析流程圖；

圖4為模型賦值圖元的界面示意圖；

圖5為服務(wù)端圖元的界面示意圖；

圖6為生成的代碼示意圖。

具體實施方式

下面將結(jié)合本發(fā)明實施例中的附圖，對本發(fā)明實施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實施例僅僅是本發(fā)明一部分實施例，而不是全部的實施例，基于本發(fā)明中的實施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都屬于本發(fā)明保護(hù)的范圍。

本實施例中，頁面流編輯器采用emf(eclipsemodelingframework，eclipse模型框架)模型框架事先定義編輯器中使用的頁面流模型，以規(guī)范化編輯過程中使用的模型結(jié)構(gòu)；并在編輯器中采用ide(integrateddevelopmentenvironment，集成開發(fā)環(huán)境)模型索引框架對頁面流模型進(jìn)行管理，以規(guī)范化模型管理，為編輯過程中模型的解析、保存、校驗的統(tǒng)一提供基礎(chǔ)，并且可以解耦各個實際模型之間的關(guān)系，增強模型間交互的便利性。

如圖1所示，本實施例的頁面流編輯器包括元模型獲取模塊、頁面流處理模塊、頁面流展示模塊。其中，元模型獲取模塊為頁面流編輯提供元模型；頁面流處理模塊用于在后臺處理js代碼的編輯，包括js代碼解析、文件模型與emf模型間的互相轉(zhuǎn)換、模型的編譯檢查等；頁面流展示模塊用于提供圖形化界面，所述圖形化界面為gef(graphicaleditingframework，圖形編輯框架)框架與ui(userinterface，用戶界面)框架相結(jié)合的封裝，將預(yù)先定義的emf模型與gef框架相結(jié)合，使用emf模型作為gef編輯器中的模型層，提供基礎(chǔ)的編輯擴展，并對展現(xiàn)層提供默認(rèn)實現(xiàn)，包括平面布局展示、圖元的懸掛、拖拽圖元生成模型并展示等，即展示編輯界面和圖元，使用ui框架實現(xiàn)界面代碼的開發(fā)。

如圖2所示，頁面流處理模塊包括模型解析模塊、模型校驗?zāi)K、代碼生成模塊、模型轉(zhuǎn)換器、類接口描述器。

模型解析模塊，用于掃描js代碼塊，獲取代碼塊完整字符串及模型標(biāo)識，并對代碼塊進(jìn)行解析和生成模型。所述模型解析模塊進(jìn)一步包括：掃描器(iscanner)，用于掃描js代碼；模型規(guī)則解析器(iemodelruler)，用于 解析模型的js代碼解析，定位模型所在的代碼塊；模型解析器(iemodelparser)，用于將js代碼塊解析為模型。

模型校驗?zāi)K，用于對將通過模型解析模塊所生成的模型進(jìn)行校驗。所述模型校驗?zāi)K進(jìn)一步包括模型校驗器(iemodelvalidator)，用于對模型進(jìn)行編譯檢查。

代碼生成模塊，用于將通過模型解析模塊所生成的模型生成代碼。所述代碼生成模塊進(jìn)一步包括：節(jié)點訪問者(ienodevisitor)，用于生成節(jié)點模型的代碼；代碼生成器(iemodelcodegenerator)，用于將模型生成js代碼。

模型轉(zhuǎn)換器(ietranslator)，用于實現(xiàn)文件模型與emf模型之間的轉(zhuǎn)換，將文件格式轉(zhuǎn)換成編輯器可識別的對象。其中，

頁面流emf模型轉(zhuǎn)換至文件模型的步驟包括：提取編輯器中所有分支，建立分支圖元與后續(xù)圖元關(guān)系于順序圖；以開始圖元為起點，注冊所有主線圖元與順序圖；遍歷所有圖元，針對異常圖元特殊處理，更新順序圖；根據(jù)順序圖，將節(jié)點放入對應(yīng)的頁面流模型；模型轉(zhuǎn)換器完成模型到文件的轉(zhuǎn)換。

頁面流文件模型轉(zhuǎn)換至emf模型的步驟包括：讀取文件模型，提取異常圖元子節(jié)點，注冊到順序圖；提取分支圖元，注冊至與順序圖；構(gòu)造出主線順序圖，保存異常圖元；根據(jù)異常圖元創(chuàng)建并生成且保存組合圖元；根據(jù)順序圖，繪制主線圖元的連線；提取分支圖元信息，繪制獨立的分支圖元所在分支的完成圖元及連線；將獨立分支在主線上連線；將異常圖元在主線上連線；模型轉(zhuǎn)換器完成文件到模型的轉(zhuǎn)換。

類接口描述器(iedescription)，用于管理某一種模型所有使用的模型解析器、代碼生成器、模型轉(zhuǎn)換器和模型校驗器。

本實施例的頁面流編輯器可以實現(xiàn)js代碼的組件化與圖元化，在編輯器中實現(xiàn)圖元的懸掛、拖拽、平面布局展示，實現(xiàn)統(tǒng)一模型框架和索引框架對頁面流的管理，規(guī)范模塊化管理，以及實現(xiàn)頁面流對異步控制流的支持。頁面流處理模塊中的各子模塊可單獨實現(xiàn)或相配合實現(xiàn)編輯功能，下面以一些具體使用例對本實施例頁面流編輯器的功能實現(xiàn)進(jìn)行說明。

a.模型解析功能

參照圖3，當(dāng)頁面流處理模塊在后臺執(zhí)行模型解析時，其通過掃描器、模型規(guī)則解析器及模型解析器三個子模塊完成，該三個子模塊各自完成的功能為：掃描器逐個字符掃描js代碼塊，并根據(jù)解析需要獲取指定位置字符；模型規(guī)則解析器確定代碼塊是否為開始，字符是否接受，代碼塊是否結(jié)束，獲取代碼塊完整字符串及模型標(biāo)識；模型解析器進(jìn)行模型解析和生產(chǎn)。

模型解析的步驟如下：

對代碼塊進(jìn)行逐個字符掃描；

根據(jù)規(guī)則判斷當(dāng)前字符是否為模型的開始，如是則將當(dāng)前字符進(jìn)行保存，如果否則返回前一步，繼續(xù)循環(huán)掃描，直至找到模型的開始代碼塊；然后根據(jù)規(guī)則判斷模型代碼塊是否結(jié)束，如果是則將代碼交由模型解析器進(jìn)行解析，如果否則返回前一步，繼續(xù)循環(huán)掃描，直至找到模型的結(jié)束代碼塊；

模型解析器解析生成模型。

b.代碼生成功能

當(dāng)頁面流處理模塊在后臺執(zhí)行代碼生成時，其通過代碼生成器、節(jié)點訪問者兩個子模塊實現(xiàn)，其步驟如下：

類接口描述其根據(jù)模型找到對應(yīng)的代碼生成器，根據(jù)傳入的模型類型創(chuàng)建節(jié)點訪問者；

節(jié)點訪問者輸出代碼塊的開始部分；

遍歷模型的所有子節(jié)點，將子節(jié)點作為參數(shù)創(chuàng)建節(jié)點訪問者；

節(jié)點訪問者輸出代碼塊的結(jié)束部分；

代碼生成器輸出代碼塊字符串。

c.模型校驗功能

頁面流處理模塊在后臺執(zhí)行模型校驗步驟如下：

類接口描述器依據(jù)模型框架，根據(jù)實現(xiàn)頁面流所對應(yīng)的文件，如要編輯的文件源代碼等資源，找到對應(yīng)的模型庫，調(diào)用模型庫綁定的模型校驗器對文件進(jìn)行校驗；

模型校驗器對模型進(jìn)行校驗，并在實現(xiàn)頁面流所對應(yīng)的文件上標(biāo)記錯誤信息。

如圖4和圖5所示，為本實施例頁面流編輯器模型賦值圖元和客戶端調(diào)用圖元的界面示意圖，開發(fā)人員只需在圖形化界面中呈現(xiàn)的圖元界面上填寫相應(yīng)內(nèi)容，頁面流處理模塊即可在后臺生產(chǎn)對應(yīng)的代碼，如圖6所示。

本實施例的頁面流編輯器使用統(tǒng)一的模型框架規(guī)范了模型的結(jié)構(gòu)，使用統(tǒng)一的索引框架對頁面流模型進(jìn)行管理，規(guī)范化模型管理；在編輯過程中，開發(fā)工程師可在頁面流展示模塊形成的圖元界面上輸入命令，頁面流處理模塊按照指定規(guī)則生成代碼，統(tǒng)一規(guī)范了js代碼格式，保證了js代碼的質(zhì)量。本發(fā)明實現(xiàn)了圖形化編程，開發(fā)便捷，邏輯處理直觀、簡潔、易于維護(hù)；降低了前端js代碼的開發(fā)難度，簡單易于上手，即使初級前端開發(fā)工程師也能保證編寫出技術(shù)難度較高的高質(zhì)量代碼，降低了開發(fā)成本。

對所公開的實施例的上述說明，使本領(lǐng)域?qū)I(yè)技術(shù)人員能夠?qū)崿F(xiàn)或使用本發(fā)明。對前述實施例的多種修改對本領(lǐng)域的專業(yè)技術(shù)人員來說將是顯而易見的，本發(fā)明中所定義的一般原理可以在不脫離本發(fā)明的精神或范圍的情況下，在其它實施例中實現(xiàn)。因此，本發(fā)明將不會被限制于前述實施例，而是要符合與本發(fā)明所公開的原理和新穎特點相一致的最寬的范圍。