jQuery hooks源码学习

段落不够清晰，待整理

看jQuery源码的时候，经常见到含有hooks标志的对象，如cssHooks, attrHooks, propHooks, valHooks.

下面对其中的一段进行解读。

jQuery.extend({
    // Add in style property hooks for overriding the default
    // behavior of getting and setting a style property
    cssHooks: {
        opacity: {
            get: function( elem, computed ) {
                if ( computed ) {
                    // We should always get a number back from opacity
                    var ret = curCSS( elem, "opacity" );
                    return ret === "" ? "1" : ret;

                }
            }
        }
    },
    
     ....
});

从上面看到，分析下cssHooks里面覆写某个属性的结构。

Hook 函数特征：

propName: {
    get: function(elem, computed){
        // obtain and return a value
        return "something";
    },
    set: function(elem, value){
        // do something
    }
}

cssHooks相当于是为jQuery内部核心函数写的内部API 插件，供核心函数完成功能使用。

jQuery内部的css, attr, prop, val中会用到，即对应前面的几个hooks对象。

jQuery内部是如何使用的。

style和css方法是实现 css()的核心方法。

 

jQuery.extend({
    // 设置元素css属性的方法
    style: function (elem, name, value) {
        
    }
    // 获取元素css属性的方法
    css: function (elem, name) {
        ... 
        hooks = jQuery.cssHooks[name] || jQuery.cssHooks[origName];
        
        if(hooks && "get" in hooks) {
            val = hooks.get(elem, true);
        } 
        ...
        return val;
    }
});

 

如果该属性name，在cssHooks存在一个对应的对象，就会尝试用hooks中的方法来解决。如果不行，后面会尝试使用其他方法。

因此：jQuery优先尝试使用hooks中对象方法来解决css, attr, prop, val 访问。

添加一个自定义的hook

我们来实现一个用$('div').attr('open') 来实现访问元素的is-open属性，和$('div').attr('open',true)来实现设计属性。(这个例子实际意义不大，仅作举例说明，下来找到更好的进行更换。

 

$.attrHooks.open = { 
    get: function (elem) {
        return $(elem).prop('is-open');
    },
    set: function (elem, val) {
        return $(elem).attr('is-open', val);
    }
};

jQuery(function ($) {
    $('.test').attr('open', 'open');
    console.log( $('.test').attr('is-open') ); // 'open'
});

 

 

总结：