Lắng nghe các thay đổi DOM bằng API Web Javascript, Trình quan sát đột biến (gợi ý: Đó là cách thực hành tốt nhất)

M mutObserver Máy tính là một API Web được cung cấp bởi các trình duyệt hiện đại để phát hiện các thay đổi trong DOM. Bằng cách sử dụng API này, bạn có thể lắng nghe các thay đổi trong DOM, như các nút được thêm hoặc xóa, thay đổi thuộc tính hoặc thay đổi trong nội dung văn bản của các nút văn bản và thực hiện thay đổi.

Các ứng dụng web đang trở nên phức tạp về phía khách hàng ngày nay. Bạn phải làm rất nhiều bằng cách lắng nghe những thay đổi của DOM. Ví dụ: bạn muốn gửi thông báo theo thời gian thực cho người dùng từ thay đổi DOM hoặc bạn đang sử dụng khung công tác JS có hành vi khác nhau cho một loại thay đổi khác hoặc bạn phải thực hiện một điều dựa trên giá trị trả về của plugin JS .

Bỏ phiếu bầu chọn với API setInterval là một trong số ít lựa chọn thay thế của Trình quan sát đột biến. Hãy để chúng tôi xem xét nó để hiểu rõ hơn về những gì mà M đột biến quan sát được.

index.html

tháng.js

addMonth là một hàm đơn giản mà từ đó trả về một tên ngẫu nhiên của một tháng hoặc số từ mảng nameOfMonth sau 2 giây.

Hãy để thêm một chức năng bỏ phiếu sau nó.

Để in Thay đổi DOM, CheckMonth cần kiểm tra từng giây nếu có bất cứ điều gì thay đổi trong DOM và sau khi kiểm tra, nó sẽ in ra từ bên ngoàiHTML. Sau khi nhận được sự thay đổi, nó xóa Interval. setInterval WebAPI có thể thiết lập một tác vụ sẽ kiểm tra định kỳ nếu có bất kỳ thay đổi nào xảy ra. Đương nhiên, phương pháp này làm giảm đáng kể hiệu suất của ứng dụng / trang web.

Triển khai M mutObserver:

Việc triển khai M mutObserver vào ứng dụng khá dễ dàng. Bạn cần tạo một cá thể MutingObserver bằng cách chuyển cho nó một hàm sẽ được gọi mỗi khi xảy ra đột biến. Và những gì là tốt nhất, nó biểu diễn tuyệt vời. Hầu như tất cả các trình duyệt mới nhất đều hỗ trợ nó. Hãy để nhảy vào mã, làm thế nào mã trước đó có thể được thực hiện bằng cách triển khai M mutObserver.

Thay vì thêm chức năng Bỏ phiếu, chúng ta có thể sử dụng MutingObserver sau hàm addMonth.

Những gì chúng tôi đã làm ở đây, chúng tôi đã kiểm tra xem có bất kỳ nút nào đã được thêm vào trong DOM bởi m mut.addedNodes.length. Nếu nó trả về true, chúng tôi sẽ ghi lại Node được thêm vào.

Đối tượng được tạo có ba phương thức:

  • quan sát - bắt đầu lắng nghe những thay đổi. Có hai đối số - nút DOM bạn muốn quan sát và một đối tượng cài đặt
  • ngắt kết nối - dừng lắng nghe thay đổi
  • TakeRecords - trả về đợt thay đổi cuối cùng trước khi cuộc gọi lại được thực hiện.

Đoạn mã sau đây cho thấy cách bắt đầu quan sát:

Mã đầy đủ:

Ngoài việc chỉ thêm addchildList, nó còn có thể lắng nghe để loại bỏ childList và nhiều thứ khác, như các thuộc tính, cây con, v.v. Kiểm tra khối mã bên dưới.

Đây là tất cả aboutMutingObserver` Nó cung cấp một số lợi thế so với Bỏ phiếu hoặc các giải pháp khác. Nó cách tối ưu hóa hơn khi nó thực hiện các thay đổi theo đợt. Trên hết, M mutObserver được hỗ trợ bởi tất cả các trình duyệt hiện đại chính, cùng với một vài polyfill sử dụng M mutEvents dưới mui xe. API MutingObserver mạnh mẽ, nhiều thông tin và cuối cùng là hack miễn phí.

Tìm hiểu chi tiết về JavaScript không đồng bộ (gọi lại, hứa, tạo và chờ không đồng bộ)

Tìm hiểu về móc React JS từ bài viết dưới đây.

Đó là tất cả cho ngày hôm nay :)