解密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的