一種適用于手機(jī)的前端組件方法
【專利摘要】本發(fā)明提供一種適用于手機(jī)的前端組件方法，包括定義組件的資源文件夾，該文件夾里包含有組件的樣式信息、布局信息、主要的邏輯方法、資源文件；在配置文件中對(duì)需要的組件進(jìn)行注冊(cè)，根據(jù)配置信息和頁(yè)面中的標(biāo)簽來(lái)對(duì)組件進(jìn)行識(shí)別，并調(diào)用組件中的相關(guān)方法進(jìn)行標(biāo)簽渲染及添加；允許用戶自定義自己的組件，并加入到組件包中，且用戶的自定義組件既可以是用戶自己開(kāi)發(fā)的全新組件，也可以是通過(guò)將舊的組件進(jìn)行修改加工而得到；組件正常生成后通過(guò)對(duì)外提供接口與事件同外部資源進(jìn)行交互。隨著組件的增多，應(yīng)用項(xiàng)目的增加，組件的復(fù)用頻率也逐漸增加，當(dāng)在開(kāi)發(fā)中采用此技術(shù)后，開(kāi)發(fā)成本將逐漸降低，開(kāi)發(fā)效率也將逐步提高。
【專利說(shuō)明】一種適用于手機(jī)的前端組件方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及一種適用于手機(jī)的前端組件方法。
【背景技術(shù)】
[0002]在手機(jī)終端實(shí)現(xiàn)跨系統(tǒng)的應(yīng)用，最方便快捷的方法就是采用web app的方式進(jìn)行應(yīng)用軟件開(kāi)發(fā)。在web app的開(kāi)發(fā)中，我們往往需要用到很多各種各樣的HTML元素(復(fù)用代碼)。隨著手機(jī)應(yīng)用項(xiàng)目的增多，我們可以發(fā)現(xiàn)有許多相似的功能在多個(gè)手機(jī)項(xiàng)目中都有需求(例如許多的應(yīng)用軟件都需要用到通選框或復(fù)選框?qū)ο?，如果開(kāi)發(fā)者為每個(gè)項(xiàng)目都重復(fù)編寫(xiě)類似的代碼，那么既會(huì)造成重復(fù)的工作，增加開(kāi)發(fā)成本，也不利于后期的維護(hù)。為了解決以上問(wèn)題，本發(fā)明提出了一種適用于手機(jī)的前端組件方法，將手機(jī)前端的功能組件化，方便了用戶的重復(fù)利用與二次開(kāi)發(fā)，節(jié)省了開(kāi)發(fā)成本，提高了工作效率。

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

[0003]本發(fā)明要解決的技術(shù)問(wèn)題，在于提供一種適用于手機(jī)的前端組件方法，將各種常用到的元素(復(fù)用代碼)組成前端組件，以供開(kāi)發(fā)人員復(fù)用。開(kāi)發(fā)人員可以根據(jù)自己的需求，對(duì)當(dāng)前組件進(jìn)行修改，形成適用于本應(yīng)用領(lǐng)域的新的組件；也可以將組件進(jìn)行分類，按需要對(duì)組件進(jìn)行加載，從而避免一次性引用太多的元素。
[0004]本發(fā)明是這樣實(shí)現(xiàn)的:一種適用于手機(jī)的前端組件方法，包括如下步驟:
[0005]步驟10、加載基本頁(yè)面框架，并配置組件資源目錄，包括定義一個(gè)組件資源文件夾，文件夾內(nèi)包含組件的資源文件和組件的配置文件，且組件的資源文件按照同一個(gè)組件中的所有資源放置在同一個(gè)文件夾的原則進(jìn)行設(shè)置；
[0006]步驟20、選擇需要的組件，根據(jù)配置在組件文件中讀取相應(yīng)的頁(yè)面信息；
[0007]步驟30、利用底層解析庫(kù)提供的支持，根據(jù)配置信息和頁(yè)面中的標(biāo)簽來(lái)對(duì)組件進(jìn)行自動(dòng)解析，調(diào)用組件的初始化方法；
[0008]步驟40、用戶根據(jù)需求自定義自己的組件；
[0009]步驟50、調(diào)用組件對(duì)象的渲染方法，根據(jù)初始化完成的函數(shù)對(duì)頁(yè)面標(biāo)簽進(jìn)行渲染；
[0010]步驟60、當(dāng)組件內(nèi)還有未初始化的組件時(shí)，將自動(dòng)跳轉(zhuǎn)到步驟30，并通過(guò)組件內(nèi)的html布局文件實(shí)現(xiàn)組件之間的嵌套；
[0011]步驟70、組件正常生成后，開(kāi)發(fā)者通過(guò)調(diào)用相應(yīng)的接口對(duì)組件進(jìn)行操作或者捕捉組件的相應(yīng)事件并進(jìn)行處理。
[0012]進(jìn)一步的，所述步驟10中，配置文件對(duì)應(yīng)的資源目錄包括Style目錄，用于保存組件相關(guān)的資源目錄，用于保存組件的布局文件JS目錄，用于保存組件相關(guān)的邏輯。
[0013]進(jìn)一步的，所述步驟20中，讀取頁(yè)面信息時(shí)需先在頁(yè)面的標(biāo)簽中寫(xiě)入要使用的組件類型，判斷配置正確后將生成組件對(duì)象，并保存到頁(yè)面的對(duì)象緩存中。
[0014]進(jìn)一步的，所述步驟40用戶自定義組件步驟主要如下:[0015]步驟401、按照組件資源結(jié)構(gòu)目錄來(lái)編寫(xiě)或者修改需要的組件，并且在組件中提供讓頁(yè)面調(diào)用的渲染方法；
[0016]步驟402、根據(jù)實(shí)際的業(yè)務(wù)需要提供出相應(yīng)的調(diào)用接口和相應(yīng)的事件，并添加相應(yīng)的資源；
[0017]步驟403、將組件的名稱與目錄注冊(cè)到配置文件中以供使用。
[0018]進(jìn)一步的，所述步驟60中，在組件內(nèi)的html布局文件并非是必要的，但是當(dāng)有組件嵌套時(shí)，組件內(nèi)的渲染方法就調(diào)用html的布局文件來(lái)生成組件的布局；組件嵌套的時(shí)候，html的布局文件便將其他組件的標(biāo)簽寫(xiě)入到上級(jí)組件的布局文件中，以實(shí)現(xiàn)組件的嵌套；組件嵌套過(guò)程中，將首先渲染嵌套的組件內(nèi)容，然后將嵌套的內(nèi)容作為整體組件的一部分渲染到最終頁(yè)面上。
[0019]進(jìn)一步的，所述步驟50中，標(biāo)簽渲染的過(guò)程如下:
[0020]步驟501、加載組件對(duì)象的樣式文件及相關(guān)的資源；
[0021]步驟502、根據(jù)組件的配置信息，生成相應(yīng)的DOM對(duì)象；
[0022]步驟503、將生成的DOM對(duì)象添加到頁(yè)面上的相應(yīng)標(biāo)簽之上。
[0023]本發(fā)明具有如下有益效果:
[0024]1.手機(jī)前端常用界面功能的組件化，便于用戶的重復(fù)利用與二次開(kāi)發(fā)，節(jié)省開(kāi)發(fā)成本，提高工作效率。
[0025]2.隨著用戶使用的項(xiàng)目增多，使用的組件也將增多，用戶節(jié)省的成本越多，維護(hù)越方便。
[0026]3.在自定義時(shí)，用戶可以根據(jù)自己的業(yè)務(wù)需求，創(chuàng)建屬于自己的組件；也可以在自己的組件中引用其他原有的組件，實(shí)現(xiàn)功能的擴(kuò)展和增強(qiáng)。
[0027]4.由于規(guī)定了統(tǒng)一的組件接口，組件之間可以簡(jiǎn)單的互相調(diào)用，但是不能干涉到組件內(nèi)的子組件的執(zhí)行。
【專利附圖】

【附圖說(shuō)明】
[0028]下面參照附圖結(jié)合實(shí)施例對(duì)本發(fā)明作進(jìn)一步的說(shuō)明。
[0029]圖1為本發(fā)明的流程框圖。
[0030]圖2為本發(fā)明中組件目錄邏輯結(jié)構(gòu)示意圖。
【具體實(shí)施方式】
[0031]請(qǐng)參照?qǐng)D1所示，一種適用于手機(jī)的前端組件方法，包括如下步驟:
[0032]步驟10、加載基本頁(yè)面框架，并配置組件文件，包括定義一個(gè)組件資源文件夾，內(nèi)含組件的資源文件和組件的配置文件，且組件的資源文件按照同一個(gè)組件中的所有資源放置在同一文件夾的原則進(jìn)行設(shè)置。如圖2所示，在配置文件中，配置組件對(duì)應(yīng)的資源目錄包括Style目錄、Html目錄和JS目錄三個(gè)目錄。其中:Style目錄下保存組件相關(guān)的資源,包括頁(yè)面的樣式文件(CSS文件)和圖片資源等；Html目錄下保存組件的布局文件(html文件)；JS目錄下保存組件相關(guān)的邏輯。
[0033]步驟20、選擇需要使用到的組件，根據(jù)配置在組件文件中讀取相應(yīng)的頁(yè)面信息。當(dāng)用戶需要在頁(yè)面中使用組件時(shí)，先在頁(yè)面的標(biāo)簽中寫(xiě)入要使用的組件類型，在讀取頁(yè)面標(biāo)簽的時(shí)候，如果某個(gè)標(biāo)簽帶有組件屬性，將首先生成組件對(duì)象，并保存到頁(yè)面的對(duì)象緩存中。
[0034]步驟30、利用底層解析庫(kù)提供的支持，根據(jù)配置的信息和頁(yè)面中的標(biāo)簽來(lái)對(duì)組件進(jìn)行自動(dòng)解析，調(diào)用組件的初始化方法。
[0035]步驟40、用戶根據(jù)需求自定義自己的組件。如果組件的功能不足夠支持用戶的業(yè)務(wù)需求，用戶可以自定義自己的組件。用戶可以簡(jiǎn)單的將組件復(fù)制出來(lái)，修改一些組件細(xì)節(jié)，以適應(yīng)自己行業(yè)的需求，然后將組件重新封裝，作為一個(gè)新的組件歸并到組件庫(kù)中，以便于下次復(fù)用；用戶也可以完全從頭開(kāi)始開(kāi)發(fā)一個(gè)全新的組件，賦予自己需要的功能。自定義組件步驟主要如下:
[0036]步驟401、按照組件資源結(jié)構(gòu)目錄來(lái)編寫(xiě)或者修改需要的組件，并且在組件中提供讓頁(yè)面調(diào)用的渲染方法；
[0037]步驟402、根據(jù)實(shí)際的業(yè)務(wù)需要提供出相應(yīng)的調(diào)用接口和相應(yīng)的事件，并添加相應(yīng)的資源；
[0038]步驟403、將組件的名稱與目錄注冊(cè)到配置文件中以供使用。
[0039]步驟50、調(diào)用組件對(duì)象的渲染方法，根據(jù)初始化完成的函數(shù)對(duì)頁(yè)面標(biāo)簽進(jìn)行渲染，標(biāo)簽渲染的過(guò)程如下:
[0040]步驟501、加載組件對(duì)象的樣式文件及相關(guān)的資源；
[0041]步驟502、根據(jù)組件的配置信息，生成相應(yīng)的DOM對(duì)象；
[0042]步驟503、將生成的DOM對(duì)象添加到頁(yè)面上的相應(yīng)標(biāo)簽之上。
[0043]所述組件配置信息通過(guò)請(qǐng)求遠(yuǎn)程服務(wù)器的信息或者將所需要的配置數(shù)據(jù)作為對(duì)象直接傳輸?shù)浇M件之中得到。如果配置了組件的數(shù)據(jù)源信息，組件將自動(dòng)根據(jù)信息請(qǐng)求遠(yuǎn)程服務(wù)器資源，如果資源格式不符合組件的需要，或者遠(yuǎn)程服務(wù)器不能正常訪問(wèn)，那么組件將無(wú)法被正常渲染出來(lái)。
[0044]步驟60、當(dāng)組件內(nèi)還有未初始化的組件時(shí)，將自動(dòng)跳轉(zhuǎn)到步驟30，并通過(guò)組件內(nèi)的html布局文件實(shí)現(xiàn)組件之間的嵌套。
[0045]所述組件內(nèi)的html布局文件并非是必要的，但是在組件嵌套的時(shí)候，html布局文件通過(guò)將其他組件標(biāo)簽寫(xiě)入到上級(jí)組件的布局文件中，以實(shí)現(xiàn)組件的嵌套。在組件嵌套過(guò)程中，將首先渲染嵌套的組件內(nèi)容，然后將嵌套的內(nèi)容作為整體組件的一部分渲染到最終頁(yè)面上。
[0046]步驟70、組件正常生成后，開(kāi)發(fā)者通過(guò)調(diào)用相應(yīng)的接口對(duì)組件進(jìn)行操作或者捕捉組件的相應(yīng)事件并進(jìn)行處理。前端組件封裝了一系列常見(jiàn)的業(yè)務(wù)需求要用到的功能，比如數(shù)據(jù)列表、菜單等，在組件中也包含了元素結(jié)構(gòu)、樣式、組件內(nèi)的交互邏輯，為外部提供了相應(yīng)的組件接口和事件。
[0047]綜上所述，本發(fā)明具有以下優(yōu)點(diǎn):
[0048]1.將手機(jī)前端常用的界面功能組件化，方便了用戶的重復(fù)利用與二次開(kāi)發(fā)，節(jié)省了開(kāi)發(fā)成本，提高了工作效率。
[0049]2.隨著用戶使用的項(xiàng)目增多，使用的組件也將增多，用戶節(jié)省的成本越多，維護(hù)越方便。
[0050]3.開(kāi)發(fā)過(guò)程中，用戶可以根據(jù)自己的業(yè)務(wù)需求，創(chuàng)建屬于自己的組件；也可以在自己的組件中引用其他原有的組件，實(shí)現(xiàn)功能的擴(kuò)展和增強(qiáng)。
[0051]4.由于規(guī)定了統(tǒng)一的組件接口，組件之間可以進(jìn)行簡(jiǎn)單的相互調(diào)用，但又不會(huì)干涉到組件內(nèi)的子組件的執(zhí)行，為操作帶來(lái)了很多方便。
[0052]以上所述僅為本發(fā)明的【具體實(shí)施方式】，我們所描述的具體實(shí)施例也只是說(shuō)明性的，凡依本發(fā)明申請(qǐng)專利范圍所做的均等變化與修飾，皆應(yīng)屬本發(fā)明的涵蓋范圍。
【權(quán)利要求】
1.一種適用于手機(jī)的前端組件方法，其特征在于:包括如下步驟: 步驟10、加載基本頁(yè)面框架，并配置組件資源目錄，包括定義一個(gè)組件資源文件夾，文件夾內(nèi)包含組件的資源文件和組件的配置文件，且組件的資源文件按照同一個(gè)組件中的所有資源放置在同一個(gè)文件夾的原則進(jìn)行設(shè)置； 步驟20、選擇需要的組件，根據(jù)配置在組件文件中讀取相應(yīng)的頁(yè)面信息； 步驟30、利用底層解析庫(kù)提供的支持，根據(jù)配置信息和頁(yè)面中的標(biāo)簽來(lái)對(duì)組件進(jìn)行自動(dòng)解析，調(diào)用組件的初始化方法； 步驟40、用戶根據(jù)需求自定義自己的組件； 步驟50、調(diào)用組件對(duì)象的渲染方法，根據(jù)初始化完成的函數(shù)對(duì)頁(yè)面標(biāo)簽進(jìn)行渲染；步驟60、當(dāng)組件內(nèi)還有未初始化的組件時(shí)，將自動(dòng)跳轉(zhuǎn)到步驟30，并通過(guò)組件內(nèi)的html布局文件實(shí)現(xiàn)組件之間的嵌套； 步驟70、組件正常生成后，開(kāi)發(fā)者通過(guò)調(diào)用相應(yīng)的接口對(duì)組件進(jìn)行操作或者捕捉組件的相應(yīng)事件并進(jìn)行處理。
2.根據(jù)權(quán)利要求1所述的一種適用于手機(jī)的前端組件方法，其特征在于:所述步驟10中，配置文件對(duì)應(yīng)的資 源目錄包括: Style目錄，用于保存組件相關(guān)的資源； Html目錄，用于保存組件的布局文件； JS目錄，用于保存組件相關(guān)的邏輯。
3.根據(jù)權(quán)利要求1所述的一種適用于手機(jī)的前端組件方法，其特征在于:所述步驟20中，讀取頁(yè)面信息時(shí)需先在頁(yè)面的標(biāo)簽中寫(xiě)入要使用的組件類型，判斷配置正確后將生成組件對(duì)象，并保存到頁(yè)面的對(duì)象緩存中。
4.根據(jù)權(quán)利要求1所述的一種適用于手機(jī)的前端組件方法，其特征在于:所述步驟40用戶自定義組件步驟主要如下: 步驟401、按照組件資源結(jié)構(gòu)目錄來(lái)編寫(xiě)或者修改需要的組件，并且在組件中提供讓頁(yè)面調(diào)用的渲染方法； 步驟402、根據(jù)實(shí)際的業(yè)務(wù)需要提供出相應(yīng)的調(diào)用接口和相應(yīng)的事件，并添加相應(yīng)的資源； 步驟403、將組件的名稱與目錄注冊(cè)到配置文件中以供使用。
5.根據(jù)權(quán)利要求1所述的一種適用于手機(jī)的前端組件方法，其特征在于:所述步驟60中，在組件內(nèi)的html布局文件并非是必要的，但是當(dāng)有組件嵌套時(shí)，組件內(nèi)的渲染方法就調(diào)用html的布局文件來(lái)生成組件的布局；組件嵌套的時(shí)候，html的布局文件將其他組件的標(biāo)簽寫(xiě)入到上級(jí)組件的布局文件中，以實(shí)現(xiàn)組件的嵌套；組件嵌套過(guò)程中，將首先渲染嵌套的組件內(nèi)容，然后將嵌套的內(nèi)容作為整體組件的一部分渲染到最終頁(yè)面上。
6.根據(jù)權(quán)利要求1所述的一種適用于手機(jī)的前端組件方法，其特征在于:所述步驟50中，標(biāo)簽渲染的過(guò)程如下: 步驟501、加載組件對(duì)象的樣式文件及相關(guān)的資源； 步驟502、根據(jù)組件的配置信息，生成相應(yīng)的DOM對(duì)象； 步驟503、將生成的DOM對(duì)象添加到頁(yè)面上的相應(yīng)標(biāo)簽之上。
7.根據(jù)權(quán)利要求6所述的一種適用于手機(jī)的前端組件方法，其特征在于:所述組件配置信息是通過(guò)請(qǐng) 求遠(yuǎn)程服務(wù)器的信息，或者將所需要的配置數(shù)據(jù)作為對(duì)象直接傳輸?shù)浇M件之中得到。
【文檔編號(hào)】G06F9/445GK103955364SQ201410150277
【公開(kāi)日】2014年7月30日 申請(qǐng)日期:2014年4月15日 優(yōu)先權(quán)日:2014年4月15日
【發(fā)明者】蘇世源, 張展, 許華堂 申請(qǐng)人:南威軟件股份有限公司