Xem các thay đổi DOM, cách thanh lịch

Question

Tôi cần phải theo dõi sự thay đổi thuộc tính trên bất kỳ phần tử con nào của một phần tử DOM cụ thể. Cho đến nay, tôi đã sử dụng mutation events.

Vấn đề là - chúng là lỗi: ví dụ: dưới Chromium, DOMAttrModified không được kích hoạt nhưng DOMSubtreeModified là. Vấn đề rất dễ giải quyết: bởi vì theo đặc điểm kỹ thuật, DOMSubtreeModified bị sa thải nếu bất kỳ sự kiện nào khác bị sa thải, vì vậy tôi chỉ nghe DOMSubtreeModified.

Dù sao, Chromium, trong các phiên bản gần đây, đã ngừng kích hoạt bất kỳ điều gì nếu thuộc tính đã được sửa đổi.

Tuy nhiên, Mutation Observer API mới hoạt động hoàn hảo. Cho đến bây giờ, tôi chỉ cần gọi lại khi bất kỳ thay đổi nào của thành phần cụ thể - đơn giản vì không có gì khác thay đổi - vì vậy tôi đã giải quyết được vấn đề của mình bằng cách sử dụng sự kiện đột biến & trình theo dõi đột biến (nếu có)) trong cùng một đoạn mã. Tuy nhiên, bây giờ tôi cần phải lọc mạnh hơn các sự kiện (ví dụ trên nút mới, trên nút đã loại bỏ) - như vậy có một thư viện, có thể là một plugin jQuery, điều đó sẽ cho phép tôi sử dụng một cách thanh lịch cả hai trong số các API này - MutationObserver nếu các sự kiện có sẵn và đột biến là dự phòng, với khả năng lọc cho các loại sự kiện cụ thể (ví dụ: phần tử được thêm, thuộc tính đã thay đổi).

Ví dụ:

$("#test").watch({onNewElement: 1}, function(newElement){}) 
$("#test").watch({onNewAttribute: 1}, function(modifiedElement) {}) 

Hoặc không jQuery

watchChanges("#test", {onNewElement: 1}, function(newElement){}) 
watchChanges("#test", {onNewAttribute: 1}, function(modifiedElement){}) 

Answer 1

Sẽ làm việc này?

http://darcyclarke.me/development/detect-attribute-changes-with-jquery/

$.fn.watch = function(props, callback, timeout){ 
    if(!timeout) 
     timeout = 10; 
    return this.each(function(){ 
     var el  = $(this), 
      func = function(){ __check.call(this, el) }, 
      data = { props: props.split(","), 
         func: callback, 
         vals: [] }; 
     $.each(data.props, function(i) { data.vals[i] = el.css(data.props[i]); }); 
     el.data(data); 
     if (typeof (this.onpropertychange) == "object"){ 
      el.bind("propertychange", callback); 
     } else if ($.browser.mozilla){ 
      el.bind("DOMAttrModified", callback); 
     } else { 
      setInterval(func, timeout); 
     } 
    }); 
    function __check(el) { 
     var data = el.data(), 
      changed = false, 
      temp = ""; 
     for(var i=0;i < data.props.length; i++) { 
      temp = el.css(data.props[i]); 
      if(data.vals[i] != temp){ 
       data.vals[i] = temp; 
       changed = true; 
       break; 
      } 
     } 
     if(changed && data.func) { 
      data.func.call(el, data); 
     } 
    } 
} 

Answer 2

Đối với giám sát DOM hiệu quả với jQuery, bạn có thể có một cái nhìn tại jQuery Behavior Plugin (Disclaimer: Tôi là tác giả) trong đó sử dụng một phiên bản tối ưu hóa của Live Query. Tôi đang sử dụng nó trong một số sản phẩm trong 3 năm nay, mà không có bất kỳ vấn đề.

Edit: Nghe cho những thay đổi thuộc tính sẽ làm việc như thế này:

$.behavior({ 
    'div:first': { 
     'changeAttr': function (event, data) { 
      console.log('Attribute "' + data.attribute + '" changed from "' + data.from + '" to "' + data.to + '"'); 
     } 
    } 
}); 

$('div:first').attr('foo', 'bar');