解密jQuery内核 样式操做

基础回顾

jQuery里节点样式读取以及设置都是经过.css()这个方法来实现的，本章通一下分解探究下jquery里这部分代码的实现

那么jQuery要处理样式的哪些问题?

先简单回顾下样式操做会遇到的问题

HTML样式定义3种方式了

<link/> 外部引入也就是定义CSS中的
<style/>嵌入式样式
style特性地定义

给一个HTML元素设置css属性，如

var head= document.getElementById("head");
head.style.width = "20px";
head.style.height = "10px";
head.style.display = "block";

这是DOM2级样式提供的API了，这里总的来讲还涉及了3个问题，固然也是jQuery内部须要解决的兼容问题了

1 单一的设置太麻烦，并且每次style一次就等于浏览器要绘制一次，固然高级的浏览器是可能会合并style的次数的

2 style只能针对行类样式，对于link引入的样式，没法获取

3 样式属性名的兼容问题，好比驼峰，保留字

 

---

样式规则

任何支持style特性的HTML元素在js中有一个对象的style属性，其实也是一个实例，可是内部属性命名都是采用的驼峰形式的

好比 background-image =>要写成  backgroundImage

其中一个是比较特殊的就是 float,  保留字嘛因此就换成 cssFloat,  IE : styleFloat

而后对于width,hight这些处理都最好要有一个量度单位

 

---

合并cssText

可能针对一种状况给出的处理就是cssText合并

var head= document.getElementById("head");
head.style.cssText="width:20px;height:10px;display:bolck";

和innerHTML同样，cssText很快捷且全部浏览器都支持。此外当批量操做样式时，cssText只需一次reflow，提升了页面渲染性能

固然若是是在建立的时候，咱们还能够利用文档碎片

缺点天然就是样式被总体覆盖了，因此在处理的时候应该要先获取须要保留的样式而后再拼接起来

 

---

样式访问

以前说过了style只能获取行类样式了，那么CSS外部样式表定义的样式如何处理？

DOM2增长了 document.defauleView,提供了 getComputedStyle()方法 返回了相似style属性的 css的dom隐射的实例对象

天然包行了样式表的最终样式了

getComputedStyle与style的区别

区别就在于getComputedStyle是只能读的，style是能够可读可写的

看看jQuery的

function getStyles( elem ) {
        return window.getComputedStyle( elem, null );
    }

没有defauleView前缀，查了下在浏览器中，该属性返回当前 document 对象所关联的 window 对象，若是没有，会返回 null。

应该就能直接window调用了

固然啦，IE这个老大反正就不怎么守规矩了，getComputedStyle方法IE6~8是不支持，因此本身弄出来了currentStyle

处理相似style的处理了,jQuery2X 能够无视IE9如下的兼容了， 因此这个略过~

 

以上就是样式操做须要了解是基础了，那么总的来讲

jQuery须要的处理问题就显而易见了

1 参数传递

2 命名规范

3 访问规则

4 性能优化

 

---

.css()

关于css的接口

jQuery.fn.css 与 jQuery.css

咱们知道实例是调用静态的方法

css的接口参数传递是能够不少个组合状况的，这也符合了jQuery少写多作的原则了

最终方法与设置样式的方法是实例方法，因此咱们看传递的参数就知道了，只能是单一的elem, name, value 实参

jQuery.style( elem, name, value ) :
jQuery.css( elem, name );

因此若是咱们传递是对象或者别的方式就须要一个过滤的环节

css参数的处理也跟以前的attr属性的处理保持一致，采用了jQuery.access方法统一调配

这个具体以前就分析了，无非就是递归参数，可是有个可学的设计思路

分离不一样的逻辑判断经过回调传递进去

 

---

取值jQuery.css()

先看看源码

css: function( elem, name, extra, styles ) {
            var val, num, hooks,
                origName = jQuery.camelCase( name );
            name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( elem.style, origName ) );
            hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ];
            if ( hooks && "get" in hooks ) {
                val = hooks.get( elem, true, extra );
            }
            if ( val === undefined ) {
                val = curCSS( elem, name, styles );
            }
            if ( val === "normal" && name in cssNormalTransform ) {
                val = cssNormalTransform[ name ];
            }
            if ( extra === "" || extra ) {
                num = parseFloat( val );
                return extra === true || jQuery.isNumeric( num ) ? num || 0 : val;
            }
            return val;
        }

首先天然是检测是是否驼峰写法了，若是不是就得转化下

origName = jQuery.camelCase( name );

把正则拖出来

'background-image'.replace(/-([\da-z])/gi, fcamelCase = function( all, letter ) {
       return letter.toUpperCase();
})

找到-后面的，转成大写开头

 

修正命名float

jQuery.cssProps

 

css样式的钩子处理，针对不一样的兼容增长的解耦处理，这里先跳过下章再将，不影响代码流程

 

因此最终在默认状况下是经过curCSS处理的取值

curCSS = function( elem, name, _computed ) {
        var width, minWidth, maxWidth,
            computed = _computed || getStyles( elem ),

        // Support: IE9
        // getPropertyValue is only needed for .css('filter') in IE9, see #12537
            ret = computed ? computed.getPropertyValue( name ) || computed[ name ] : undefined,
            style = elem.style;

最终就是经过getComputedStyle的getPropertyValue方法了，因此通体来讲跟以前假设的处理是保持一致的，只是作了不一样的兼容

 

---

设值jQuery.style()

处理的方式与css相似，只是要注意了style才具备样式的修改权限

这样的传对象其实都是须要调用屡次style处理的，固然没有采用cssText的方式处理，由于自己之前的属性就会丢失了

var color = a.css({"background-color":'red','width':'200px'});

 

---

总结：

jQuery的处理流程：

1. 分解参数

2. 转换为驼峰式，修正属性名

3. 若是有钩子，则调用钩子的set get

4. 最终实现都是依靠浏览器本身的API的