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

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

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

可以使用的配置

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

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

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

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

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

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

attributeFilter: ==========================設置指定觀察屬性元素集合

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

observe 一個被觀察者對象 一份配置

void observe(
  Node target,
  MutationObserverInit options
);

disconnet 斷開觀察者與目標鏈接

void disconnect();

takeRecords 返回對象所有觀察記錄

Array takeRecords();

不同瀏覽器之間存在兼容性問題

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

html

  

    
Press enter and look at the console
  

獲取list dom

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

實例化MutationObserver

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

Mutation Observer 對象

監(jiān)測childList

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

不過值得注意的是 這里觀測的是list直接child 如果要觀測child的child 就需要開啟subtree
比如要檢測這樣的行為

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

observer需要更改配置

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

（mutationObserver觀測childlist） jsbin地址

observe 常見配置 及其解釋

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

observe 觀察characterData

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

（mutationObserver觀測characterdata） jsbin地址

observe 觀察attribute

Observer.observe(list, {attributes:true});                    
//只觀察目標節(jié)點的屬性節(jié)點
list.setAttribute("foo","bar");        
//不管foo屬性存在不存在,都會觸發(fā)回調函數(shù)
list.setAttribute("foo","bar");        
//即使前后兩次的屬性值一樣,還是會觸發(fā)回調函數(shù)
list.removeAttribute("foo");            
//移除foo屬性節(jié)點,觸發(fā)回調函數(shù)
list.removeAttribute("foo");            
//不會觸發(fā)回調函數(shù),因為已經沒有屬性節(jié)點可移除了
Observer.observe(list, {attributes:true,attributeFilter:["bar"]});     
//指定要觀察的屬性名
list.setAttribute("foo","bar");        
//不會觸發(fā)回調函數(shù),因為attributeFilter數(shù)組不包含"foo"
list.setAttribute("bar","foo"); 

（mutationObserver觀測attribute） jsbin地址

我們開始做一個編輯器

功能 向前 向后并且按鈕要能隨時改變

ol設置為contenteditable時，當每次敲擊回車時，ol的children會增加一個li 并且我們構造一個observer監(jiān)聽它子元素的變化, 這樣我們便可以獲得每次改變后所有新的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地址

編輯器對與每行變化也需要監(jiān)測， 我們可以自己構造一個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)測每一行變化) jsbin地址

編輯器統(tǒng)計字數(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)計字數(shù)