[發(fā)明專利]一種前端框架實現(xiàn)方法及裝置

有效

• 申請?zhí)枺?/td>: 202011616828.1
• 申請日: 2020-12-30
• 公開（公告）號: CN112631604B
• 公開（公告）日: 2022-04-26
• 發(fā)明（設(shè)計）人: 張輝;張永強;李莊莊
• 申請（專利權(quán)）人: 武漢達(dá)夢數(shù)據(jù)技術(shù)有限公司
• 主分類號: G06F8/41
• 分類號: G06F8/41
• 代理公司: 深圳市六加知識產(chǎn)權(quán)代理有限公司 44372
• 代理人: 向彬

本發(fā)明涉及信息技術(shù)領(lǐng)域，本發(fā)明提供了一種前端框架實現(xiàn)方法及裝置，包括：加載.vue文件的文本內(nèi)容，將所述.vue文件的文本內(nèi)容分割為代碼片段并對所述代碼片段進行清洗，其中，所述代碼片段包括template、script和/或style；將所述template代碼片段和script代碼片段合成javascript代碼片段，在callVue方法中創(chuàng)建script標(biāo)簽，并將所述javascript代碼片段包裹到所述script標(biāo)簽中，將所述script標(biāo)簽追加到document文檔的head節(jié)點中執(zhí)行；并對script標(biāo)簽進行模塊標(biāo)記，通過completeLoad方法，將此模塊追加到全局回調(diào)事件隊列中去；其中，所述callVue方法實現(xiàn)javascript代碼片段的執(zhí)行和關(guān)聯(lián)加載。由于是純前端框架，后端人員更容易參與前端工作，即后端人員不需要學(xué)習(xí)前端開發(fā)的后端技術(shù)，如：NodeJs、TypeScript、CoffeeScript等后端技術(shù)，降低了學(xué)習(xí)成本。

【技術(shù)領(lǐng)域】

本發(fā)明涉及信息技術(shù)領(lǐng)域，特別是涉及一種前端框架實現(xiàn)方法及裝置。

【背景技術(shù)】

由于近幾年前端技術(shù)更新的步伐比較快，不斷推陳出新，涌現(xiàn)了很多優(yōu)秀的前端框架，如現(xiàn)在市面上很火爆的vue框架。但是隨著前端開發(fā)職業(yè)越來越獨立化、專業(yè)化，vue框架慢慢形成了需要使用后端NodeJs編譯的組件模式(翻譯成瀏覽器可以識別的東西)，這對后端開發(fā)人員不是很友好，開發(fā)環(huán)境搭建復(fù)雜，學(xué)習(xí)曲線陡峭，使用成本增大。但是目前很多公司的現(xiàn)狀是后端人員仍舊需要參與前端頁面的構(gòu)建和前端效果的實現(xiàn)工作。因此造成了一些公司的前端技術(shù)革新緩慢，新的前端技術(shù)難以應(yīng)用和推廣的困局。

例如：目前實際場景下若想使用element-ul框架(一款比較流行的基于vue實現(xiàn)的組件框架)作為前端框架，不僅需要學(xué)習(xí)NodeJs編譯、webpack配置、ECMA6語法翻譯等，還要下載幾百M的nodemodules包，很麻煩，如果想像以前使用的前端框架一樣，不需要后端編譯直接將vue引入到項目中，就需要開發(fā)一款純前端框架。

鑒于此，克服該現(xiàn)有技術(shù)所存在的缺陷是本技術(shù)領(lǐng)域亟待解決的問題。

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

本發(fā)明需要解決的技術(shù)問題是：

目前市面上很流行的vue框架為需要后端NodeJs編譯的組件模式，這種操作方式使后端開發(fā)人員要學(xué)習(xí)前端開發(fā)的后端技術(shù)，如：NodeJs、TypeScript、CoffeeScript等，這大大增加了后端開發(fā)人員的工作量以及學(xué)習(xí)成本；另一方面，由于前端開發(fā)需要NodeJs、TypeScript、CoffeeScript等后端技術(shù)的支持，使前端技術(shù)革新緩慢，新的前端技術(shù)難以應(yīng)用和推廣。

本發(fā)明通過如下技術(shù)方案達(dá)到上述目的：

第一方面，本發(fā)明提供一種前端框架實現(xiàn)方法，包括：

加載.vue文件的文本內(nèi)容，將所述.vue文件的文本內(nèi)容分割為代碼片段并對所述代碼片段進行清洗，其中，所述代碼片段包括template、script和/或style；

將所述template代碼片段和script代碼片段合成javascript代碼片段，在callVue方法中創(chuàng)建script標(biāo)簽，并將所述javascript代碼片段包裹到所述script標(biāo)簽中，將所述script標(biāo)簽追加到document文檔的head節(jié)點中執(zhí)行；并對script標(biāo)簽進行模塊標(biāo)記，通過completeLoad方法，將此模塊追加到全局回調(diào)事件隊列中去；

其中，所述callVue方法實現(xiàn)javascript代碼片段的執(zhí)行和關(guān)聯(lián)加載。

優(yōu)選的，所述style代碼片段的使用，具體包括：

創(chuàng)建style標(biāo)簽，將所述style標(biāo)簽追加到document文檔的head節(jié)點中；