/**
 * 概念：外觀模式
 * 為一組復(fù)雜的子系統(tǒng)接口提供一個更高級的統(tǒng)一接口
 * 通過這個接口使得子系統(tǒng)接口的訪問更容易。在Javascrip中有時也會用于對底層結(jié)構(gòu)兼容性做統(tǒng)一封裝來簡化用戶使用
 */

// 案例---使用外觀封裝一個點擊事件，使其兼容IE瀏覽器和常用的瀏覽器，即兼容性封裝
// 外觀模式實現(xiàn)
function addEvent(dom, tyoe, 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;
    }
}

// 通過上面的放我對于支持addEventListener 或者 attachEvent 方法的瀏覽器就可以放心地綁定多個事件了
// 用例
var myInput = document.getElementById('myinput')
addEvent(myInput, 'click', function() {
    console.log('綁定第一個事件')
})
addEvent(myInput, 'click', function() {
    console.log('綁定第二個事件')
})
addEvent(myInput, 'click', function() {
    console.log('綁定第三個事件')
})

// 使用外觀模式解決IE 低版本瀏覽器不兼容e.preventDefault() 和 e.target 
// 獲取事件對象
var getEvent = function(event) {
    // 標(biāo)準(zhǔn)瀏覽器返回event ，IE下 window.event
    return event || window.event;
}
// 獲取元素
var getTarget = function (event) {
    var event = getEvent(event);
    // 標(biāo)準(zhǔn)瀏覽器下 event.target , IE 下event.scrElement 
    return event.target || event.srcElement;
} 

// 阻止默認(rèn)行為
var preventDefault = function(event) {
    var event = getEvent(event);
    // 標(biāo)準(zhǔn)瀏覽器
    if(event.preventDefault) {
        event.preventDefault();
        // IE瀏覽器
    }else {
        event.returnValue = false
    }
}
// 用例
document.onclick = function (e) {
    // 阻止默認(rèn)行為
    preventDefault(e);
    // 獲取事件源目標(biāo)對象
    if(getTarget(e) !== document.getElementById('myinput')) {
        // 
    }
}


// 簡單實現(xiàn)獲取元素的屬性樣式的簡單方法庫
var B = {
    // 通過ID獲取元素
    g: function(id) {
        return document.getElementById(id);
    },
    // 設(shè)置元素css 屬性
    css: function(id, key, value) {
        document.getElementById(id).style[key] = value;
    },
    // 設(shè)置元素的屬性
    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;
    }
}

// 上面封裝了操作元素屬性樣式的代碼庫
// 用例如下
B.css('box', 'background', 'red'); // 設(shè)置css樣式
B.attr('box', 'className', 'box') // 設(shè)置class 
B.html('box', '這是新添加的內(nèi)容') // 設(shè)置內(nèi)容
B.on('box', 'click', function() {
    B.css('box', 'width', '500px')
})


/**
 * 總結(jié)：
 * 外觀模式是對接口方法的外層包裝，以供上層代碼調(diào)用
 */