JavaScript结构型设计模式---装饰者模式

参考书籍：JavaScript设计模式
装饰者模式是在不改变原对象的基础上，通过对其进行包装拓展（添加属性或者方法），使原有对象可以满足用户更复制的需求。
比如一个form表单有好多个输入框的验证，但是假如一个一个写验证方法，很是麻烦，使用装饰者模式就方便很多。

//装饰者
var decorator = function (event, fn) {
    //获取事件源
    var input = document.getElementById(event);
    //若事件源已经绑定事件
    if (typeof input.onblur === 'function') {
        //缓存事件源已有的回调函数
        var oldfn = input.onblur;
        input.onblur = function () {
            oldfn();
            fn();
        }
    } else {
        input.onblur = fn;
    }
}
//输入框功能装饰
decorator('input',  function () {
    document.getElementById('input').style.backgroundColor = 'purple';
})

input框事件
js用法：

onBlur:当输入框失去焦点后

onFocus:当输入框获得焦点后

onblur 是原生 js 的写法，可以直接写在元素的属性中或者在脚本中定义；
，或者

jq用法：

focus();获取焦点

blur();失去焦点

focus，blur 直接绑定对象；

$( ‘#demo’ ).focus();

或 $( ‘#demo’ ).focus( function(){

//失去焦点时执行的函数
} )

$( ‘#demo’ ).blur();

或 $( ‘#demo’ ).blur( function(){
//失去焦点时执行的函数

} )或

$(document).on(“blur”,"",function(){

//失去焦点时执行的函数

})

:focus伪类来判定元素是否获取焦点；

var $focused = $(’:focus’);

var focused = document.activeElement;

var hasFocus = $(‘input’).is(’:focus’); //判断是否有:focus;