Cách sử dụng API MutingObserver cho các thay đổi nút Node

Đây là một kịch bản: Rita, một nhà văn tạp chí đang chỉnh sửa một bài báo của cô ấy trực tuyến. Cô ấy lưu các thay đổi của mình và xem tin nhắn “thay đổi được lưu!” Ngay sau đó, cô nhận thấy một lỗi đánh máy mà cô đã bỏ lỡ. Cô sửa nó và chuẩn bị bấm “tiết kiệm”, khi cô ấy nhận được một cuộc điện thoại giận dữ từ ông chủ của mình.

Sau khi cuộc gọi kết thúc, cô quay lại màn hình, thấy “thay đổi được lưu!” tắt máy tính của cô ấy và bão ra khỏi văn phòng.

Ngoài sự thiếu hiểu biết của tôi đối với việc kể chuyện, chúng tôi nhận thấy từ kịch bản ngắn đó, rắc rối mà thông điệp dai dẳng đó gây ra. Vì vậy, trong tương lai, chúng tôi quyết định tránh nó khi có thể và sử dụng một trong đó nhắc nhở người dùng xác nhận bằng cách nhấp vào nó - hoặc tự biến mất. Sử dụng cái thứ hai cho một tin nhắn nhanh là một ý tưởng tốt.

Chúng tôi đã biết cách làm cho một phần tử biến mất khỏi một trang, vì vậy đó không phải là vấn đề. Những gì chúng ta cần biết là nó xuất hiện khi nào? Vì vậy, chúng ta có thể làm cho nó biến mất sau một thời gian hợp lý.

API đột biến

Nhìn chung, khi một phần tử DOM (như một tin nhắn div) hoặc bất kỳ thay đổi nút nào khác, chúng ta sẽ có thể biết nó. Trong một thời gian dài, các nhà phát triển đã phải dựa vào các bản hack và khung do thiếu API gốc. Nhưng điều đó đã thay đổi.

Chúng tôi hiện có Máy chủ đột biến (sự kiện đột biến trước đây). Máy chủ đột biến là một đối tượng gốc JavaScript với một tập các thuộc tính và phương thức. Nó cho phép chúng tôi quan sát sự thay đổi trên bất kỳ nút nào như Phần tử DOM, Tài liệu, Văn bản, v.v ... Bằng cách đột biến, ý chúng tôi là việc thêm hoặc xóa nút và thay đổi thuộc tính & dữ liệu của nút.

Hãy xem một ví dụ để hiểu rõ hơn. Trước tiên chúng ta sẽ thiết lập một thông báo xuất hiện khi nhấp vào nút, giống như thông báo mà Rita đã thấy. Sau đó tốt tạo và liên kết một người quan sát đột biến với hộp thông báo đó và mã logic để tự động ẩn tin nhắn. Hiểu?

chú thích: Bạn có thể đến một lúc nào đó hoặc đã hỏi tôi trong đầu “Tại sao không ẩn tin nhắn từ bên trong nút bấm vào sự kiện trong JavaScript?” Trong ví dụ của tôi, tôi không làm việc với máy chủ, vì vậy tất nhiên khách hàng có trách nhiệm hiển thị thông báo và có thể ẩn nó quá dễ dàng. Nhưng giống như trong công cụ chỉnh sửa của Rita nếu máy chủ là người quyết định thay đổi nội dung DOM, khách hàng chỉ có thể cảnh giác và chờ đợi.

Đầu tiên, chúng tôi tạo thiết lập để hiển thị thông báo trên nút bấm.

 Tin chương trình

var dir = document.querySelector ('# dir'), SUCCESSMSG = "Thay đổi đã lưu!"; / * Thêm nút bấm sự kiện * / document .querySelector ('button') .addEventListener ('click', showMsg); hàm showMsg () dir.textContent = SUCCESSMSG; thuyết minh.style.background = 'teal';  

Khi chúng tôi đã thiết lập ban đầu đang chạy, hãy làm như sau;

• Tạo một Máy chủ đột biến đối tượng có chức năng gọi lại do người dùng định nghĩa (chức năng được xác định sau trong bài). Hàm sẽ thực thi trên mọi đột biến được quan sát bởi Máy chủ đột biến.
• Tạo một đối tượng cấu hình để xác định loại đột biến được quan sát bởi Máy chủ đột biến.
• Ràng buộc Máy chủ đột biến đến mục tiêu, đó là 'thông điệp' div trong ví dụ của chúng tôi.

(function startObservation () var / * 1) Tạo một đối tượng MutingObserver * / observer = new MutingObserver (function (mutations) m mutObserverCallback (mutations);), / * 2) Tạo một đối tượng cấu hình * / config = childList: thật; / * 3) Keo dán tất cả * / observer.observe (tin nhắn, cấu hình); ) (); 

Dưới đây là danh sách các thuộc tính cho cấu hình đối tượng xác định các loại đột biến khác nhau. Vì trong ví dụ của chúng tôi, chúng tôi chỉ xử lý một nút văn bản con được tạo cho văn bản thông báo, chúng tôi đã sử dụng danh sách con bất động sản.

Các loại đột biến quan sát được

Bây giờ, với chức năng gọi lại được thực thi trên mọi đột biến quan sát được.

chức năng m mutObserverCallback (đột biến) / * Lấy đột biến đầu tiên * / var m mutRecord = mutations [0]; .  hàm hideMsg () dir.textContent = "; dir.style.background = 'none'; 

Vì chúng tôi chỉ thêm một tin nhắn vào div, chúng ta sẽ lấy đột biến đầu tiên được quan sát trên nó và kiểm tra xem một nút văn bản đã được chèn chưa. Nếu chúng tôi có nhiều hơn một thay đổi xảy ra, chúng tôi chỉ có thể lặp qua đột biến mảng.

Mọi đột biến trong đột biến mảng được đại diện bởi đối tượng Đột biến với các tính chất sau.

Thuộc tính của Đột biến

Và đó là nó. chúng ta chỉ cần đặt mã cùng nhau cho bước cuối cùng.

Hỗ trợ trình duyệt

Tài liệu tham khảo

• “Người quan sát đột biến W3C DOM4.” W3C. Web. Ngày 19 tháng 6 năm 2015
• “Máy chủ đột biến.” Mạng lưới nhà phát triển Mozilla. Web. Ngày 19 tháng 6 năm 2015.