AST基础知识|使用小技巧减少特定条件的判断

关注它,不迷路。

本文章中所有内容仅供学习交流,不可用于任何商业用途和非法用途,否则后果自负,如有侵权,请联系作者立即删除!

在写了很多插件之后,总结出了一个插件编写的规律,有如下两种:

1.遍历需要处理的path  -->  条件判断 -->  构造新新节点 --> 替换

2.遍历需要处理的path  -->  条件判断 -->  删除该节点

为什么需要条件判断,是为了防止处理了不应该处理的Path,导致插件运行后代码出错。就是为了让编写插件更稳健的运行,防止越界。

1. 简写对子节点的判断

大家在我的插件中,经常可以看到这样的写法:

if (!callExpress.isCallExpression(callee:referPath.node))
{
.........
}

有些刚学习的朋友看不懂这行代码的含义,它其实是一个简写,等价于:

if (!callExpress.isCallExpression() || callExpress.node.callee != referPath.node)
{
.........
}

这是对节点的属性做浅层检查,即当  callExpress 是 CallExpression 类型的时候,再进一步判断 它的 callee节点是否就是 referPath.node,两者是等价的,只不过前面一种更优雅更直观。

2. 简写对同类节点的判断

先看  varDeclarToFuncDeclar 插件:

const varDeclarToFuncDeclar = 
{
   VariableDeclarator(path)
   {
      let {node,parentPath,scope} = path;
      if (parentPath.parentPath && 
          parentPath.parentPath.isForStatement()   ||
          parentPath.parentPath.isForInStatement() ||
          parentPath.parentPath.isForOfStatement())
      {
         return;
      }
      let {id,init} = node;
      if (!types.isFunctionExpression(init,{id:null}))
      {
         return;
      }
      let {params,body} = init;
      let newNode = types.FunctionDeclaration(id,params,body);
      parentPath.replaceWith(newNode);
      scope.crawl();
   },
}

它是将下面的代码:

var add = function (a,b)
{
  return a + b;
}

改写成:

function add(a,b)
{
  return a + b;
}

这样的改写是方便统一处理,如果不加第一个if判断,在遍历时可能会报错,因此需要过滤掉for循环父节点。这里的判断是这么写的:

if (parentPath.parentPath && 
    parentPath.parentPath.isForStatement()   ||
    parentPath.parentPath.isForInStatement() ||
    parentPath.parentPath.isForOfStatement())
{
   return;
}

上面的判断过于繁琐,你一定会想,有没有办法只判断它的for循环,不用管它是怎样的节点?

打开下面这个网站:

https://babeljs.io/docs/en/babel-types

搜索  ForStatement :

31a355b8db0acb90732c1a6f09915a60.png

看到它的 Aliases 有这么几个标签,考虑到上面的判断都与For有关,因此,尝试点击 For:

37f90ba7ee3c1937cb2350f2c67ce055.png

刚好覆盖了这三个节点,再看上面的 JavaScript,是一个判断:

t.isFor(node);

我们知道判断节点有两种常用的方式,t.isXXX 和 path.isXXX.

因此,最开始的代码可以直接简写为:

if (parentPath.parentPath && parentPath.parentPath.isFor())
{
   return;
}

这样就大大的减少了代码的判断,简直不要太方便,你还可以通过这种办法来对你的插件进行判断的改写。

今天的文章就分享到这里,后续分享更多的技巧,敬请期待。

4ede1c0b9237fdaf53935955357ad6ec.jpeg

欢迎加入知识星球,学习更多AST和爬虫技巧。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值