zoukankan      html  css  js  c++  java
  • 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'
    });

    总结:

     

  • 相关阅读:
    C#内建接口:IComparable
    C#内建接口:IEnumerable
    WPF中使用资源
    WPF中的触发器(Trigger)
    一文详解 | 开放搜索兼容Elasticsearch做召回引擎
    阿里云李飞飞:中国数据库的时与势
    如何构建流量无损的在线应用架构 | 专题开篇
    如何构建一个流量无损的在线应用架构 | 专题中篇
    多任务学习模型之ESMM介绍与实现
    云原生时代的运维体系进化
  • 原文地址:https://www.cnblogs.com/zzu-han/p/3164947.html
Copyright © 2011-2022 走看看