jquery mobile 動態(tài)生成多個頁面的元素怎么刷新

jquery 你寫方法動態(tài)刷新頁面是沒有問題。 只不過 jquery mobile 支持單頁模式。 我很懷疑 你在page容器中 將data-dom-cache 設(shè)置成了true。 這樣的效果是

為鄂爾多斯等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及鄂爾多斯網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為做網(wǎng)站、成都網(wǎng)站建設(shè)、鄂爾多斯網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

1 你已經(jīng)打開過的頁面不再走后臺 （不浪費客戶流量）

2 如果你的jquery選擇器 使用不當 你只是在給第一個頁面刷新元素。（舉例: 你選擇了一個列表中的第一條信息。 打開一個詳細頁面。 進行了js操作后或者沒進行js操作 再返回列表頁點擊第二條信息 再打開一個詳細頁面時 你發(fā)現(xiàn)你的js方法“失靈了” 實際上因為選擇器指定的不對 js在給你更新第一個詳細頁面。 單頁模式會將你打開過的頁面全部累加起來 選擇器 選取不正確 是無法更新后面打開的頁面的。 必須正確指定自己想要刷新的頁面。）

我懷疑你是第二種情況

單頁應(yīng)用什么框架好

所謂單頁應(yīng)用，指的是在一個頁面上集成多種功能，甚至整個系統(tǒng)就只有一個頁面，所有的業(yè)務(wù)功能都是它的子模塊，通過特定的方式掛接到主界面上。它是AJAX技術(shù)的進一步升華，把AJAX的無刷新機制發(fā)揮到極致，因此能造就與桌面程序媲美的流暢用戶體驗。

開發(fā)框架

ExtJS可以稱為第一代單頁應(yīng)用框架的典型，它封裝了各種UI組件，用戶主要使用JavaScript來完成整個前端部分，甚至包括布局。隨著功能逐漸增加，ExtJS的體積也逐漸增大，即使用于內(nèi)部系統(tǒng)的開發(fā)，有時候也顯得笨重了，更不用說開發(fā)以上這類運行在互聯(lián)網(wǎng)上的系統(tǒng)。

jQuery由于偏重DOM操作，它的插件體系又比較松散，所以比ExtJS這個體系更適合開發(fā)在公網(wǎng)運行的單頁系統(tǒng)，整個解決方案會相對比較輕量、靈活。

但由于jQuery主要面向上層操作，它對代碼的組織是缺乏約束的。如何在代碼急劇膨脹的情況下控制每個模塊的內(nèi)聚性，并且適當在模塊之間產(chǎn)生數(shù)據(jù)傳遞與共享，就成為了一種有挑戰(zhàn)的事情。

為了解決單頁應(yīng)用規(guī)模增大時候的代碼邏輯問題，出現(xiàn)了不少MV*框架，他們的基本思路都是在JS層創(chuàng)建模塊分層和通信機制。有的是MVC，有的是MVP，有的是MVVM，而且，它們幾乎都在這些模式上產(chǎn)生了變異，以適應(yīng)前端開發(fā)的特點。

這類框架包括Backbone，Knockout，AngularJS，Avalon等。

jquery怎么做單頁面應(yīng)

具體描述一下，或是頁面邏輯處理比較多可以嘗試使用jsp來寫頁面。html沒法使用java代碼

jQuery和AngularJS的區(qū)別淺析

1.不要首先設(shè)計好你的頁面，然后再通過DOM操作去修改它

在jQuery中，你首先設(shè)計了一個page，然后再去動態(tài)修改它的內(nèi)容，這是因為jQuery被設(shè)計用來進行擴展并在這個前提下大幅度地增加和修改內(nèi)容，但是在angularjs中，你必須在心中先設(shè)計好你的架構(gòu)，

從一開始，你就要摒棄“我擁有一個DOM元素并且想讓它去做某件事”，代之為“我需要完成什么任務(wù)，然后接著設(shè)計你的應(yīng)用，最后再去設(shè)計你的視圖view層”。

2.不要使用angularjs去擴展jQuery

相應(yīng)地，不要存在說讓jQuery去干某些事情，然后在此基礎(chǔ)上添加angularjs的功能讓它去管理model以及controller的想法。所以我一般不推薦AngularJS開發(fā)新手同時使用jQuery，至少在他們還沒有適應(yīng)AngularJS的開發(fā)模式之前不會去推薦這樣做，但是當你真正開始適應(yīng)angularjs 的方式之后，你會發(fā)覺這是一件很誘人的事情。

我曾經(jīng)看到過很多開發(fā)者采用將150到200行代碼的jQuery插件利用angularjs的回調(diào)以及$apply方法封裝起來，這種方式使得代碼看起來極其復雜，但是實際上他們讓這些插件跑起來了！問題在于，在大部分情況下jQuery插件能夠用angularjs進行重寫，并且可能只會使用很少量的代碼，同時這種重寫使得代碼很直觀且易于理解，這顯然好過于將jQuery代碼直接做封裝。

所以最后說，當你遇見問題的時候，首先要以angularjs的思維進行思考，如果找不到解決方案，可以求助于社區(qū)，如果說沒有人能夠給出一個簡單的方案，那么才考慮使用jQuery，不要讓jQuery成為你的拐杖，否則你永遠掌握不了AngularJS。

3.要以架構(gòu)為中心進行思考

首先你要知道單頁應(yīng)用屬于web應(yīng)用，它們不是傳統(tǒng)的多網(wǎng)頁網(wǎng)站，所以我們要同時作為一個服務(wù)端和客戶端開發(fā)者的思維進行思考，我們需要思考如何將我們的應(yīng)用分為獨立的，可擴展的以及可測試的部分。

數(shù)據(jù)綁定

這是到目前為止AngularJS最令人矚目的特性了，在數(shù)據(jù)綁定方面它舍棄了對DOM的操作方式，而這一切都是由AngularJS來自動更新視圖，你不必寫操作dom的代碼，在jQuery中，我們常常按照響應(yīng)事件并修改視圖

區(qū)別model層

在jQuery中，DOM類似于一種model，但是在AngularJS中，我們擁有不同于jQuery中的model層以便我們可以以任何我們想要的方式去管理它，它是完全獨立于視圖之外的。這種方式是有助于我們進行數(shù)據(jù)綁定并且可以保持對分離的關(guān)注，而且可以具備更好的可測試性。

關(guān)注點分離

以上所講都和這個總體的話題相關(guān)：讓你關(guān)注分離，你的視圖層顯示記錄，你的model層代表數(shù)據(jù)，你還有個服務(wù)層用來執(zhí)行這些可復用的任務(wù)。你使用directive來執(zhí)行dom操作并擴展你的視圖，并將它和controller連接起來，這也就是我在其他方面提到的有關(guān)于增強可測試性的原因。

依賴注入

幫助我們解決關(guān)注點分離的是依賴注入（DI），如果你是一個服務(wù)端開發(fā)者（Java或者PHP），你可能已經(jīng)很熟悉這個概念了，但是如果你是從事客戶端開發(fā)的，你會覺得這個概念可能有些多余和純屬追求時髦，但是實際上不是這樣。

從廣義的角度講，DI意味著你可以自由地聲明組件然后從這些組件中進行實例化，這是理所當然的。你不必知道加載順序，文件位置等諸如此類的事情，這種魔力不是能夠立即看到，但是我會給出一個例子：測試。

我們說在應(yīng)用中，我們需要一個依賴于應(yīng)用狀態(tài)和本地存儲的服務(wù)用來通過一個rest API來執(zhí)行服務(wù)端存儲，當我們測試我們的controller時，我們不必和服務(wù)端進行通信，畢竟只是在測試controller而已。我們僅添加一個與我們最初組件相同的mock服務(wù)，注入器能夠確保我們的controller獲得一個虛擬的服務(wù)，controller自身不必也不需要了解這種差異。

4.以測試驅(qū)動的開發(fā)

這部分是一個架構(gòu)的第三部分，但是他是很重要的，以至于我需要將它放在最重要的位置。

在我們所有見過的，用過的以及寫過的jQuery插件中，有多少具有一套測試組件呢？其實并不多，這是因為jQuery在測試上不易控制，但是AngularJS卻與此不同。

在jQuery中，測試的唯一方法是使用一個demo頁去創(chuàng)建一個獨立組件來使得我們的測試可以執(zhí)行dom操作。我們接下來我們必須開發(fā)一個獨立的組件然后將它集成到我們的應(yīng)用中來，這是多不方便啊！在很多情況下，當我們使用jQuery開發(fā)實際上是做了很多重復開發(fā)而不是以測試驅(qū)動的開發(fā)，這又能怪我們嗎？

但是在AngularJS中我們可以關(guān)注分離點，所以我們可以做一些測試驅(qū)動的開發(fā)。

5.從概念上講，指令不是打包的jQuery

你常常聽說，dom操作只能在指令中，這是必須的，你必須嚴肅對待。

讓我們深入討論，

某些指令僅僅是裝飾我們的視圖（例如ngClass），因此有時候直接操作dom是可以的，但是當一個指令類似于一個小物件并且擁有自己的模板，那么它應(yīng)該當做一個分離的關(guān)注點，這就是說，它的模板需要和link中的執(zhí)行邏輯以及其他controller函數(shù)分離開。

AngularJS擁有一整套的工具可以是這種分離更簡單，使用ngClass指令，我們可以動態(tài)地更新class,使用ngBind我們可以進行雙向數(shù)據(jù)綁定，使用ngShow和ngHide 我們

可以采用編程的形式顯示和隱藏一個元素，也包括我們自己寫的很多指令。換句話說，我們可以不用Dom操作而完成所有工作，dom操作越少，指令越容易測試，越容易指定他們的style屬性，就越容易在將來改變他們，那么他們就越容易復用和分發(fā)。

我看過很多AngularJS新手使用指令封裝一大串 jQuery代碼，換句話說，既然我不能在controller里面進行dom操作，那么我可以將他放在指令中，雖然這相對于直接操作dom好很多，但是任然是錯誤的。

看看我們在上面的記錄，即使我們將其放在一個指令中，我們?nèi)稳恍枰訟ngular的方式去操作它，這種方式不執(zhí)行dom操作！在很多時候dom操作是需要的，但是這種情況比你想的要少得多。當我們需要做dom操作的時候先問問自己這里是否必須這樣做，這才是一種更好的方式。

總結(jié)

不要總使用jquery ,甚至不要去引用它，它會阻止你前進，當我們回到這個問題—你知道你怎么在AngularJS中以jquery方式解決問題，但是當你使用諸如$等選擇器時，你要想想它們實際上是禁錮了AngularJS，如果你不知道怎么不用jQuery實現(xiàn)，那么去請教別人，一次一次去問，最好的方式是不需要使用jQuery，使用jQuery只會導致你的工作量提升。

網(wǎng)站欄目：jquery單頁,jquery單頁面框架
網(wǎng)頁URL：http://chinadenli.net/article26/dsgjdcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導航、做網(wǎng)站、用戶體驗、網(wǎng)站制作、動態(tài)網(wǎng)站、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)