css的钩子机制

导语 你知道一些核心 jQuery 函数都有自己的插件API称为钩子?jQuery 提供一个 API 来调用用户自定义的函数,用于扩展,以便获取和设置特定属性值。在 attr, prop(), val()和 css()的操作中都会引入钩子,钩子都
你知道一些核心 jQuery 函数都有自己的“插件API”称为“钩子”?

jQuery 提供一个 API 来调用用户自定义的函数,用于扩展,以便获取和设置特定属性值。在.attr,.prop(),.val()和 .css()的操作中都会引入钩子,钩子都有相似的结构。

var someHook = {
    get: function(elem) {
        // obtain and return a value
        return "something";
    },
    set: function(elem, value) {
        // do something with value
    }
}


钩子用来干什么?

在做 css3 属性浏览器兼容的时候,都需要特定的前缀。

Webkit 内核浏览器:-webkit-border-radius
Firefox 内核浏览器:-moz-border-radius

此时我看可以采用一个CSS hook 可以标准化这些供应商前缀的属性,让 css 接受一个单一的标准的属性的名称(border-radius 或用 DOM 属性的语法 borderRadius)判断的代码省略,直接看实现,给某一元素设置borderRadius 为10px。

$("#element").css("borderRadius", "10px");

为了做浏览器兼容,我们不得不:

if(webkit){
   ........................
}else if(firefox){
  ...........................
}else if(...)更多

这是一种最没技术含量的写法了,如果我们换成一种 hook 的话:

$.cssHooks.borderRadius = {
      get: function( elem, computed, extra ) {
        return $.css( elem, borderRadius );
      },
      set: function( elem, value) {
        elem.style[ borderRadius ] = value;
      }
};

$.cssHooks 对象提供了一种方法通过定义函数来获取和设置特定的CSS值的方法,它也可以被用来创建新的 cssHooks 以标准化 CSS3 功能,如框阴影和渐变。

例如 border-radius 属性,在早起的时候还没有形成标准化浏览器都有各自的实现,比如基于 webkit 的谷歌浏览器就需要写成 webkit-border-radius,Firefox 就需要写成 -moz-border-radius ,所以我们需要一个钩子都判断这个标准实现这个头部的前缀添加。

除了提供了对特定样式的处理可以采用更加细致的控制外,$.cssHooks也扩展了 .animate() 方法上可用的属性。这里可能还不能直观的体现,我们需在之后章节中深入到 css 源码中看到具体的用法。如果浏览器不支持任何形式的 CSS 属性写法,并且也不支持任何前缀写法,那么该样式是不会应用到元素上的。但是,如果浏览器支持某种特殊的写法,那么可以在 cssHooks 中添加对该特殊用法的支持。
 

http://www.aseoe.com/ true css的钩子机制 http://www.aseoe.com/show-11-604-1.html report 1326 你知道一些核心 jQuery 函数都有自己的插件API称为钩子?jQuery 提供一个 API 来调用用户自定义的函数,用于扩展,以便获取和设置特定属性值。在 attr, prop(), val()和 css()的操作中都会引入钩子,钩子都
TAG:css 钩子
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-11-604-1.html

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)