本文章中所有内容仅供学习交流,不可用于任何商业用途和非法用途,否则后果自负,如有侵权,请联系作者立即删除!
在写了很多插件之后,总结出了一个插件编写的规律,有如下两种:
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 :
看到它的 Aliases 有这么几个标签,考虑到上面的判断都与For有关,因此,尝试点击 For:
刚好覆盖了这三个节点,再看上面的 JavaScript,是一个判断:
t.isFor(node);
我们知道判断节点有两种常用的方式,t.isXXX 和 path.isXXX.
因此,最开始的代码可以直接简写为:
if (parentPath.parentPath && parentPath.parentPath.isFor())
{
return;
}
这样就大大的减少了代码的判断,简直不要太方便,你还可以通过这种办法来对你的插件进行判断的改写。
今天的文章就分享到这里,后续分享更多的技巧,敬请期待。