門(mén)面模式是什么

外部與一個(gè)子系統(tǒng)的通信必須通過(guò)一個(gè)系統(tǒng)的一個(gè)門(mén)面對(duì)象進(jìn)行，這就是門(mén)面模式。 它有兩個(gè)作用，一是簡(jiǎn)化類(lèi)的接口，二是消除類(lèi)與使用它的客戶(hù)代碼的耦合

門(mén)面模式之利

• 簡(jiǎn)化接口
• 減少與子系統(tǒng)的耦合
• 降低對(duì)外部代碼的依賴(lài)

門(mén)面模式之弊

• 不符合開(kāi)閉原則，對(duì)擴(kuò)展開(kāi)發(fā)，對(duì)修改關(guān)閉

適用場(chǎng)合

• 事件監(jiān)聽(tīng)器

 function addEvent(el,type,fn) {
      if (window.addEventListener) {
        el.addEventListener(type,fn,false)
      }
      else if (window.attachEvent) {
        el.attachEvent('on'+type , fn)
      }
      else{
        el['on'+type] = fn;
      }
    }

• js庫(kù)

JavaScript庫(kù)是人為設(shè)計(jì)的。設(shè)計(jì)它們的目的在于節(jié)省時(shí)間、簡(jiǎn)化常見(jiàn)任務(wù)和提供比每個(gè)瀏覽器都實(shí)現(xiàn)了的內(nèi)置JavaScript函數(shù)更易于使用的接口。

• 便利方法

  var DED = window.DED || {};
  DED.util = {
     //阻止冒泡
    stopPropagation:function(e){
      if (e.stopPropagation) {
        e.stopPropagation
      }
      else{
        e.cancelBubble = true
      }   
    },
     // 阻止默認(rèn)行為
    preventDefault:function(e){
      if (e.preventDefault) {
        e.preventDefault()
      }
      else{
        e.returnValue = true;
      }
    },
    stopEvent:function(e){
      DED.util.stopPropagation(e);
      DED.util.preventDefault(e);
    }
  }

一個(gè)栗子

  // 例如想要將ID為content的div元素的文本顏色設(shè)置為紅色，可以使用下面的代碼
  var element = document.getElementById('content');
  element.style.color = 'red';
  // 現(xiàn)在假設(shè)要一次設(shè)置幾個(gè)元素的某個(gè)樣式。如果有三個(gè)ID分別為foo、bar和baz的元素，并且想把它們的文本顏色設(shè)置為紅色 可以這樣做
  var element1 = document.getElementById('foo')
  element1.style.color = 'red'
  var element2 = document.getElementById('bar')
  element2.style.color = 'red'
  var element3 = document.getElementById('baz')
  element3.style.color = 'red'
  // 這樣不停的寫(xiě)getElementById并且為每一個(gè)元素設(shè)置同樣的屬性和值不夠優(yōu)雅。
  // 為了代碼更加優(yōu)雅，我們來(lái)寫(xiě)一個(gè)門(mén)面元素來(lái)簡(jiǎn)化我們的工作。
  setStyle(['foo','bar','baz'],'color','red');
  //  逆向思維  先寫(xiě)出怎么用  然后再來(lái)設(shè)計(jì)這個(gè)函數(shù)
  function setStyle(elements,prop,val) {
    for (let i = 0; i < elements.length; i++) {
      document.getElementById(elements[i]).style[prop] = val;
      
    }
  }
  // 我們還可以設(shè)計(jì)一個(gè)更復(fù)雜的接口，把所有邏輯都組合在另一個(gè)門(mén)面元素中。以便一次調(diào)用就可以處理所有問(wèn)題 我們把它命名為setCSS
  setCSS(['foo'],{
    positon:"absolute",
    top:"50px",
    left:"300px"
  })
  function setCss(el,styles) {
    for (var prop in styles) {
      if (!styles.hasOwmProperty(prop)) continue;
      setStyle(el,prop,styles[prop])
      
    }
  }
  // 現(xiàn)在我們就可以像這樣一次設(shè)置多個(gè)元素的多個(gè)樣式
  setCSS(['foo','bar','baz'],{
    color:"red",
    background:"black",
    fontSize:"16px",
  })