forked from leeluolee/nes
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathextend_rule.html
52 lines (46 loc) · 10.1 KB
/
extend_rule.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html> <html> <head> <title>extend_rule.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="extend_combo.html"> extend_combo.js </a> <a class="source" href="extend_operator.html"> extend_operator.js </a> <a class="source" href="extend_parser.html"> extend_parser.js </a> <a class="source" href="extend_pesudo.html"> extend_pesudo.js </a> <a class="source" href="extend_rule.html"> extend_rule.js </a> <a class="source" href="nes.html"> nes.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> extend_rule.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">time</span> <span class="o">=</span> <span class="o">+</span><span class="k">new</span> <span class="nb">Date</span>
</pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>在进行语法扩展时reg是必须的，
action与filter至少需要需要二选其一(根据场景不同)才能完成一个自定义规则的实施, 否则虽然不会报错
但是只是匹配了，让解析器不报错，但是这个选择器什么都不会做</p> </td> <td class="code"> <div class="highlight"><pre>
<span class="nx">nes</span><span class="p">.</span><span class="nx">parser</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">"range"</span><span class="p">,{</span>
<span class="nx">reg</span><span class="o">:</span><span class="sr">/\s*\{\s*(\d*),(\-?\d*)\s*\}\s*/</span><span class="p">,</span>
</pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>action中需要注意两个部分一个是this.error()打印出解析错误信息，
一个this.current()永远返回当前的Simple Selector对应的data部分这是个hash表，
你往里放key value对就行</p> </td> <td class="code"> <div class="highlight"><pre>
<span class="nx">action</span><span class="o">:</span><span class="kd">function</span><span class="p">(</span><span class="nx">all</span><span class="p">,</span> <span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">current</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">current</span><span class="p">(),</span> <span class="c1">//1. this.current返回当前匹配的simple selector</span>
<span class="nx">pesudos</span> <span class="o">=</span> <span class="nx">current</span><span class="p">.</span><span class="nx">pesudos</span> <span class="o">||</span> <span class="p">(</span><span class="nx">current</span><span class="p">.</span><span class="nx">pesudos</span> <span class="o">=</span> <span class="p">[])</span>
<span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">a</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">b</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s2">"range中的参数不能同时为空"</span><span class="p">)</span> <span class="c1">//2. this.error</span>
<span class="nx">a</span> <span class="o">=</span> <span class="nx">a</span> <span class="o">&&</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">a</span><span class="p">)</span> <span class="o">||</span> <span class="mi">1</span>
<span class="nx">b</span> <span class="o">=</span> <span class="nx">b</span> <span class="o">&&</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">b</span><span class="p">)</span> <span class="o">||</span> <span class="mi">0</span>
<span class="nx">pesudos</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span> <span class="c1">//a 如果不存在 视为</span>
<span class="nx">name</span><span class="o">:</span><span class="s2">"nth-child"</span><span class="p">,</span>
<span class="nx">param</span><span class="o">:</span><span class="p">{</span><span class="nx">start</span><span class="o">:</span><span class="nx">a</span><span class="p">,</span> <span class="nx">step</span><span class="o">:</span><span class="mi">1</span> <span class="p">}</span>
<span class="p">})</span>
<span class="k">if</span><span class="p">(</span><span class="nx">b</span><span class="o">></span><span class="mi">0</span><span class="p">){</span>
<span class="nx">pesudos</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span> <span class="c1">//意思小于b</span>
<span class="nx">name</span><span class="o">:</span><span class="s2">"not"</span><span class="p">,</span>
<span class="nx">param</span><span class="o">:</span><span class="s2">":nth-child("</span> <span class="o">+</span> <span class="p">(</span><span class="nx">b</span><span class="o">+</span><span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="s2">")"</span>
<span class="p">})</span>
<span class="p">}</span><span class="k">else</span><span class="p">{</span>
<span class="nx">pesudos</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span>
<span class="nx">name</span><span class="o">:</span><span class="s2">"nth-last-child"</span><span class="p">,</span>
<span class="nx">param</span><span class="o">:</span><span class="p">{</span><span class="nx">start</span><span class="o">:</span><span class="nx">b</span><span class="o">?-</span><span class="nx">b</span><span class="o">:</span><span class="mi">1</span><span class="p">,</span> <span class="nx">step</span><span class="o">:</span><span class="mi">1</span> <span class="p">}</span>
<span class="p">})</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">})</span>
</pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>你也可以不写action.什么意思呢，就是我们可以很方边的去添加我们想要的选择器，
以后可能可以实现</p> </td> <td class="code"> <div class="highlight"><pre>
<span class="nx">nes</span><span class="p">.</span><span class="nx">parser</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">"pesudoElement"</span><span class="p">,{</span>
<span class="nx">reg</span><span class="o">:</span> <span class="sr">/::(\w+)/</span><span class="p">,</span>
<span class="nx">action</span><span class="o">:</span><span class="kd">function</span><span class="p">(</span><span class="nx">all</span><span class="p">,</span> <span class="nx">name</span><span class="p">){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">current</span><span class="p">().</span><span class="nx">pesudoElement</span> <span class="o">=</span> <span class="nx">name</span>
<span class="p">},</span>
<span class="nx">filter</span><span class="o">:</span><span class="kd">function</span><span class="p">(</span><span class="nx">node</span><span class="p">,</span> <span class="nx">args</span><span class="p">){</span>
</pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>我们随机返回是否通过</p> </td> <td class="code"> <div class="highlight"><pre>
<span class="k">return</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="o">></span><span class="mf">0.5</span>
<span class="p">}</span>
<span class="p">})</span>
</pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>你也两个都写</p> </td> <td class="code"> <div class="highlight"><pre>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>