2011-10-12 66 views
0

我有一個關於如何處理對jQuery對象的引用的問題。jQuery:在應用程序運行時保持對jQuery對象的引用

假設在我的應用程序中,我有一個ID爲some_widget的DOM元素DIV,它應該在所有應用程序運行時期間運行並且在代碼中經常使用。

1),所以如果我在應用程序運行時保持對它的引用在一個全局變量:

var someWidget = $("#some_widget") 

它會創建的jQuery對象一次,但會消耗應用程序運行時的內存,但是當我使用someWidget它不會再次創建jquery對象,所以這可以加速這個過程。 2)如果我總是在代碼中使用$(「#some_widget」)的調用,它不會不斷消耗內存,但每次使用$。它需要時間jQuery來構造對象。

我對不對?什麼方法更加充分? 可以保持對許多對象的引用最終與內存泄漏? 它取決於什麼,你怎麼看?

回答

2

是的,你可以通過在變量中聲明它來緩存你的jQuery對象。事實上,這被認爲是重用對象的最佳實踐。

2

我的理解(儘管我自己仍然是jQuery新手)是通過緩存jQuery對象進行保存是因爲每次調用選擇器時都不會遍歷DOM。因此,例如,如果您在代碼中多次調用$("#some_widget"),那麼jQuery將每次遍歷DOM以查找具有該ID的元素。如果你在變量中緩存一次,那麼你可以像調用選擇器一樣調用jQuery方法,但不需要DOM遍歷。我已經在代碼中實現了這一點,並且實現了性能改進。我沒有意識到使用緩存方法的內存泄漏問題,並且我對該主題的大部分閱讀建議將緩存作爲最佳實踐。

另一方面,如果你這樣做會有幫助的是增加一個命名約定來緩存這種類型的變量。例如,前面加上一個$給變量:

var $someWidget = $("#some_widget"); 

有些人不喜歡,但我認爲它是有用的時候視覺跟蹤哪些變量我可以使用jQuery的功能。

+0

我是其中之一;額外的$使我很清楚,我正在處理緩存的jQuery對象。我一直使用它來使$這個變量(從$(this))。 –

1

是的,你是對的。唯一我想補充的是 var query_result = $("some_selector")實際上是將您的查詢結果緩存到變量中供以後使用。如果查詢的結果恰好是一個小部件,那麼它將被緩存。顯而易見的好處是,當你使用這個緩存查詢時,jQuery不必再次查詢DOM來爲你創建結果。但缺點是,緩存的結果就像查詢執行時的DOM快照。因此,如果在後期dom被操縱,執行$("previous_selector")將返回與緩存query_result不同的東西,這可能不是您所期望的。

不完全確定內存泄漏,已經看到很多程序員使用這種緩存技術,並且也被推薦。

+0

感謝您的重播。但是,你是什麼意思「如果在稍後階段dom被操縱,執行$(」previous_selector「)將返回不同的東西」,如果它的一個小部件可以返回什麼不同?例? – WHITECOLOR

+0

你只是從小部件的角度來考慮它。 例如可以說你的DOM是這樣的頁面加載: '

  • Item 1
  • Item 2
'。現在你緩存了所有的列表項'var li_list = $(「。foo li」)'。現在你有2個「li」緩存在'li_list'中。 後來你操縱你DOM和它成爲這樣的: '
  • 項目1
  • 項目2
  • 項目3
  • ',如果你要再次運行查詢「VAR new_list = $(「.foo li」)'變量'new_list'將會有3個元素,其中原來的'li_list'只有2個元素。 我希望這可以解釋它。 – websymphony

    +0

    是的,如果「小部件」是一個jq對象的數組,它不會被動態更新。但是,如果只獲取DOM元素作爲窗口小部件(就像在我的示例DIV中)那樣,您可能不會找到此對象的這種操作,從而導致您所描述的內容出現問題,不是嗎? – WHITECOLOR

    相關問題