javascript - 禅编码 : ability to ascend the DOM tree using ^

Question

我 fork 了优秀的 zen-coding 项目，想用 ^ 实现 DOM 提升 - 所以你可以这样做:

html>head>title^body>h1 而不是 html>(head>title)+body>h1

最初我使用相当粗制滥造的正则表达式方法来实现。我现在已经使用@Jordan 的优秀答案实现了。我的fork is here

我还想知道的

是否存在我的函数返回错误值的情况？

Answer 1

免责声明:我从未使用过 zen-coding，这只是我第二次听说它，所以我不知道可能的问题是什么。也就是说，这似乎是一个可行的解决方案，或者至少非常接近于一个可行的解决方案。

我正在使用 Zen Coding for textarea v0.7.1为了这。如果您使用不同版本的代码库，则需要相应地调整这些说明。

一些评论者建议这不是正则表达式的工作，我同意。幸运的是，zen-coding 有自己的解析器实现，而且构建起来真的很容易!您需要在两个地方添加代码才能使其正常工作:

1. 将 ^ 字符添加到 isAllowedChar 函数中的 special_chars 变量(大约从 1694 行开始):

   function isAllowedChar(ch) {
       ...
       special_chars = '#.>+*:$-_!@[]()|^'; // Added ascension operator "^"
   

2. 处理 parse 函数的 switch 语句中的新运算符(大约从 1541 行开始):

   parse: function(abbr) {
       ...
       while (i < il) {
           ch = abbr.charAt(i);
           prev_ch = i ? abbr.charAt(i - 1) : '';
           switch (ch) {
               ...
               // YOUR CODE BELOW
               case '^': // Ascension operator
                   if (!text_lvl && !attr_lvl) {
                       dumpToken();
                       context = context.parent.parent.addChild();
                   } else {
                       token += ch;
                   }
                   break;
   

   以下是新代码功能的逐行分割:

   case '^':                         // Current character is ascension operator.
       if (!text_lvl && !attr_lvl) { // Don't apply in text/attributes.
           dumpToken();              // Operator signifies end of current token.
   
                                     // Shift context up two levels.
           context = context.parent.parent.addChild();
   
       } else {
           token += ch;              // Add char to token in text/attribute.
       }
       break;
   

上面的实现按预期工作，例如:

html>head>title^body
html:5>div#first>div.inner^div#second>div.inner
html:5>div>(div>div>div^div)^div*2
html:5>div>div>div^^div

毫无疑问，您会想要尝试一些更高级的真实测试用例。 Here's my modified source如果你想快速启动；用这个替换你的 zen_textarea.min.js 进行一些快速和肮脏的测试。

请注意，这只是将 DOM 提升了两层，并没有将前面的元素视为一个组，例如div>div^*3 不会像 (div>div)*3 那样工作。如果这是您想要的，那么请查看右括号字符的逻辑，它使用前瞻来检查乘法。 (就个人而言，我建议不要这样做，因为即使是缩写语法，它也非常难读。)