dojo dom class原始碼學習

dom-class模組是dojo中對於乙個元素class特性的操作（特性與屬性的區別），主要方法有：

對於支援classlist的瀏覽器可以使用calsslist提供的方法，但支援這個屬性的瀏覽器很少，貌似只有firefox和chrome支援。dojo這裡使用了通用的方法：更改classname的值。

// example:
//        add two classes at once:
//    |    require(["dojo/dom-class"], function(domclass));
//// example:
//        add two classes at once (using array):
//    |    require(["dojo/dom-class"], function(domclass));

該模組中的許多方法，比如add、remove、replace既可以新增乙個連續的class字串（類與類之間使用空格相連："class1 class2 class3"）也可以新增class陣列。在dojo內部的處理中，全部將「class1 class2 class3」這種形式轉化成陣列。就是str2array方法：

var cls, // exports object
spaces = /\s+/, a1 = [""];
function str2array(s)
var a = s.split(spaces);
// 去除前面的空白字元，如：「 string」
if(a.length && !a[0])
// 去除後面的空白字元，如：「string 」
if(a.length && !a[a.length - 1])
return a;
}// assumed to be an array
if(!s)
// 普通陣列
return array.filter(s, function(x));
}

按我的理解去除前後空白字元的過程有些囉嗦，dojo/_base/lang模組有trim方法，就是用來去除前後空白字元。這裡完全可以直接呼叫，看來不是乙個人寫的。

contains、add、remove這三個函式屬於這個模組中的基礎方法，理解這個模組的**還要知道乙個核心原理是：這些方法全部為classname和新class的頭尾新加空格： " class1 class2 class3 "; " newclass "，利用字串操作的方式來處理，這樣既可以提高處理效率又能有效避免瀏覽器多次重繪引發的效能問題。

先看一下contains方法：

contains: function containsclass(/*domnode|string*/ node, /*string*/ classstr)
return ((" " + dom.byid(node)[classname] + " ").indexof(" " + classstr + " ") >= 0); // boolean
},

將classname與classstr首尾都新增空格後，利用string型別的indexof方式來判斷是否存在classstr。

add: function addclass(/*domnode|string*/ node, /*string|array*/ classstr)
}// cls改變的話就使用新的classname
if(oldlen < cls.length)
}

remove: function removeclass(/*domnode|string*/ node, /*string|array?*/ classstr)
cls = lang.trim(cls);
}else
if(node[classname] != cls)
}

下面介紹replace方法，顧名思義替換，替換的方式通常都是先刪除再新增。如果對於同乙個節點刪除、新增 class會引起瀏覽器重繪，所以這裡引入了fakenode來降低瀏覽器重繪次數，提高效能。

replace: function replaceclass(/*domnode|string*/ node, /*string|array*/ addclassstr, /*string|array?*/ removeclassstr)
}

toggle方法可以對一組class進行開關控制，存在則刪除，沒有則新增。

toggle: function toggleclass(/*domnode|string*/ node, /*string|array*/ classstr, /*boolean?*/ condition)
}else
return condition;   // boolean
}

看dojo的實現方式，使用toggle對一組class開關操作時會導致瀏覽器多次重繪，我們完全可以對classname和classstr做差異融合，然後一次替換，或者像replace中一樣，利用fakenode來防止多次重繪。

toggle: function toggleclass(/*domnode|string*/ node, /*string|array*/ classstr, /*boolean?*/ condition)
// 一次重繪
if(node[classname] !== fakenode[classname])
}else
return condition;   // boolean
}

dojo dom class原始碼學習

《原始碼閱讀》原始碼閱讀技巧,原始碼閱讀工具

Cartographer原始碼篇原始碼分析 1

python原始碼剖析 Python原始碼剖析

dojo dom class原始碼學習

《原始碼閱讀》原始碼閱讀技巧,原始碼閱讀工具

Cartographer原始碼篇 原始碼分析 1

python原始碼剖析 Python原始碼剖析

相關推薦

Cartographer原始碼篇原始碼分析 1