Babylon-AST初探-代码更新删除(Update Remove)

  通过前两篇文章的介绍,大家已经了解了CreateRetrieve,我们接着介绍UpdateRemove操作。Update操作通常配合Create来完成。我们这篇文章主要介绍几个常用的NodePath`APIreplaceinsertremove`。具体也可以看babel-handbook中的Manipulation章节。

replaceWith 使用新的节点进行替换

将加法运算替换成乘法

const code = `const c = a + b`
const ast = babylon.parse(code)traverse(ast, {BinaryExpression(path) {// 注意这里要有判断,否则会无限进入`BinaryExpression`// https://stackoverflow.com/questions/37539432/babel-maximum-call-stack-size-exceeded-while-using-path-replacewithif (path.node.operator === '+') {path.replaceWith(t.binaryExpression('*', path.node.left, path.node.right))}}
})console.log(generate(ast, {}, code).code) // const c = a * b;

this.count替换为this.data.count

  转换前后的AST展示如下图:

图片描述

  我们需要做的是,找到符合this.countThisExpression,然后把它替换为this.data

const code = `this.count`
const ast = babylon.parse(code)traverse(ast, {MemberExpression(path) {if (t.isThisExpression(path.node.object) &&t.isIdentifier(path.node.property, {name: 'count'})) {path.get('object')    // 获取`ThisExpresssion`.replaceWith(t.memberExpression(t.thisExpression(), t.identifier('data')))}}
})
console.log(generate(ast, {}, code).code) // this.data.count;

replaceWithSourceString 直接使用代码替换

  上个例子中将this.count替换为this.data.count的部分,通过t.memberExpression可以构造node。更简单的操作可以直接使用replaceWithSourceString,个人觉得这个API很好用。

path.get('object').replaceWithSourceString('this.data')

插入操作

  插入是树操作的一种常见操作。子节点是个Array,前、中、后各种位置都可以插入新节点。下面来介绍下pushContainerunshiftContainerinsertBeforeinsertAfter操作。

  这里以给obj对象新增一个属性myprop: 'hello my property'为例:

const code = `
const obj = {count: 0,message: 'hello world'
}
`
const ast = babylon.parse(code)const property = t.objectProperty(t.identifier('myprop'),t.stringLiteral('hello my property')
)

pushContainer 父节点的操作

  父节点为子节点Array插入一个node

traverse(ast, {ObjectExpression(path) {path.pushContainer('properties', property)}
})

insertAfter 兄弟节点的操作

  insertAfter也可以完成上述操作,需要找到message属性,然后在后面插入node就搞定啦

traverse(ast, {ObjectProperty(path) {if (t.isIdentifier(path.node.key, {name: 'message'})) {path.insertAfter(property)}}
})

  unshiftContainerinsertBefore与上面两个相对应,这里不再举例了,大家可以自己试一试。

  因为properties是个数组,因此,我们可以直接使用数组操作

traverse(ast, {ObjectExpression(path) {// path.pushContainer('properties', property)path.node.properties.push(property)}
})

Remove 自我毁灭

  Remove方法极为简单,找到要删除的NodePath,执行Remove就结束了。如上述代码,我们要删除message属性,代码如下:

traverse(ast, {ObjectProperty(path) {if (t.isIdentifier(path.node.key, {name: 'message'})) {path.remove()}}
})

到目前为止,AST的CURD我们都介绍完了,下面一篇文章以vue小程序为例,我们来实战一波。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/538538.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python中时间间隔默认单位是什么_Python时间增量(以年为单位)

你需要不止一个timedelta来说明多少年过去了;你还需要知道开始(或结束)日期。(这是闰年的事。)最好的方法是使用dateutil.relativedeltaobject,但这是第三方模块。如果您想知道从某个日期起的datetime年(默认为现在),可以执行以下操作&#x…

编解码异常分析

前言 最近在做的项目,有H264解码的需求。部分H264文件解码播放后,显示为绿屏或者花屏。 分析 如何确认是否是高通硬解码的问题 adb 指令 adb root adb remount adb shell setenforce 0 adb shell setprop vendor.gralloc.disable_ubwc 1 adb shell c…

python读取数据库导出文件_python如何导出excel表格数据库数据

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里云数据库专家保驾护航,为用户…

mysql堆溢出_为什么这个MySQL触发器会导致堆栈溢出?

我今天遇到了同样的问题,每次触发都会导致堆栈溢出.原来我的Zend社区服务器安装附带了一个默认的my.cnf文件,其中thread_stack大小设置为128K,这导致每个线程中可用于堆栈的131072字节:mysql> show variables where Variable_name thread_stack;---------------…

MySQL定义数据库对象之指定definer

mysql创建view、trigger、function、procedure、event时都会定义一个Definer: SQL SECURITY 有两个选项,一个为DEFINER,一个为INVOKER;SQL SECURITY { DEFINER | INVOKER } :指明谁有权限来执行。DEFINER 表示按定义者拥有的权限来…

js根据name获取value_js 函数的重载

js 函数的重载我们知道,很多编程语言都有函数的重载。所谓的重载,看定义:重载,简单说,就是函数或者方法有相同的名称,但是参数列表不相同的情形,这样的同名不同参数的函数或者方法之间&#xff…

python调用菜单响应事件_[Python] wxpython 编程触发菜单或按钮事件

最近逐步熟悉wxpython,编写了几个小小功能的GUI程序,GUI中免不了会有在代码中触发控件事件的业务需求。在其他Gui界面的语言中有postevent、triggerevent 调用事件名称的函数,非常方便。在wxpython里如何解决呢,上一段简单的代码。…

Angular CLI 使用教程指南参考

原文链接:http://www.cnblogs.com/bh4lm/p/6638057.html 点击阅读原文 ----------------------------------------------- Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装…

存储过程循环遍历一个月的每一天的函数_JavaScript 循环:如何处理 async/await

同步循环很久以前我写的循环是这样的:后来 JavaScript 提供了很多新的特性,现在我们会更倾向于用下面这种写法:在开发过程可能会有这么一种需求,我们需要在循环中异步处理 item,那么可以怎么做呢?异步循环如…

Angular程序架构

component,组件是Angular应用的基本构建块,你可以把一个组件理解为一段带有业务逻辑和数据的html。组件下面可以有子组件,子组件下有孙子组件,像树一样。指令:允许你向html元素添加自定义行为。模块Ngmodule&#xff1…

sqllite能连接mysql_SQLLite 可以通过SQL语言来访问的文件型SQL数据库

Web Storage分为两类:- sessionStorage:数据保存在session 对象中(临时)- localStorage:数据保存在本地硬件设备中(永久)sessionStorage:保存数据的两种方法:sessionStorage.setItem(key,val);sessionStorage.key val;读取数据的…

迭代器模式(Iterator)

迭代器模式 一. 迭代器模式 1.1 定义 提供一种方法顺序访问一个集合对象中的各种元素,而又不暴露该对象的内部表示.1.2 角色 抽象迭代器接口(Iterator).具体迭代器(ConcreteIterator).抽象聚合接口(Aggrega…

Angular启动过程介绍

1、启动时加载了哪个页面?2、启动时加载了哪些脚本?3、这些脚本做了什么事?打开Angular的命令行文件.angular-cli.json。apps节点下面。首先加载 index.html 页面。此时浏览器显示index.html的内容。再加载main.ts脚本"apps": [{..…

python解压打开文件过多_在python中使用zipfile压缩文件时层级很多,有很多层目录...

如下图本来只压缩一个文件结果这个文件所在的路径全都被压缩进去啦下面是解决方法yadirD:/databak/zipfilepathD:/zipfile.zipfilelists os.listdir(yadi)if filelists None or len(filelists) print (">>>>>>待压缩的文件目录:" ya…

易语言python1.1模块_易语言之编写模块与引入模块

本人并不精通易语言,只是对其进行一定了解后做一个简单的总结。直接新建一个易语言模块,然后添加子程序即可。子程序当然可以随意命名,实际上,易语言的子程序就和c语言的函数,java中的方法一样(实际上,java…

spring boot开发笔记——mybatis

概述 mybatis框架的优点,就不用多说了,今天这边干货主要讲mybatis的逆向工程,以及springboot的集成技巧,和分页的使用 因为在日常的开发中,当碰到特殊需求之类会手动写一下sql语句,大部分的时候完全可以用m…

Angular项目目录介绍

通过 ng new 项目名生成的项目 一级目录 Angular cli 工具生成的目录文件名不要随意修改,要不然会影响工具的使用。e2e:端到端的测试目录,用来做自动测试的。node_modules:Angular第三方包。src:应用源代码目录&#…

jvm内存模型_四种视角看JVM内存模型

1.JVM运行视角程序计数器Java虚拟机栈本地方法栈Java堆方法区1 .程序计数器程序计数器是一块较小的内存空间,它可以看作是当前线程所执行的行号指示器。这个计数器记录的是正在执行的虚拟机字节码指令的地址。此内存区域是唯一一个在JAVA虚拟机规范中没有规定任何Ou…

linux mysql失败_linux下登陆mysql失败

标签:一.提示由于没有密码,拒绝登陆ERROR 1045 (28000): Access denied for user ‘root‘‘localhost‘ (using password: NO)1.关闭mysql# service mysqld stop2.屏蔽权限# mysqld_safe --skip-grant-table屏幕出现: Starting demo from ..…

Tomcat服务脚本

为什么80%的码农都做不了架构师?>>> #!/bin/bash ### BEGIN INIT INFO # Provides: tomcat # Required-Start: $remote_fs $syslog # Required-Stop: $remote_fs $syslog # Default-Start: 2 3 4 5 # Default-Stop: 0 1 6 # S…