外觀模式：為一組複雜的子系統介面提供一個更高階的統一介面，通過這個介面使得對子系統介面的訪問更容易。在js中有時也會用於對底層結構相容性做統一封裝來簡化使用者使用。

相容模式

<a id="myinput">click</a>
<script>
function addEvent(dom, type, fn) {
    // 對於支援DOM2級事件處理程式addEventListener方法的瀏覽器
    if (dom.addEventListener) {
        dom.addEventListener(type, fn, false);
        // 對於不支援addEventListener方法但支援attachEvent方法的瀏覽器
    } else if (dom.attachEvent) {
        dom.attachEvent('on' + type, fn);
        // 對於不支援addEventListener方法也不支援attachEvent方法，但支援on+'事件名'的瀏覽器
    } else {
        dom['on' + type] = fn;
    }
}
var myInput = document.getElementById('myinput');
addEvent(myInput, 'click', function () {
    console.log("繫結第一個事件");
});
addEvent(myInput, 'click', function () {
    console.log("繫結第二個事件");
});
addEvent(myInput, 'click', function () {
    console.log("繫結第三個事件");
});
</script>
 

·簡約版屬性樣式

<div id="box">click</div>
<script>
// 簡約版屬性樣式方法庫
var A = {
    // 通過id獲取元素
    g: function (id) {
        return document.getElementById(id);
    },
    // 設定元素css屬性
    css: function (id, key, value) {
        document.getElementById(id).style[key] = value;
    },
    // 設定元素的屬性
    attr: function (id, key, value) {
        document.getElementById(id)[key] = value;
    },
    html: function (id, html) {
        document.getElementById(id).innerHTML = html;
    },
    on: function (id, type, fn) {
        document.getElementById(id)['on' + type] = fn;
    }
};
A.css('box', 'background', 'red'); // 設定css樣式
A.attr('box', 'className', 'box'); // 設定class
A.html('box', '這是新新增的內容'); // 設定內容
A.on('box', 'click', function () {
    A.css('box', 'width', '500px');
});
</script>