通過數據將DOM元素傳遞給jQuery對象的優點

除了個人偏好和假設兩者都可以工作（他們在我的示例中做了這些），是否有任何理由讓人們希望通過data()將DOM元素通過jQuery對象？通過數據將DOM元素傳遞給jQuery對象的優點

例如，使用下面兩個選項中的一個比另一個有什麼好處？

選項1

$(".action").click(function() { 
    $("#dialog").data('elem', this).dialog("open"); 
}); 

$("#dialog").dialog({ 
    autoOpen: false, 
    open: function() { 
    var elem = $(this).data('elem'); 
    var stuff = $(elem).parent().data('stuff'); 
    } 
});

選項2

$(".action").click(function() { 
    $("#dialog").data('elem', $(this).parent()).dialog("open"); 
}); 

$("#dialog").dialog({ 
    autoOpen: false, 
    open: function() { 
    var elem = $(this).data('elem'); 
    var stuff = elem.data('stuff'); 
    } 
});

來源

2016-01-08 user1032531

'data'只是將條目存儲在每個元素的命名條目查找表中，因此您可以在其中存儲任何內容。有一點需要記住的是引用被遺忘，所以也許簡單的原始DOM元素會更好？ –

@TrueBlueAussie我知道這不是什麼大不了的事情，但所有的事情都是平等的，想知道如果一個人比另一個人使用更多的內存/等等。 – user1032531

jQuery對象是DOM元素頂部的額外對象，但如果該對象隨時存在，則開銷僅僅是數據中的保留jQuery對象。很小但它是額外的。 –

技術上，存儲jQuery對象將會把略微更多的內存到可被垃圾收集的狀態下，但這個代表的開銷是真的很少。我更專注於確保代碼可維護。

從維護性的角度來看，我認爲這裏最大的問題是你有兩段代碼需要保持同步。如果您將密鑰的名稱（「elem」）更改爲一個，則需要在另一箇中更改。如果你改變了你所傳遞的信息，你還需要改變另一方的期望。盡你所能地保持這些期望的同步。爲了減少這些期望不同步的機會，可能需要更多的代碼（以及更多的開銷）。

我認識到這是一個簡單的例子，但是看看你發佈的代碼，在我看來，實現這兩個目標（性能和可維護性）的最好方法是減少信息的範圍通過在更進一步：

$(".action").click(function() { 
    $("#dialog").data('stuff', $(this).parent().data('stuff')).dialog("open"); 
}); 

$("#dialog").dialog({ 
    autoOpen: false, 
    open: function() { 
    var stuff = $(this).data('stuff'); 
    } 
});

通過移動.action的DOM結構的知識出#dialog - 相關代碼和成.action - 相關的代碼，你就更有可能能夠保持你的代碼正確的，如果你最終改變.action及其與附近元素的關係。（實際上，您可能會考慮將.parent()更改爲.parents('.whatever')，以便在HTML結構略有變化時不必更改任何內容。）這也具有僅將實際需要的「內容」存儲在內存中的便利副作用這個對話框存在。

來源

2016-01-08 17:55:07 StriplingWarrior

一個版本比另一個更容易維護嗎？似乎他們有相同的要求。或者，脫離主題，是否有更好的方法將信息傳遞給對話？我在發佈這個之前搜索了這個問題，我看到的只是使用'data（）'類似於我所做的。 – user1032531

@ user1032531：查看我的最新答案，提供一條建議。「最好的」方式將對您的意見和具體的使用方式有所瞭解。 – StriplingWarrior

感謝StriplingWarrior。順便說一下，我在列表中使用它，每個項目都有一個data-attribute指示項目主鍵，並且當打開對話框時，使用ajax來獲取使用該主鍵的記錄。 – user1032531

通過數據將DOM元素傳遞給jQuery對象的優點

回答

相關問題