本發(fā)明涉及計(jì)算機(jī)應(yīng)用領(lǐng)域，特別是涉及一種組件構(gòu)建方法和裝置、組件調(diào)用方法和裝置。

背景技術(shù)：

AngularJS是建立在輕量jQuery之上的一個(gè)結(jié)構(gòu)化前端MVVM(Model View View Model)框架，用于構(gòu)建單頁面Web應(yīng)用。AngularJS是大而全的框架，用來開發(fā)組件學(xué)習(xí)成本大，雙向數(shù)據(jù)綁定在復(fù)雜的交互情況下性能陡然下降。

React是由Fackbook推出的一個(gè)JavaScipt框架，React是一個(gè)用于構(gòu)建組件化UI(User Interface，用戶界面)的庫，是一個(gè)前端界面開發(fā)工具。因React只負(fù)責(zé)view層，開發(fā)者在model、controller層需要花費(fèi)很大的精力，并且JSX語法編寫的代碼需要通過打包工具webpack、babel編譯成原生javascript語法，在開發(fā)項(xiàng)目中難以大范圍推廣使用。

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

基于此，有必要針對(duì)傳統(tǒng)構(gòu)建組件方式難以大范圍推廣使用的問題，提供一種組件構(gòu)建方法和裝置，能擴(kuò)大使用范圍。

此外，還有必要提供一種組件調(diào)用方法和裝置，能擴(kuò)大使用范圍

一種組件構(gòu)建方法，包括：

獲取功能需求；

根據(jù)功能需求在模型層model與控制層controller擴(kuò)展，使用用于構(gòu)建用戶界面的腳步庫React的語法編寫所述功能需求得到對(duì)應(yīng)的源代碼；

將所述源代碼編譯成原生腳本；

對(duì)所述原生腳本采用異步模塊加載機(jī)制AMD規(guī)范包裝成用于構(gòu)建用戶界面的腳步庫React組件。

一種組件調(diào)用方法，包括：

獲取業(yè)務(wù)需求；

根據(jù)所述業(yè)務(wù)需求調(diào)用對(duì)應(yīng)的用于構(gòu)建用戶界面的腳步庫React組件，所述用于構(gòu)建用戶界面的腳步庫React組件為根據(jù)功能需求在模型層model與控制層controller擴(kuò)展，使用用于構(gòu)建用戶界面的腳步庫React的語法編寫所述功能需求得到對(duì)應(yīng)的源代碼，并將所述源代碼編譯成原生腳本，以及對(duì)所述原生腳本采用異步模塊加載機(jī)制AMD規(guī)范包裝得到的用于構(gòu)建用戶界面的腳步庫React組件；

獲取對(duì)所述用于構(gòu)建用戶界面的腳步庫React組件配置的參數(shù)；

將所述配置的參數(shù)傳遞給對(duì)應(yīng)的用于構(gòu)建用戶界面的腳步庫React組件，形成包含所述參數(shù)的用于構(gòu)建用戶界面的腳步庫React組件；

展示包含所述參數(shù)的所述用于構(gòu)建用戶界面的腳步庫React組件。

一種組件構(gòu)建裝置，包括：

功能需求獲取模塊，用于獲取功能需求；

編寫模塊，用于根據(jù)功能需求在模型層model與控制層controller擴(kuò)展，使用用于構(gòu)建用戶界面的腳步庫React編寫所述功能需求得到對(duì)應(yīng)的源代碼；

生成模塊，用于將所述源代碼編譯成原生腳本；

封裝模塊，用于對(duì)所述原生腳本采用異步模塊加載機(jī)制AMD規(guī)范包裝成用于構(gòu)建用戶界面的腳步庫React組件。

一種組件調(diào)用裝置，包括：

業(yè)務(wù)需求獲取模塊，用于獲取業(yè)務(wù)需求；

調(diào)用模塊，用于根據(jù)所述業(yè)務(wù)功能需求調(diào)用對(duì)應(yīng)的用于構(gòu)建用戶界面的腳步庫React組件，所述用于構(gòu)建用戶界面的腳步庫React組件為根據(jù)功能需求在模型層model與控制層controller擴(kuò)展，使用用于構(gòu)建用戶界面的腳步庫React的語法編寫所述功能需求得到對(duì)應(yīng)的源代碼，并將所述源代碼編譯成原生腳本，以及對(duì)所述原生腳本采用異步模塊加載機(jī)制AMD規(guī)范包裝得到的用于構(gòu)建用戶界面的腳步庫React組件；

參數(shù)配置模塊，用于獲取對(duì)所述用于構(gòu)建用戶界面的腳步庫React組件配置的參數(shù)；

傳遞模塊，用于將所述配置的參數(shù)傳遞給對(duì)應(yīng)的用于構(gòu)建用戶界面的腳步庫React組件，形成包含所述參數(shù)的用于構(gòu)建用戶界面的腳步庫React組件；

展示模塊，用于展示包含所述配置參數(shù)的所述用于構(gòu)建用戶界面的腳步庫React組件。

上述組件構(gòu)建方法和裝置，通過使用用于構(gòu)建用戶界面的腳步庫React編寫功能需要對(duì)應(yīng)的源代碼，并將源代碼編譯成原生腳本，將原生腳本通過AMD規(guī)范包裝成React組件，被使用時(shí)，通過簡單的調(diào)用即可使用React組件，擴(kuò)大了使用范圍，且組件可復(fù)用性高，能夠被AMD、webpack模塊管理器加載，功能豐富，擴(kuò)展了原生html不具備的特性，且不需要開發(fā)者專門學(xué)習(xí)React即可使用React組件，降低了開發(fā)者的學(xué)習(xí)門檻，同時(shí)組件提供的豐富功能能滿足開發(fā)組日常需求，提升了新產(chǎn)品售賣開發(fā)效率，縮短了產(chǎn)品上線周期。

上述組件調(diào)用方法和裝置，根據(jù)業(yè)務(wù)需求調(diào)用對(duì)應(yīng)的React組件，并獲取React組件配置的參數(shù)，將參數(shù)傳遞給React組件，形成包含該參數(shù)的React組件，并展示該React組件，調(diào)用方式簡單，不需要開發(fā)者專門學(xué)習(xí)React即可使用React組件，降低了開發(fā)者的學(xué)習(xí)門檻，同時(shí)組件提供的豐富功能能滿足開發(fā)組日常需求，提升了新產(chǎn)品售賣開發(fā)效率，縮短了產(chǎn)品上線周期。

附圖說明

圖1為一個(gè)實(shí)施例中電子設(shè)備的內(nèi)部結(jié)構(gòu)示意圖；

圖2為一個(gè)實(shí)施例中組件構(gòu)建方法的流程圖；

圖3A為按鈕組件的示意圖；

圖3B為下拉組件的示意圖；

圖3C為數(shù)值輸入框組件的示意圖；

圖3D為滑動(dòng)條組件的示意圖；

圖3E為氣泡提示組件的示意圖；

圖3F為表格組件的示意圖；

圖4為根據(jù)功能需求在model層與controller層擴(kuò)展，使用React的語法編寫該功能需求得到對(duì)應(yīng)的源代碼的具體流程示意圖；

圖5為一個(gè)實(shí)施例中組件調(diào)用方法的流程圖；

圖6為調(diào)用組件形成頁面的示意圖；

圖7為一個(gè)實(shí)施例中組件調(diào)用方法應(yīng)用于構(gòu)建云產(chǎn)品售賣頁的架構(gòu)圖；

圖8為一個(gè)實(shí)施例中組件構(gòu)建裝置的結(jié)構(gòu)框圖；

圖9為一個(gè)實(shí)施例中組件調(diào)用裝置的結(jié)構(gòu)框圖。

具體實(shí)施方式

為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點(diǎn)更加清楚明白，以下結(jié)合附圖及實(shí)施例，對(duì)本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說明。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。

可以理解，本發(fā)明所使用的術(shù)語“第一”、“第二”等可在本文中用于描述各種元件，但這些元件不受這些術(shù)語限制。這些術(shù)語僅用于將第一個(gè)元件與另一個(gè)元件區(qū)分。

圖1為一個(gè)實(shí)施例中電子設(shè)備的內(nèi)部結(jié)構(gòu)示意圖。如圖1所示，該電子設(shè)備包括通過系統(tǒng)總線連接的處理器、非易失性存儲(chǔ)介質(zhì)、內(nèi)存儲(chǔ)器、網(wǎng)絡(luò)接口、顯示屏和輸入裝置。其中，電子設(shè)備的非易失性存儲(chǔ)介質(zhì)存儲(chǔ)有操作系統(tǒng)，還包括一種組件構(gòu)建裝置和組件調(diào)用裝置，該組件構(gòu)建裝置用于實(shí)現(xiàn)一種組件構(gòu)建裝置方法，該組件調(diào)用裝置用于實(shí)現(xiàn)一種組件調(diào)用裝置方法。該處理器用于提供計(jì)算和控制能力，支撐整個(gè)電子設(shè)備的運(yùn)行。電子設(shè)備中的內(nèi)存儲(chǔ)器為非易失性存儲(chǔ)介質(zhì)中的組件構(gòu)建裝置和組件調(diào)用裝置的運(yùn)行提供環(huán)境，該內(nèi)存儲(chǔ)器中可儲(chǔ)存有計(jì)算機(jī)可讀指令，該計(jì)算機(jī)可讀指令被所述處理器執(zhí)行時(shí)，可使得所述處理器執(zhí)行一種組件構(gòu)建方法和組件調(diào)用方法。網(wǎng)絡(luò)接口用于與其他設(shè)備進(jìn)行網(wǎng)絡(luò)通信。電子設(shè)備的顯示屏可以是液晶顯示屏或者電子墨水顯示屏等，輸入裝置可以是顯示屏上覆蓋的觸摸層，也可以是電子設(shè)備外殼上設(shè)置的按鍵、軌跡球或觸控板，也可以是外接的鍵盤、觸控板或鼠標(biāo)等。該電子設(shè)備可以是手機(jī)、個(gè)人計(jì)算機(jī)、平板電腦、個(gè)人數(shù)字助理、穿戴式設(shè)備或服務(wù)器等。本領(lǐng)域技術(shù)人員可以理解，圖1中示出的結(jié)構(gòu)，僅僅是與本申請(qǐng)方案相關(guān)的部分結(jié)構(gòu)的框圖，并不構(gòu)成對(duì)本申請(qǐng)方案所應(yīng)用于其上的電子設(shè)備的限定，具體的電子設(shè)備可以包括比圖中所示更多或更少的部件，或者組合某些部件，或者具有不同的部件布置。

圖2為一個(gè)實(shí)施例中組件構(gòu)建方法的流程圖。如圖2所示，一種組件構(gòu)建方法，包括：

步驟202，獲取功能需求。

功能需求是指提供某一服務(wù)所需要的功能。如地址選擇服務(wù)，可采用按鈕選擇功能或下拉框功能等實(shí)現(xiàn)。

步驟204，根據(jù)功能需求在模型層model與控制層controller擴(kuò)展，使用用于構(gòu)建用戶界面的腳步庫React編寫該功能需求得到對(duì)應(yīng)的源代碼。

本實(shí)施例中，在model層與controller層擴(kuò)展，React內(nèi)部使用JSX語法編寫該功能需求得到對(duì)應(yīng)的源代碼。JSX是一個(gè)看起來很像XML(Extensible Markup Language，可擴(kuò)展標(biāo)記語言)的JavaScript語法擴(kuò)展。

model層是模型層，是應(yīng)用程序中用于處理應(yīng)用程序數(shù)據(jù)邏輯的部分，通常模型對(duì)象負(fù)責(zé)在數(shù)據(jù)庫中存取數(shù)據(jù)。模型表示企業(yè)數(shù)據(jù)和業(yè)務(wù)規(guī)則。controller層是控制器層，是應(yīng)用程序中處理用戶交互的部分，通?？刂破髫?fù)責(zé)從視圖讀取數(shù)據(jù)，控制用戶輸入，并向模型層發(fā)送數(shù)據(jù)。

React是由Fackbook推出的一個(gè)JavaScipt框架，用于構(gòu)建用戶界面的Javascript(腳步)庫。React實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流。

步驟206，將該源代碼編譯成原生腳本。

本實(shí)施例中，將源代碼編譯成原生JavaScript(腳本)。

步驟208，對(duì)該原生腳本采用異步模塊加載機(jī)制AMD規(guī)范包裝成用于構(gòu)建用戶界面的腳步庫React組件。

本實(shí)施例中，AMD規(guī)范是指Asynchronous Module Definition，異步模塊加載機(jī)制。AMD規(guī)范完整描述了模塊的定義，依賴關(guān)系，引用關(guān)系以及加載機(jī)制。

該用于構(gòu)建用戶界面的腳步庫React組件包括按鈕組件、下拉組件、數(shù)值輸入框組件、滑動(dòng)條組件、氣泡提示組件和表格組件。React組件通過一個(gè)render()方法，接收輸入的參數(shù)并返回展示的對(duì)象。

如圖3A所示，按鈕組件可用于獲取調(diào)用者傳入渲染組件的數(shù)據(jù)后，在按鈕某一項(xiàng)選中的時(shí)候通知調(diào)用方當(dāng)前選中的值。調(diào)用者還可以傳入?yún)?shù)將按鈕分類、禁用灰掉、上方氣泡提示等。按鈕包括廣州、上海、上海金融、北京、香港、多倫多。

如圖3B所示，下拉組件可用于獲取調(diào)用者傳入渲染組件的數(shù)據(jù)后，在下拉框中某一項(xiàng)選中的時(shí)候通知調(diào)用方當(dāng)前選中的值。調(diào)用者還可以傳入?yún)?shù)將下拉某一項(xiàng)禁用、右側(cè)氣泡提示、每一項(xiàng)支持最右側(cè)展示折扣促銷圖標(biāo)等。

如圖3C所示，數(shù)值輸入框組件用于獲取調(diào)用者傳入的最小值、最大值以限制用戶輸入的數(shù)值的區(qū)間。比如傳入{min:1,max：50}。用戶只能輸入1至50這個(gè)區(qū)間的值。若用戶輸入值不在該區(qū)間內(nèi)，數(shù)值輸入框組件自動(dòng)將值修復(fù)成最小值或最大值。

如圖3D所示，滑動(dòng)條組件可用于獲取調(diào)用者傳入的最小值、最大值以限制用戶輸入的數(shù)值的區(qū)間?；瑒?dòng)條更新會(huì)同步輸入框更新，輸入框數(shù)值更新會(huì)同步滑動(dòng)條的位置。數(shù)值更新會(huì)通知調(diào)用者當(dāng)前的值。

如圖3E所示，氣泡提示組件可用于展示氣泡提示。用戶可自由選擇氣泡展示在目標(biāo)元素的位置(例如上、下、左、右)。當(dāng)瀏覽器縮小寬高時(shí)，氣泡會(huì)自適應(yīng)調(diào)整位置，避免被擋住看不見。

如圖3F所示，表格組件可獲取調(diào)用者傳入展示的json數(shù)據(jù)即可展示表格。表格支持單選、多選、排序等。當(dāng)用戶選中一行或多行時(shí)，表格組件會(huì)通知調(diào)用者此時(shí)選中的數(shù)據(jù)。

上述組件構(gòu)建方法，通過使用React的語法編寫功能需要對(duì)應(yīng)的源代碼，并將源代碼編譯成原生腳本，將原生腳本通過AMD規(guī)范包裝成React組件，被使用時(shí)，通過簡單的調(diào)用即可使用React組件，擴(kuò)大了使用范圍，且組件可復(fù)用性高，能夠被AMD、webpack模塊管理器加載，功能豐富，擴(kuò)展了原生html不具備的特性，且不需要開發(fā)者專門學(xué)習(xí)React即可使用React組件，降低了開發(fā)者的學(xué)習(xí)門檻，同時(shí)組件提供的豐富功能能滿足開發(fā)組日常需求，提升了新產(chǎn)品售賣開發(fā)效率，縮短了產(chǎn)品上線周期。

如圖4所示，在一個(gè)實(shí)施例中，該根據(jù)功能需求在model層與controller層擴(kuò)展，使用React的語法編寫該功能需求得到對(duì)應(yīng)的源代碼，包括：

步驟402，根據(jù)功能需求在模型層model與控制層controller擴(kuò)展，使用用于構(gòu)建用戶界面的腳步庫React編寫定義該功能需求對(duì)應(yīng)的組件的初始化參數(shù)。

步驟404，定義外部修改該組件參數(shù)時(shí)所觸發(fā)的函數(shù)。

步驟406，定義該組件的值改變時(shí)的處理函數(shù)。

步驟408，定義該失去焦點(diǎn)時(shí)處理函數(shù)。

步驟410，定義聲明組件的函數(shù)。

通過定義組件的參數(shù)觸發(fā)函數(shù)、改變時(shí)處理函數(shù)、失去焦點(diǎn)時(shí)處理函數(shù)等，便于對(duì)組件實(shí)現(xiàn)數(shù)據(jù)處理。

在一個(gè)實(shí)施例中，該將該源代碼編譯成原生腳本，包括：采用bable工具編輯該源代碼生成原生腳本。

以一個(gè)數(shù)值輸入框組件的實(shí)現(xiàn)代碼進(jìn)行說明，具體代碼如下：

其他React組件實(shí)現(xiàn)方式類似上述實(shí)現(xiàn)數(shù)值輸入框組件。

在一個(gè)實(shí)施例中，上述組件構(gòu)建方法還包括：獲取包含組件標(biāo)識(shí)的組件更新指令，根據(jù)該組件更新指令對(duì)該組件標(biāo)識(shí)對(duì)應(yīng)的組件進(jìn)行更新。

組件標(biāo)識(shí)是用來唯一表示組件的字符串。

React組件更新，不是全局刷新，而是通過它內(nèi)部的dom(Document Object Model，文檔對(duì)象模型)diff算法計(jì)算出不同點(diǎn)，然后以最小粒度進(jìn)行更新，所以組件渲染效率和性能非常高。

圖5為一個(gè)實(shí)施例中組件調(diào)用方法的流程圖。如圖5所示，一種組件調(diào)用方法，包括步驟502～步驟510。其中：

步驟502，獲取業(yè)務(wù)需求。

本實(shí)施例中，業(yè)務(wù)需求是指網(wǎng)頁構(gòu)建所提供的服務(wù)需求。

步驟504，根據(jù)該業(yè)務(wù)需求調(diào)用對(duì)應(yīng)的用于構(gòu)建用戶界面的腳步庫React組件，該用于構(gòu)建用戶界面的腳步庫React組件為根據(jù)功能需求在模型層model與控制層controller擴(kuò)展，使用用于構(gòu)建用戶界面的腳步庫React編寫該功能需求得到對(duì)應(yīng)的源代碼，并將該源代碼編譯成原生腳本，以及對(duì)該原生腳本采用異步模塊加載機(jī)制AMD規(guī)范包裝得到的用于構(gòu)建用戶界面的腳步庫React組件。

該React組件包括按鈕組件、下拉組件、數(shù)值輸入框組件、滑動(dòng)條組件、氣泡提示組件和表格組件。

采用異步模塊加載機(jī)制AMD模塊加載器加載對(duì)應(yīng)的用于構(gòu)建用戶界面的腳步庫React組件即可展示在界面上。

步驟506，獲取對(duì)該用于構(gòu)建用戶界面的腳步庫React組件配置的參數(shù)。

本實(shí)施例中，對(duì)于不同的React組件可配置不同的參數(shù)。例如React組件為數(shù)值輸入框組件，配置的參數(shù)的數(shù)值為1。

步驟508，將該配置的參數(shù)傳遞給對(duì)應(yīng)的用于構(gòu)建用戶界面的腳步庫React組件，形成包含該參數(shù)的用于構(gòu)建用戶界面的腳步庫React組件。

例如，將參數(shù)的數(shù)值1傳遞給數(shù)值輸入框組件，然后顯示該數(shù)值輸入框的數(shù)值為1。

步驟510，展示包含該參數(shù)的該用于構(gòu)建用戶界面的腳步庫React組件。

上述組件調(diào)用方法，根據(jù)業(yè)務(wù)需求調(diào)用對(duì)應(yīng)的用于構(gòu)建用戶界面的腳步庫React組件，并獲取React組件配置的參數(shù)，將參數(shù)傳遞給用于構(gòu)建用戶界面的腳步庫React組件，形成包含該參數(shù)的用于構(gòu)建用戶界面的腳步庫React組件，并展示該React組件，調(diào)用方式簡單，不需要開發(fā)者專門學(xué)習(xí)React即可使用React組件，降低了開發(fā)者的學(xué)習(xí)門檻，同時(shí)組件提供的豐富功能能滿足開發(fā)組日常需求，提升了新產(chǎn)品售賣開發(fā)效率，縮短了產(chǎn)品上線周期。

圖6為調(diào)用組件形成頁面的示意圖。如圖6所示，開發(fā)是所能用到的組件包括按鈕組件、下拉組件、數(shù)值輸入框組件、滑動(dòng)條組件、氣泡提示組件和表格組件。頁面A調(diào)用滑動(dòng)條組件和下拉組件，頁面B調(diào)用按鈕組件、表格組件和數(shù)值輸入框組件。調(diào)用時(shí)采用AMD加載器加載組件到頁面A或頁面B。

原React組件調(diào)用方式是：

React.render(

<dropdown{…options}/>,

Document.body

)；

開發(fā)者需要使用babel等工具將自定義JSX語法編譯成原生的javascript語法。

而采用上述組件調(diào)用方法，組件的調(diào)用方式少了編譯的過程，直接使用AMD模塊加載器即可展示在界面如：

var dropdown＝require(‘dropdown’)；

Dropdown.create(options)。

為了更清楚的說明組件調(diào)用方法的實(shí)現(xiàn)，以組件調(diào)用方法應(yīng)用于云產(chǎn)品售賣頁為例進(jìn)行詳細(xì)描述。如圖7所示，自助接入頁獲取云業(yè)務(wù)開發(fā)者配置的云產(chǎn)品售賣頁的相關(guān)參數(shù)，并根據(jù)相關(guān)參數(shù)加載業(yè)務(wù)方的云產(chǎn)品售賣頁的邏輯代碼。云產(chǎn)品售賣頁是開發(fā)者在React框架的基礎(chǔ)上構(gòu)建的售賣邏輯，包括進(jìn)行詢價(jià)、下單、支付等。React框架擴(kuò)展了原生html的組件，異步數(shù)據(jù)請(qǐng)求組件，頁面性能監(jiān)控組件，云計(jì)費(fèi)接口等。云業(yè)務(wù)開發(fā)者根據(jù)云產(chǎn)品售賣頁的業(yè)務(wù)需求調(diào)用對(duì)應(yīng)的組件構(gòu)建云產(chǎn)品售賣頁；獲取用戶在組件上操作選擇云服務(wù)配置；通過組件提供的接口獲取用戶選擇的配置參數(shù)，并將配置參數(shù)提交給詢價(jià)組件，返回價(jià)格展示在云產(chǎn)品售賣頁的頁面上；獲取到用戶的購買操作，將參數(shù)提交給支付頁，支付頁將參數(shù)提交給云后臺(tái)生成訂單，生成訂單后跳轉(zhuǎn)至第三方支付平臺(tái)或銀行卡支付界面進(jìn)行支付完成購買。

圖8為一個(gè)實(shí)施例中組件構(gòu)建裝置的結(jié)構(gòu)框圖。如圖8所示，一種組件構(gòu)建裝置，包括功能需求獲取模塊802、編寫模塊804、生成模塊806和封裝模塊808。其中：

功能需求獲取模塊802用于獲取功能需求。

編寫模塊804用于根據(jù)功能需求在模型層model與控制層controller擴(kuò)展，使用用于構(gòu)建用戶界面的腳步庫React編寫該功能需求得到對(duì)應(yīng)的源代碼。

生成模塊806用于將該源代碼編譯成原生腳本。

封裝模塊808用于對(duì)該原生腳本采用異步模塊加載機(jī)制AMD規(guī)范包裝成用于構(gòu)建用戶界面的腳步庫React組件。

該用于構(gòu)建用戶界面的腳步庫React組件包括按鈕組件、下拉組件、數(shù)值輸入框組件、滑動(dòng)條組件、氣泡提示組件和表格組件。

上述組件構(gòu)建裝置，通過使用React的語法編寫功能需要對(duì)應(yīng)的源代碼，并將源代碼編譯成原生腳本，將原生腳本通過AMD規(guī)范包裝成React組件，被使用時(shí)，通過簡單的調(diào)用即可使用React組件，擴(kuò)大了使用范圍，且組件可復(fù)用性高，能夠被AMD、webpack模塊管理器加載，功能豐富，擴(kuò)展了原生html不具備的特性，且不需要開發(fā)者專門學(xué)習(xí)React即可使用React組件，降低了開發(fā)者的學(xué)習(xí)門檻，同時(shí)組件提供的豐富功能能滿足開發(fā)組日常需求，提升了新產(chǎn)品售賣開發(fā)效率，縮短了產(chǎn)品上線周期。

在一個(gè)實(shí)施例中，該編寫模塊804還用于根據(jù)功能需求在model層與controller層擴(kuò)展，使用React的語法編寫定義該功能需求對(duì)應(yīng)的組件的初始化參數(shù)，定義外部修改該組件參數(shù)時(shí)所觸發(fā)的函數(shù)，定義該組件的值改變時(shí)的處理函數(shù)，定義該失去焦點(diǎn)時(shí)處理函數(shù)，以及定義聲明組件的函數(shù)。

在一個(gè)實(shí)施例中，該生成模塊806還用于采用腳本編譯器(如bable)工具編輯該源代碼生成原生腳本。

圖9為一個(gè)實(shí)施例中組件調(diào)用裝置的結(jié)構(gòu)框圖。如圖9所示，一種組件調(diào)用裝置，包括業(yè)務(wù)需求獲取模塊902、調(diào)用模塊904、參數(shù)配置模塊906、傳遞模塊908和展示模塊910。其中：

業(yè)務(wù)需求獲取模塊902用于獲取業(yè)務(wù)需求。

調(diào)用模塊904用于根據(jù)該業(yè)務(wù)功能需求調(diào)用對(duì)應(yīng)的用于構(gòu)建用戶界面的腳步庫React組件，該用于構(gòu)建用戶界面的腳步庫React組件為根據(jù)功能需求在模型層model與控制層controller擴(kuò)展，使用用于構(gòu)建用戶界面的腳步庫React的語法編寫該功能需求得到對(duì)應(yīng)的源代碼，并將該源代碼編譯成原生腳本，以及對(duì)該原生腳本采用異步模塊加載機(jī)制AMD規(guī)范包裝得到的用于構(gòu)建用戶界面的腳步庫React組件。

參數(shù)配置模塊906用于獲取對(duì)該用于構(gòu)建用戶界面的腳步庫React組件配置的參數(shù)。

傳遞模塊908用于將該配置的參數(shù)傳遞給對(duì)應(yīng)的用于構(gòu)建用戶界面的腳步庫React組件，形成包含該參數(shù)的用于構(gòu)建用戶界面的腳步庫React組件。

展示模塊910用于展示包含該配置參數(shù)的該用于構(gòu)建用戶界面的腳步庫React組件。

上述組件調(diào)用裝置，根據(jù)業(yè)務(wù)需求調(diào)用對(duì)應(yīng)的React組件，并獲取React組件配置的參數(shù)，將參數(shù)傳遞給React組件，形成包含該參數(shù)的React組件，并展示該React組件，調(diào)用方式簡單，不需要開發(fā)者專門學(xué)習(xí)React即可使用React組件，降低了開發(fā)者的學(xué)習(xí)門檻，同時(shí)組件提供的豐富功能能滿足開發(fā)組日常需求，提升了新產(chǎn)品售賣開發(fā)效率，縮短了產(chǎn)品上線周期。

本領(lǐng)域普通技術(shù)人員可以理解實(shí)現(xiàn)上述實(shí)施例方法中的全部或部分流程，是可以通過計(jì)算機(jī)程序來指令相關(guān)的硬件來完成，所述的程序可存儲(chǔ)于一非易失性計(jì)算機(jī)可讀取存儲(chǔ)介質(zhì)中，該程序在執(zhí)行時(shí)，可包括如上述各方法的實(shí)施例的流程。其中，所述的存儲(chǔ)介質(zhì)可為磁碟、光盤、只讀存儲(chǔ)記憶體(Read-Only Memory，ROM)等。

以上所述實(shí)施例僅表達(dá)了本發(fā)明的幾種實(shí)施方式，其描述較為具體和詳細(xì)，但并不能因此而理解為對(duì)本發(fā)明專利范圍的限制。應(yīng)當(dāng)指出的是，對(duì)于本領(lǐng)域的普通技術(shù)人員來說，在不脫離本發(fā)明構(gòu)思的前提下，還可以做出若干變形和改進(jìn)，這些都屬于本發(fā)明的保護(hù)范圍。因此，本發(fā)明專利的保護(hù)范圍應(yīng)以所附權(quán)利要求為準(zhǔn)。