摘要：觀察者模式介紹觀察者設(shè)計(jì)模式定義了對(duì)象間的一種一對(duì)多的依賴(lài)關(guān)系，以便一個(gè)對(duì)象的狀態(tài)發(fā)生變化時(shí)，所有依賴(lài)于它的對(duì)象都得到通知并自動(dòng)刷新。

觀察者設(shè)計(jì)模式定義了對(duì)象間的一種一對(duì)多的依賴(lài)關(guān)系，以便一個(gè)對(duì)象的狀態(tài)發(fā)生變化時(shí)，
所有依賴(lài)于它的對(duì)象都得到通知并自動(dòng)刷新。

一些好的文章
觀察者模式與委托模式的區(qū)別
深入理解JavaScript系列（32）：設(shè)計(jì)模式之觀察者模式
【Javascript設(shè)計(jì)模式3】-觀察者模式

可以使用的配置

childList: *true =========================可以觀察子元素

attributes: *true ========================可以觀察屬性

characterData: *true ====================可以觀察數(shù)據(jù)

subtree: *true =========================可以觀察所有后代

attributeOldValue: *true ==================可以保存屬性舊值

characterDataOldValue: ==================*true 可以保存數(shù)據(jù)舊值

attributeFilter: ==========================設(shè)置指定觀察屬性元素集合

  
note: Mutation Observers 被限制可以觀察Dom序列化狀態(tài) 在觀察textarea內(nèi)內(nèi)容改變時(shí) 無(wú)法觸發(fā)

observe 一個(gè)被觀察者對(duì)象 一份配置

void observe(
  Node target,
  MutationObserverInit options
);

disconnet 斷開(kāi)觀察者與目標(biāo)鏈接

void disconnect();

takeRecords 返回對(duì)象所有觀察記錄

Array takeRecords();

不同瀏覽器之間存在兼容性問(wèn)題

  var MutationObserver = window.MutationObserver 
|| window.WebKitMutationObserver 
|| window.MozMutationObserver;

html

  

    
Press enter and look at the console
  

獲取list dom

var list = document.querySelector("ol");

實(shí)例化MutationObserver

var Observer = new MutationObserver(function(mutations){
});

Mutation Observer 對(duì)象

監(jiān)測(cè)childList

Observer.observe(list, {
  childList: true
});

不過(guò)值得注意的是 這里觀測(cè)的是list直接child 如果要觀測(cè)child的child 就需要開(kāi)啟subtree
比如要檢測(cè)這樣的行為

list.childNodes[0].appendChild(document.createElement("div"));

observer需要更改配置

Observer.observe(list, {
  childList: true,
  subtree: true
});

（mutationObserver觀測(cè)childlist） jsbin地址

observe 常見(jiàn)配置 及其解釋

observer.observe(target, {childList:true,subtree:true})                 
//subtree屬性讓觀察行為進(jìn)行"遞歸",這時(shí),以target節(jié)點(diǎn)為根節(jié)點(diǎn)的整棵DOM樹(shù)發(fā)生的變化都可能會(huì)被觀察到 
observer.observe(document, {childList:true,subtree:true})               
//如果target為document或者document.documentElement,則當(dāng)前文檔中所有的節(jié)點(diǎn)添加與刪除操作都會(huì)被觀察到
observer.observe(document, {childList:true,attributes:true,characterData:true,subtree:true})   
//當(dāng)前文檔中幾乎所有類(lèi)型的節(jié)點(diǎn)變化都會(huì)被觀察到(包括屬性節(jié)點(diǎn)的變化和文本節(jié)點(diǎn)的變化等)

observe 觀察characterData

Observer.observe(list, {childList:true});  
//假設(shè)此時(shí)target的outHTML內(nèi)容為
foo
,則: 
list.childNodes[0].data = "bar";           
//不會(huì)觸發(fā)回調(diào)函數(shù),因?yàn)閏hildList只觀察節(jié)點(diǎn)的新建與刪除,
而這里target節(jié)點(diǎn)的子節(jié)點(diǎn)仍然只有一個(gè),沒(méi)有多,沒(méi)有少
Observer.observe(list, {
childList:true,characterData:true});        
//加上characterData屬性,允許觀察文本節(jié)點(diǎn)的變化,行不行? 
list.childNodes[0].data = "sds";            
//還是不會(huì)觸發(fā)回調(diào)函數(shù),因?yàn)榘l(fā)生變化的是target節(jié)點(diǎn)的子節(jié)點(diǎn),我們目前的目標(biāo)節(jié)點(diǎn)只有一個(gè),就是target.
Observer.observe(list, {
childList:true,characterData:true,subtree:true});  
//加上subtree屬性,觀察所有后代節(jié)點(diǎn) 
list.childNodes[0].data = "cha";    

（mutationObserver觀測(cè)characterdata） jsbin地址

observe 觀察attribute

Observer.observe(list, {attributes:true});                    
//只觀察目標(biāo)節(jié)點(diǎn)的屬性節(jié)點(diǎn)
list.setAttribute("foo","bar");        
//不管foo屬性存在不存在,都會(huì)觸發(fā)回調(diào)函數(shù)
list.setAttribute("foo","bar");        
//即使前后兩次的屬性值一樣,還是會(huì)觸發(fā)回調(diào)函數(shù)
list.removeAttribute("foo");            
//移除foo屬性節(jié)點(diǎn),觸發(fā)回調(diào)函數(shù)
list.removeAttribute("foo");            
//不會(huì)觸發(fā)回調(diào)函數(shù),因?yàn)橐呀?jīng)沒(méi)有屬性節(jié)點(diǎn)可移除了
Observer.observe(list, {attributes:true,attributeFilter:["bar"]});     
//指定要觀察的屬性名
list.setAttribute("foo","bar");        
//不會(huì)觸發(fā)回調(diào)函數(shù),因?yàn)閍ttributeFilter數(shù)組不包含"foo"
list.setAttribute("bar","foo"); 

（mutationObserver觀測(cè)attribute） jsbin地址

我們開(kāi)始做一個(gè)編輯器

功能 向前 向后并且按鈕要能隨時(shí)改變

ol設(shè)置為contenteditable時(shí)，當(dāng)每次敲擊回車(chē)時(shí)，ol的children會(huì)增加一個(gè)li 并且我們構(gòu)造一個(gè)observer監(jiān)聽(tīng)它子元素的變化, 這樣我們便可以獲得每次改變后所有新的children

  var observer = new MutationObserver(function(mutations) {  
    mutations.forEach(function(mutation) {
      if (mutation.type === "childList") {
        var list_values = [].slice.call(list.children) 
            .map( function(node) { return node.innerHTML; }) 
            .filter( function(s) {
              if (s === "
") {
                return false;
              }
              else {
                return true;
              }
         });
        console.log(list_values);
      }
    });
  });

  observer.observe(list, {
    attributes: true, 
    childList: true, 
    characterData: true
  });

(觀察ol子元素的變化) jsbin地址

編輯器對(duì)與每行變化也需要監(jiān)測(cè)， 我們可以自己構(gòu)造一個(gè)entry保存每次數(shù)據(jù)

var observer = new MutationObserver(function (mutations) {
    // Whether you iterate over mutations..
    mutations.forEach(function (mutation) {
      // or use all mutation records is entirely up to you
      var entry = {
        mutation: mutation,
        el: mutation.target,
        value: mutation.target.textContent,
        oldValue: mutation.oldValue
      };
      console.log("Recording mutation:", entry);
    });
  });

(ol監(jiān)測(cè)每一行變化) jsbin地址

編輯器統(tǒng)計(jì)字?jǐn)?shù)

var observer = new  MutationObserver(function(mutations){ mutations.forEach(function(mutation){
    if(mutation.type == "characterData") {
    var newValue = mutation.target.textContent;
      textinputcount.innerHTML = "還可以輸入"+(1000 - newValue.length+"字");
    }
  });

編輯器統(tǒng)計(jì)字?jǐn)?shù)