jQuery源码阅读6.1— Sizzle架构

Sizzle是纯js实现的css选择器引擎

代码架构
(function(){
//引擎入口
var Sizzle = function(selector, context, result, seed){...};
//工具方法，排序、去重
Sizzle.uniqueSOrt = function(result){...};
//便捷方法，用指定的选这起expr对元素集合set进行过滤
Sizzle.matches = function(expr, set){...};
//便捷方法，检查某个元素node是否匹配选择器表达式expr
Sizzle.matchesSelector = function(node, expr){...};
//内部方法，对快表达式进行查找
Sizzle.find = function(expr, context, isXML){...};
//内部方法，用块表达式过滤元素集合
Sizzle.filter = function(expr, set, inplace, not){...};
//工具方法，抛出异常
Sizzle.error = function(msg){...};
//工具方法，获取DOM元素集合的文本内容
var getText = Sizzle.getText = function(elem){...};

//扩展方法和属性
var Expr = Sizzle.selector = {
    //块表达式查找顺序
    order: ["ID", "NAME", "TAG"],
    //正则表达式，用于匹配和解析块表达式
    match: {ID, CLASS, NAME, ATTR, TAG, CHILD, POS, PSEUDO },
    leftMatch: {...},
    //属性名修正函数集
    attrMap: {"class", "for"},
    //属性值读取函数集
    attrHandle: {href, type},
    //块间关系过滤函数集
    relative: {"+", ">", "", "~"},
    //块表达式查找函数集
    find: { ID, NAME, TAG},
    //块表达式预过滤韩书记
    preFilter: { CLASS, ID, TAG, CHILD, ATTR, PSEUDO, POS },
    //伪类过滤韩书记
    filters: { enabled, disabled, checked, selected, parent, empty, has, header, text, radio, checkbox, file, password, submit, image, rest, button, input, focus },
    //位置伪类过滤函数集
    setFilters: { first, last, even, odd, lt, gt, nth, eq },
    //块表达式过滤函数集
    filter: {PSEUDO, CHILD, ID, TAG, CLASS, ATTR, POS}
};

//如果支持方法querySelectorAll()，则调用该方法查找元素
if( document.querySelectorAll){
    (function(){
        var oldSizzle = Sizzle;
        Sizzle = function(query, context, extra, seed){
            //尝试用方法querySelectorAll()查找元素
            //如果上下文是document，则直接调用querySelectorAll()查找元素
            return makeArray( context.querySelectorAll(query), extra );

            //如果上下文是元素，则为选择器表达式增加上下文，然后嗲用querySelectorAll()
            //查找元素
            return makeArray( context.querySelectorAll("[id='" + nid + "']" + query) , extra);

            //如果查找失败，则仍然调用oldSizzle()
            return oldSizzle(query, context, extra, seed);
        }
    })();
}

//如果支持方法matchesSelector(), 则调用该方法检查元素是否匹配选择器表达式
(function(){
    var matches = html.matchesSelector || html.mozMatchesSelector || html.webkitMatchesSelector || html.msMtchesSelector;

    //如果支持方法matchesSelector()
    if( matches ){
        Sizzle.matchesSelector = function(node, expr){
            //尝试调用方法matchesSelector()
            var ret = matches.call(node, expr);
            return ret;
            //如果查找失败，则仍然调用Sizzle()
            return Sizzle(expr, null, null, [node]).length > 0;
        };
    }
})();

//检测浏览器是否支持getElementsByClassName()
(function(){
    Expr.order.splice(1, 0, "CLASS");
    Expr.find.CLASS = function(match, context, isXML){...};
})();

//工具方法，检测元素a是否包含元素b
Sizzle.contains = function(a, b){...};

});