選擇器表達(dá)式

術(shù)語約定

1. 選擇器表達(dá)式:如,"div>p"
2. 并列選擇器表達(dá)式:如,"div p"
3. 塊表達(dá)式:如,"div>p"中的"div","p"
4. 塊表達(dá)式類型:如,"div"的類型是TAG,"div.red"則是TAG+CLASS
5. 塊間關(guān)系符:如,"div>p"中的">"

選擇器表達(dá)式的組成

1. 塊表達(dá)式
   1. 簡單表達(dá)式:ID,CLASS,TAG
   2. 屬性表達(dá)式:ATTR
   3. 偽類表達(dá)式PSEUDO:
      1. 位置偽類:POS
      2. 子元素偽類CHILD
      3. 內(nèi)容偽類
      4. 可見偽類
      5. 表單偽類
2. 塊間關(guān)系符:">" , "" , "+"和"~"

查找思路:以"div.red>p"為例

查找思路
1.從左向右:先查找"div.red",再查找"p";(不斷縮小查找范圍)
2.從右到左(Sizzle核心查找方式):先查找:"p",再查找"div.red";(先查找后過濾,效率比從左到右高;)
步驟

1. 解析出:塊表達(dá)式和塊間關(guān)系符的集合
2. 先查找div.red元素,再查找p元素
3. 處理div.red和p之間的關(guān)系符">"
   1. 從左到右:找到div.red匹配的子元素集合,再查找匹配p的元素
   2. 從右到左:查找匹配p元素的父元素是否為div.red

Sizzle總體架構(gòu)

/**書籍:jQuery技術(shù)內(nèi)幕-深入解析jQuery架構(gòu)設(shè)計與實現(xiàn)
 * 
 * 如果瀏覽器支持querySelectorAll(),則調(diào)用該方法
 * 如果不支持,Sizzle模擬該方法的行為
 * 
 * 術(shù)語和約定[重點]
 * 1.選擇器表達(dá)式:"div>p"
 * 2.并列選擇器表達(dá)式:"div,p"
 * 3.塊表達(dá)式:"div>p"中的"div","p"
 * 4.快表達(dá)式類型:div的類型是TAG, ".red"的類型類型是CLASS,"div.red"的類型是TAG+CLASS
 * 5.塊間關(guān)系符:"div>p"中的>
 * 
 * 選擇器表達(dá)式有塊表達(dá)式和塊間關(guān)系符組成
 * 1.塊間關(guān)系符
 * 2.塊表達(dá)式
 *  a.簡單表達(dá)式:ID,CLASS,TAG
 *  b.屬性表達(dá)式:ATTR
 *  c.偽類表達(dá)式:1.位置偽類:POS; 2.子元素偽類:CHILD; 3.內(nèi)容偽類; 4.可見偽類; 表達(dá)偽類
 */
(function(window){
    var Expr;

//***********************公開方法***************************************** */
    /**
     * 查找與選擇器表達(dá)式selector匹配的元素集合:引擎入口
     * @param {*} selector CSS選擇器表達(dá)式
     * @param {*} context DOM元素或文檔對象
     * @param {*} results 結(jié)果集
     * @param {*} seed 可選元素集合,Sizzle()將從該元素集合中過濾出匹配選擇器表達(dá)式的元素集合
     * @returns 
     */
    function Sizzle(selector,context,results,seed){
        return results;
    };
    //用選擇器表達(dá)式expr對元素集合set進(jìn)行過濾
    Sizzle.matches = function( expr, elements ) {
        return Sizzle( expr, null, null, elements );
    };
    //檢查元素node是否匹配選擇器表達(dá)式expr
    Sizzle.matchesSelector = function( elem, expr ){

    };

//***********************內(nèi)部使用********************************** */
    //選擇器表達(dá)式過濾
    Expr = Sizzle.selectors = selectors;

    Expr.pseudos[ "nth" ] = Expr.pseudos[ "eq" ];

    // Easy API for creating new setFilters
    //位置偽類過濾函數(shù)集
    function setFilters() {}
    setFilters.prototype = Expr.filters = Expr.pseudos;
    Expr.setFilters = new setFilters();

    

//*******************工具方法******************************************** */
    //排序去重
    Sizzle.uniqueSort = function(results){

    };
    //檢查元素a是否包含b
    Sizzle.contains = function( context, elem ) {
    };
    Sizzle.error = function(msg){
        throw new Error("Syntax error,unrecognized expression: "+msg);
    };
//********************暴露出去******************************* */
    //Expose
    var _sizzle = window.Sizzle;//未加載jQuery前的Sizzle屬性
    //如果名稱沖突, 用這個方法取另外的名稱
    Sizzle.noConflict = function(){
        if(window.Sizzle === Sizzle)
        {
            window.Sizzle = _sizzle;
        }
        return Sizzle;
    }

    //引入方式
    if(typeof define === "function" && define.amd){//AMD(nodejs):Asynchronous Module Definitoin
        define(function(){
            return Sizzle;
        });
    }else if(typeof module !== "undefined" && module.exports){
        module.exports = Sizzle;//ES6
    }else{
        window.Sizzle = Sizzle;
    }
})(window);