JS門面模式使用案例詳解

這次帶給大家JS門面模式使用案例詳解，JS門面模式使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

門面模式是一種流行的設計模式，它為一個已存在的物件建立一個新的介面。門面是一個全新的對象，背後有一個已存在的對像在工作。門面有時也叫包裝器，它們用不同的介面來包裝已存在的物件。你的用例中如果繼承無法滿足要求，那麼下一步驟就應該建立一個門面，這比較合乎邏輯。

jQuery和YUI的DOM介面都使用了門面。如上所述，你無法從DOM物件上繼承，所以唯一的能夠安全地為其新增功能的選擇就是建立一個門面。下面是一個DOM物件包裝器程式碼範例：

function DOMWrapper (element) {  this.element = element;
}
DOMWrapper.prototype.addClass = function (className) {  this.element.className += ' ' + className;
}
DOMWrapper.prototype.remove = function () {  this.element.parentNode.removeChild(this.element);
}// 用法var wrapper = new DOMWrapper(
document
.getElementById('my-div'));
wrapper.addClass('selected');
wrapper.remove();

DOMWrapper類型期望傳遞給其建構器的是一個DOM元素。該元素會保存起來以便以後引用，它還定義了一些操作該元素的方法。 addClass()方法是為那些還未實作HTML5的classList屬性的元素增加className的一個簡單的方法。 remove()方法封裝了從DOM中刪除一個元素的操作，屏蔽了開發者要存取該元素父節點的需求。

從JS的可維護性而言，門面是非常合適的方式，自己可以完全控制這些介面。你可以允許存取任何底層物件的屬性或方法，反之亦然，也就是有效地過濾對該物件的存取。你也可以對現有的方法進行改造，使其更加簡單易用（上段範例程式碼就是一個案例）。底層的物件無論如何改變，只要修改門面，應用程式就能繼續正常運作。

門面實作一個特定接口，讓一個物件看上去像另一個對象，就稱作一個適配器。門面和適配器唯一的不同是前者創建新接口，後者實現已存在的接口。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

web開發中如何避免空比較

web開發中怎樣偵測原始值

以上是JS門面模式使用案例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！