zoukankan      html  css  js  c++  java
  • 制作JavaScript选择器(2)查询链

    上回实现了将选择器解析为令牌,下面就要实现轮子的核心:令牌转换为查询链。

    在描述查询链之前先定义伪代码:

    操作 解释
    getNode() 获取全部节点
    filterAncestor() 过滤祖先节点
    childNode() 获取子节点
    filterParent() 过滤父节点
    nextNode() 获取后一个紧邻的兄弟节点
    filterPrev() 过滤前一个紧邻的兄弟节点
    nextAllNode() 获取后面的兄弟节点
    filterFront() 过滤前面的兄弟节点
    uniqueNode() 去除重复

    简单的查询链有两种,即从左到右和从右到左。

    从左到右:

    1. 对每一个选择器子组进行以下操作
      1. 解析最左边的简单选择器,getNode
      2. 如果右边还有剩余部分,则根据连接符不同,对当前结果使用 getNode、childNode、nextNode 和 nextAllNode 其中一个
      3. 重复第二步,并对每次结果使用 uniqueNode 去除重复,直到结束
    2. 合并每个子组的结果,然后 uniqueNode 去除重复

    从右到左:

    1. 对每一个选择器子组进行以下操作
      1. 解析最右边的简单选择器,getNode
      2. 如果左边还有剩余部分,则根据连接符不同,继续使用 filterAncentor、filterParent、filterPrev 和 filterFront 中的一个,直到结束;
    2. 合并每个子组的结果,然后 uniqueNode 去除重复

    上一篇文章提到我打算使用分部查询,具体的操作就是只对“>”、“+”、“~”这三个连接符使用从左到右查询,对“ ”连接符采用从右到左查询。

    对选择器 "A B C > D E F ~ G H"来说,从左到右可以描述为:

    context
    .getNode(A)
    .getNode(B).uniqueNode()
    .getNode(C).uniqueNode()
    .childNode(D).uniqueNode()
    .getNode(E).uniqueNode()
    .getNode(F).uniqueNode()
    .nextNode(G).uniqueNode()
    .getNode(H).uniqueNode();

    从右到左为描述为:

    context
    .getNode(H)
    .filterAncestor(G)
    .filterPrev(F)
    .filterAncestor(E)
    .filterAncestor(D)
    .filterParent(C)
    .filterAncestor(B)
    .filterAncestor(A);

    我的计划描述为:

    context
    .getNode(C)
    .filterAncestor(B)
    .filterAncestor(A)
    .childNode(D)
    .getNode(F)
    .filterAncestor(E)
    .nextNode(G)
    .getNode(H)

    基于令牌的伪查询链生成器http://dishuostec.sinaapp.com/javascript/css_token/parse/

    示例:

    选择器
    查询串
    * context.getNode( < * > )
    body div context.getNode( < div > ).filterAncestor( < body > )
    h1#title + div > p context.getNode( < #title, h1 > ).childNode( < p > )
    div p a context.getNode( < a > ).filterAncestor( < div >,< p > )
    div, p, a unique( context.getNode( < div > ) , context.getNode( < p > ) , context.getNode( < a > ) )
    context, 
  • 相关阅读:
    C#中的Excel操作【1】——设置Excel单元格的内容,打开Excel文件的一种方式
    Java 在指定目录建立指定文件名的文件 并输入内容
    JSP基础——属性保存范围和request对象
    JSP基础总结(运行机制、脚本元素、指令元素、动作元素)
    weblogic 清除缓存
    oracle 分区表详解
    ORA-00257: archiver error的解决方法
    oracle中job定时器任务
    timestamp类型在jsp页面输出格式化方法
    cmd中测试常用到的命令汇总
  • 原文地址:https://www.cnblogs.com/dishuostec/p/selector_2_chain.html
Copyright © 2011-2022 走看看