jQuery的ATTR方法可以設置單擊處理程序和內部文本

閱讀jQueryUI的對話框代碼，我發現了，jQuery的.attr()方法有一些無證的行爲：jQuery的ATTR方法可以設置單擊處理程序和內部文本

<button id="btn1">1</button> 
<button id="btn2">2</button> 

$(function() { 
    var props = { 
     text: 'Click it!', 
     click: function() { 
      console.log('Clicked btn:', this); 
     } 
    }; 

    $('#btn1').attr(props, true); // Changes #btn1 inner text to 'Click it!' 
            // and adds click handler 
    $('#btn2').attr(props);   // Leaves #btn2 inner text as it is and fires 
            // click function on document ready 
});

你能解釋我是如何工作的？爲什麼要設置true作爲屬性值對的映射後的第二個參數？
我可以安全地在我的項目中使用此功能嗎？

來源

2012-10-18 ASergey

我建議使用'attr（）'創建點擊處理程序是JQuery中不支持的方法。使用框架可能有很多事情，但如果無證件不相信它們，它們可能會在未來的升級中崩潰。已經看到jQuery開發團隊在他們的支持論壇上表達了這個相同的理念 – charlietfl

原因是，我發佈這個問題是我無法理解，爲什麼點擊處理程序在應用之前被解僱。請觀看此[jquery.ui.dialog.js L371]（https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L371） – ASergey

我在這裏略微猜測，因爲我不熟悉jQuery源代碼。 jQuery.attr調用jQuery.access和jQuery.access功能上面的註釋寫着：

// Multifunctional method to get and set values of a collection 
// The value/s can optionally be executed if it's a function

經進一步調查，該text()功能還呼籲jQuery.access：

attr: function(name, value) { 
     return jQuery.access(this, jQuery.attr, name, value, arguments.length > 1); 
    }, 
    ......... 
    text: function(value) { 
     return jQuery.access(this, function(value) { 
     ...... 
    },

您正在使用ATTR設置文本和事件處理程序，這不是什麼attr的。然而，他們似乎都使用相同的功能來完成工作，所以使用無證參數只是偶然地給你預期的行爲。

我認爲依賴未記錄的行爲來完成你在這裏要做的事情是不可靠的，因爲任何未來的jQuery升級都可能會破壞你的代碼。

來源

2012-10-18 12:59:31 bcoughlan

也，如果你'要使用一個沒有記錄的功能，你應該至少記錄這個用法，這將比單純使用'click（）'和'text（）'方法需要更多的輸入 – yitwail

還值得一提的是，綁定事件是否像這將與動態添加的DOM元素一起工作，因此您可能會失去對新對象的綁定。使用.on（）更好地處理事件，而不是逐個對象地設置它，就像這樣。 –

望着的jQuery 1.8.2代碼中，true參數最終到達變量pass在這樣一行：

exec = pass === undefined && jQuery.isFunction(value);

這要是一套，告訴jQuery來檢查值屬於檢查鍵，如果它是一個函數，立即調用它。因此click: function(...)會調用該函數，而不是的寄存器那個函數。

這似乎是各種jQuery函數的.method(function() { ... }版本的工作方式，即那些不是爲某個屬性傳遞特定值，而是爲其傳遞一個本身傳遞了原始值並且其返回值分配給相關財產。

我可以安全地在我的項目中使用此功能嗎？

我不會，直到它被記錄爲止。

來源

2012-10-18 13:00:40 Alnitak

這是一個有趣的。我無法用這種方式假裝告訴你/爲什麼/它有效，我認爲甚至可能有理由將這個錯誤報告提交給jQuery，因爲他們記錄的行爲並沒有像我期望的那樣出現。

在此頁面，以下報價似乎朝着底部： http://api.jquery.com/attr/

「注：如果沒有在setter函數返回（即功能（索引，ATTR）{}），或者如果未定義返回，當前值不會改變，這對於只有在滿足某些條件時纔有選擇地設置值很有用。「

這讓我做一些對的jsfiddle玩耍。http://jsfiddle.net/mori57/GvLcE/

注意，相反，它們的文檔，案例8和9返回NULL或者沒有在看什麼參宿一提到，它似乎因爲他們的測試/實際/只是驗證它/是一個函數/而不是那個函數返回的結果（.isFunction只應該返回true/false，這與說返回的值是真/假不同）。然而，最後，我同意Alnitak和bcoughlan說，這不是你應該依賴的功能，儘管我會補充一點，除了它是不穩定的，因爲它在未來的jQuery版本中可能會改變，依賴於依賴於未記錄功能的黑客也是不好的做法，因爲今天編寫的代碼的未來開發人員包括你，在2-4個月！）可以很容易地忘記那裏，或爲什麼它是這樣設置的。最好是明確的，並使用記錄的功能，以便你清楚自己和其他人你的代碼打算做什麼。

來源

2012-10-18 13:19:09

jQuery的ATTR方法可以設置單擊處理程序和內部文本

回答

相關問題