否支持用戶的輸入操作；
[0069]若否，則退出；
[0070]步驟A2，監(jiān)控文件節(jié)點(diǎn)上是否存在關(guān)聯(lián)于用戶的新的輸入操作的輸入數(shù)值，并在存在有輸入數(shù)值時(shí)轉(zhuǎn)向步驟A3;
[0071 ]步驟A3，采用輸入數(shù)值對(duì)視圖數(shù)據(jù)進(jìn)行更新；
[0072]步驟A4，刷新網(wǎng)頁，并重新執(zhí)行步驟S4。
[0073]具體地，本發(fā)明的較佳的實(shí)施例中，將上述帶有預(yù)設(shè)標(biāo)簽的dom節(jié)點(diǎn)分為支持用戶的輸入操作的dom節(jié)點(diǎn)，以及不支持用戶的輸入操作的dom節(jié)點(diǎn)。更進(jìn)一步地，不支持用戶的輸入操作的dom節(jié)點(diǎn)中，其視圖數(shù)據(jù)是固定的預(yù)設(shè)值，因此只需要建立視圖數(shù)據(jù)和視圖模型的對(duì)應(yīng)關(guān)系即可。而支持用戶的輸入操作的dom節(jié)點(diǎn)中，其視圖數(shù)據(jù)為一個(gè)變量(例如上文中提到的username)，當(dāng)使用者輸入相應(yīng)數(shù)值時(shí)，則該變量會(huì)被輸入的數(shù)值替代，此時(shí)需要根據(jù)上述對(duì)應(yīng)關(guān)系更新視圖數(shù)據(jù)以及對(duì)應(yīng)的視圖模型。
[0074]例如，原本作為輸入框的dom節(jié)點(diǎn)，其視圖數(shù)據(jù)和視圖模型的對(duì)應(yīng)關(guān)系為Value=username。由于該dom節(jié)點(diǎn)支持使用者的輸入操作，則當(dāng)使用者輸入“XXX”時(shí)，username被XXX所替代，此時(shí)視圖數(shù)據(jù)和視圖模型的對(duì)應(yīng)關(guān)系應(yīng)該被更新為Value = XXX。因此上述步驟A3中，需要采用輸入數(shù)值對(duì)視圖數(shù)據(jù)進(jìn)行更新，從而保證上述對(duì)應(yīng)關(guān)系是正確的，隨后再刷新網(wǎng)頁，將根據(jù)上述的更新結(jié)果重新顯示。
[0075]本發(fā)明的較佳的實(shí)施例中，進(jìn)一步地，如圖3所示，執(zhí)行步驟A3之前，首先執(zhí)行下述判斷:
[0076]步驟A31，判斷輸入數(shù)值是否與對(duì)應(yīng)的視圖數(shù)據(jù)不同；
[0077]若是，則轉(zhuǎn)向步驟A3;
[0078]若否，則退出。
[0079]上述步驟即判斷輸入數(shù)值是否與本身的視圖數(shù)據(jù)相同的過程。例如，若當(dāng)前的視圖數(shù)據(jù)為XXX，輸入仍然為XXX，則此時(shí)不需要更新。
[0080]本發(fā)明的較佳的實(shí)施例中，如上文中所述，上述視圖數(shù)據(jù)和視圖模型的對(duì)應(yīng)關(guān)系可能對(duì)應(yīng)于多個(gè)dom節(jié)點(diǎn)，因此，在上述步驟中，需要通信根據(jù)該對(duì)應(yīng)關(guān)系同時(shí)更新多個(gè)dom節(jié)點(diǎn)的視圖數(shù)據(jù)，從而保證網(wǎng)頁顯示的一致性。
[0081]本發(fā)明的較佳的實(shí)施例中，上述視圖數(shù)據(jù)、視圖模型以及對(duì)應(yīng)關(guān)系均被保存在系統(tǒng)內(nèi)存中。
[0082]綜上所述，本發(fā)明技術(shù)方案中，首先在需要進(jìn)行視圖數(shù)據(jù)和視圖模型雙向綁定的dom節(jié)點(diǎn)上設(shè)置具有預(yù)設(shè)前綴的預(yù)設(shè)標(biāo)簽。隨后掃描得到具有上述預(yù)設(shè)標(biāo)簽的dom節(jié)點(diǎn)并進(jìn)行解析，得到關(guān)聯(lián)于不同的dom節(jié)點(diǎn)的視圖數(shù)據(jù)、視圖模型及其對(duì)應(yīng)關(guān)系并保存。隨后采用視圖渲染器，根據(jù)對(duì)應(yīng)關(guān)系，將視圖模型上的具體視圖數(shù)據(jù)進(jìn)行渲染，使其能夠顯示在網(wǎng)頁頁面上。
[0083]本發(fā)明的較佳的實(shí)施例中，上述方法適用于網(wǎng)頁開發(fā)的前端。
[0084]本發(fā)明的較佳的實(shí)施例中，基于上文中所述的網(wǎng)頁視圖交互處理方法，現(xiàn)提供一種網(wǎng)頁視圖交互處理系統(tǒng)，其結(jié)構(gòu)具體如圖4所示，包括:
[0085]掃描單元I，用于對(duì)html文件進(jìn)行掃描并得到html文件中帶有預(yù)設(shè)標(biāo)簽的文件節(jié)占.V，
[0086]解析單元2，連接掃描單元I，用于對(duì)所有掃描得到的文件節(jié)點(diǎn)進(jìn)行解析，以得到關(guān)聯(lián)于每個(gè)文件節(jié)點(diǎn)的視圖數(shù)據(jù)以及對(duì)應(yīng)的視圖模型；
[0087]關(guān)系建立單元3，連接解析單元2，用于建立關(guān)聯(lián)于每個(gè)文件節(jié)點(diǎn)的視圖數(shù)據(jù)與視圖模型之間的對(duì)應(yīng)關(guān)系；
[0088]存儲(chǔ)單元4，連接關(guān)系建立單元3，用于保存對(duì)應(yīng)關(guān)系；進(jìn)一步地，上述存儲(chǔ)單元可以為系統(tǒng)內(nèi)存。
[0089]渲染單元5，連接存儲(chǔ)單元4，用于應(yīng)用視圖渲染器，結(jié)合視圖數(shù)據(jù)和對(duì)應(yīng)的視圖模型進(jìn)行渲染，并將渲染結(jié)果顯示在網(wǎng)頁上供使用者查看。
[0090]本發(fā)明的較佳的實(shí)施例中，如上文中所述，關(guān)聯(lián)于每個(gè)文件節(jié)點(diǎn)的預(yù)設(shè)標(biāo)簽包括:[0091 ]關(guān)聯(lián)于每個(gè)文件節(jié)點(diǎn)的原生標(biāo)簽，以及
[0092]設(shè)置于每個(gè)原生標(biāo)簽之前的預(yù)設(shè)前綴。
[0093]本發(fā)明的較佳的實(shí)施例中，仍然如圖4所示，上述系統(tǒng)中還包括:
[0094]判斷單元6，連接掃描單元I，用于判斷掃描得到的文件節(jié)點(diǎn)是否支持用戶的輸入操作，并輸入判斷結(jié)果；
[0095]監(jiān)控單元7，連接判斷單元6，用于根據(jù)判斷結(jié)果，監(jiān)控文件節(jié)點(diǎn)上是否存在關(guān)聯(lián)于用戶的新的輸入操作的輸入數(shù)值，并輸出監(jiān)控結(jié)果；
[0096]更新單元8，分別連接監(jiān)控單元7和存儲(chǔ)單元4，用于根據(jù)監(jiān)控結(jié)果，采用輸入數(shù)值對(duì)存儲(chǔ)單元4中保存的視圖數(shù)據(jù)進(jìn)行更新；
[0097]刷新單元9，分別連接更新單元8和渲染單元5，用于在更新單元8完成更新后，控制渲染單元5刷新網(wǎng)頁，并重新應(yīng)用視圖渲染器，結(jié)合視圖數(shù)據(jù)和對(duì)應(yīng)的視圖模型進(jìn)行渲染，并將渲染結(jié)果顯示在網(wǎng)頁上供使用者查看。
[0098]進(jìn)一步地，本發(fā)明的較佳的實(shí)施例中，如圖5所示，上述更新單元8包括:
[0099]比對(duì)模塊81，用于比對(duì)輸入數(shù)值是否與對(duì)應(yīng)的視圖數(shù)據(jù)不同，并輸出比對(duì)結(jié)果；
[0100]更新模塊82，連接比對(duì)模塊81，用于根據(jù)比對(duì)結(jié)果，在輸入數(shù)值與視圖數(shù)據(jù)不同時(shí)，采用輸入數(shù)值對(duì)視圖數(shù)據(jù)進(jìn)行更新。
[0101]以上所述僅為本發(fā)明較佳的實(shí)施例，并非因此限制本發(fā)明的實(shí)施方式及保護(hù)范圍，對(duì)于本領(lǐng)域技術(shù)人員而言，應(yīng)當(dāng)能夠意識(shí)到凡運(yùn)用本發(fā)明說明書及圖示內(nèi)容所作出的等同替換和顯而易見的變化所得到的方案，均應(yīng)當(dāng)包含在本發(fā)明的保護(hù)范圍內(nèi)。
【主權(quán)項(xiàng)】
1.一種網(wǎng)頁視圖交互處理方法，其特征在于，包括: 步驟SI，對(duì)html文件進(jìn)行掃描并得到所述html文件中帶有預(yù)設(shè)標(biāo)簽的文件節(jié)點(diǎn)； 步驟S2，對(duì)所有掃描得到的所述文件節(jié)點(diǎn)進(jìn)行解析，以得到關(guān)聯(lián)于每個(gè)所述文件節(jié)點(diǎn)的視圖數(shù)據(jù)以及對(duì)應(yīng)的視圖模型； 步驟S3，建立并保存關(guān)聯(lián)于每個(gè)所述文件節(jié)點(diǎn)的所述視圖數(shù)據(jù)與所述視圖模型之間的對(duì)應(yīng)關(guān)系； 步驟S4，采用視圖渲染器，結(jié)合所述視圖數(shù)據(jù)和對(duì)應(yīng)的所述視圖模型進(jìn)行渲染，并將渲染結(jié)果顯示在網(wǎng)頁上供使用者查看。2.如權(quán)利要求1所述的網(wǎng)頁視圖交互處理方法，其特征在于，關(guān)聯(lián)于每個(gè)所述文件節(jié)點(diǎn)的所述預(yù)設(shè)標(biāo)簽包括: 關(guān)聯(lián)于每個(gè)所述文件節(jié)點(diǎn)的原生標(biāo)簽，以及 設(shè)置于每個(gè)所述原生標(biāo)簽之前的預(yù)設(shè)前綴。3.如權(quán)利要求1所述的網(wǎng)頁視圖交互處理方法，其特征在于，執(zhí)行所述步驟S3的同時(shí)，執(zhí)行下述步驟: 步驟Al，判斷所述文件節(jié)點(diǎn)是否支持用戶的輸入操作； 若否，則退出； 步驟A2，監(jiān)控所述文件節(jié)點(diǎn)上是否存在關(guān)聯(lián)于用戶的新的所述輸入操作的輸入數(shù)值，并在存在有所述輸入數(shù)值時(shí)轉(zhuǎn)向步驟A3; 步驟A3，采用所述輸入數(shù)值對(duì)所述視圖數(shù)據(jù)進(jìn)行更新； 步驟A4，刷新所述網(wǎng)頁，并重新執(zhí)行所述步驟S4。4.如權(quán)利要求3所述的網(wǎng)頁視圖交互處理方法，其特征在于，執(zhí)行所述步驟A3之前，首先執(zhí)行下述判斷: 步驟A31，判斷所述輸入數(shù)值是否與對(duì)應(yīng)的所述視圖數(shù)據(jù)不同； 若是，則轉(zhuǎn)向所述步驟A3; 若否，則退出。5.如權(quán)利要求1所述的網(wǎng)頁視圖交互處理方法，其特征在于，所述視圖數(shù)據(jù)、所述視圖模型以及所述對(duì)應(yīng)關(guān)系被保存在系統(tǒng)內(nèi)存中。6.—種網(wǎng)頁視圖交互處理系統(tǒng)，其特征在于，包括: 掃描單元，用于對(duì)html文件進(jìn)行掃描并得到所述html文件中帶有預(yù)設(shè)標(biāo)簽的文件節(jié)占.V， 解析單元，連接所述掃描單元，用于對(duì)所有掃描得到的所述文件節(jié)點(diǎn)進(jìn)行解析，以得到關(guān)聯(lián)于每個(gè)所述文件節(jié)點(diǎn)的視圖數(shù)據(jù)以及對(duì)應(yīng)的視圖模型； 關(guān)系建立單元，連接所述解析單元，用于建立關(guān)聯(lián)于每個(gè)所述文件節(jié)點(diǎn)的所述視圖數(shù)據(jù)與所述視圖模型之間的對(duì)應(yīng)關(guān)系； 存儲(chǔ)單元，連接所述關(guān)系建立單元，用于保存所述對(duì)應(yīng)關(guān)系； 渲染單元，連接所述存儲(chǔ)單元，用于應(yīng)用視圖渲染器，結(jié)合所述視圖數(shù)據(jù)和對(duì)應(yīng)的所述視圖模型進(jìn)行渲染，并將渲染結(jié)果顯示在網(wǎng)頁上供使用者查看。7.如權(quán)利要求6所述的網(wǎng)頁視圖交互處理系統(tǒng)，其特征在于，關(guān)聯(lián)于每個(gè)所述文件節(jié)點(diǎn)的所述預(yù)設(shè)標(biāo)簽包括: 關(guān)聯(lián)于每個(gè)所述文件節(jié)點(diǎn)的原生標(biāo)簽，以及 設(shè)置于每個(gè)所述原生標(biāo)簽之前的預(yù)設(shè)前綴。8.如權(quán)利要求6所述的網(wǎng)頁視圖交互處理系統(tǒng)，其特征在于，還包括: 判斷單元，連接所述掃描單元，用于判斷掃描得到的所述文件節(jié)點(diǎn)是否支持用戶的輸入操作，并輸入判斷結(jié)果； 監(jiān)控單元，連接判斷單元，用于根據(jù)所述判斷結(jié)果，監(jiān)控所述文件節(jié)點(diǎn)上是否存在關(guān)聯(lián)于用戶的新的所述輸入操作的輸入數(shù)值，并輸出監(jiān)控結(jié)果； 更新單元，分別連接所述監(jiān)控單元和所述存儲(chǔ)單元，用于根據(jù)所述監(jiān)控結(jié)果，采用所述輸入數(shù)值對(duì)所述存儲(chǔ)單元中保存的所述視圖數(shù)據(jù)進(jìn)行更新； 刷新單元，分別連接所述更新單元和所述渲染單元，用于在所述更新單元完成更新后，控制所述渲染單元刷新所述網(wǎng)頁，并重新應(yīng)用視圖渲染器，結(jié)合所述視圖數(shù)據(jù)和對(duì)應(yīng)的所述視圖模型進(jìn)行渲染，并將渲染結(jié)果顯示在網(wǎng)頁上供使用者查看。9.如權(quán)利要求8所述的網(wǎng)頁視圖交互處理系統(tǒng)，其特征在于，所述更新單元包括: 比對(duì)模塊，用于比對(duì)所述輸入數(shù)值是否與對(duì)應(yīng)的所述視圖數(shù)據(jù)不同，并輸出比對(duì)結(jié)果； 更新模塊，連接所述比對(duì)模塊，用于根據(jù)所述比對(duì)結(jié)果，在所述輸入數(shù)值與所述視圖數(shù)據(jù)不同時(shí)，采用所述輸入數(shù)值對(duì)所述視圖數(shù)據(jù)進(jìn)行更新。10.如權(quán)利要求6所述的網(wǎng)頁視圖交互處理系統(tǒng)，其特征在于，所述存儲(chǔ)單元為系統(tǒng)內(nèi)存。
【專利摘要】本發(fā)明公開了一種網(wǎng)頁視圖交互處理方法及系統(tǒng)，屬于網(wǎng)頁處理技術(shù)領(lǐng)域；方法包括：步驟S1，對(duì)html文件進(jìn)行掃描并得到html文件中帶有預(yù)設(shè)標(biāo)簽的文件節(jié)點(diǎn)；步驟S2，對(duì)所有掃描得到的文件節(jié)點(diǎn)進(jìn)行解析，以得到關(guān)聯(lián)于每個(gè)文件節(jié)點(diǎn)的視圖數(shù)據(jù)以及對(duì)應(yīng)的視圖模型；步驟S3，建立并保存關(guān)聯(lián)于每個(gè)文件節(jié)點(diǎn)的視圖數(shù)據(jù)與視圖模型之間的對(duì)應(yīng)關(guān)系；步驟S4，采用視圖渲染器，結(jié)合視圖數(shù)據(jù)和對(duì)應(yīng)的視圖模型進(jìn)行渲染，并將渲染結(jié)果顯示在網(wǎng)頁上供使用者查看。系統(tǒng)包括：掃描單元、解析單元、關(guān)系建立單元、存儲(chǔ)單元以及渲染單元。上述技術(shù)方案的有益效果是：降低網(wǎng)頁代碼維護(hù)的復(fù)雜程度，減少網(wǎng)頁相關(guān)工具中不必要的功能模塊，便于開發(fā)人員理解和掌握。
【IPC分類】G06F17/30
【公開號(hào)】CN105631011
【申請(qǐng)?zhí)枴緾N201511005078
【發(fā)明人】溫濤
【申請(qǐng)人】上海瀚之友信息技術(shù)服務(wù)有限公司
【公開日】2016年6月1日
【申請(qǐng)日】2015年12月28日