请选择 进入手机版 | 继续访问电脑版
通过前两篇文章的介绍,大家已经了解了Create和Retrieve,我们接着介绍Update和 Remove操作。Update操作通常配合Create来完成。我们这篇文章主要介绍几个常用的NodePath``API:replace、insert、remove。具体也可以看babel-handbook中的Manipulation章节。
replaceWith 使用新的节点进行替换

将加法运算替换成乘法
  1. [/code][size=5]将this.count替换为this.data.count [/size]
  2.   转换前后的AST展示如下图:
  3. Babylon-AST初探-代码更新&删除(Update & Remove)-1.jpg
  4.   我们需要做的是,找到符合this.count的ThisExpression,然后把它替换为this.data
  5. [code]
复制代码
replaceWithSourceString 直接使用代码替换

  上个例子中将this.count替换为this.data.count的部分,通过t.memberExpression可以构造node。更简单的操作可以直接使用replaceWithSourceString,个人觉得这个API很好用。
  1. [/code][size=5][b]插入操作[/b][/size]
  2.   插入是树操作的一种常见操作。子节点是个Array,前、中、后各种位置都可以插入新节点。下面来介绍下pushContainer、unshiftContainer、insertBefore、insertAfter操作。
  3.   这里以给obj对象新增一个属性myprop: 'hello my property'为例:
  4. [code]
复制代码
pushContainer 父节点的操作

  父节点为子节点Array插入一个node
  1. [/code][size=5]insertAfter 兄弟节点的操作[/size]
  2. insertAfter也可以完成上述操作,需要找到message属性,然后在后面插入node就搞定啦
  3. [code]
复制代码
unshiftContainer和insertBefore与上面两个相对应,这里不再举例了,大家可以自己试一试。
  因为properties是个数组,因此,我们可以直接使用数组操作
  1. [/code][size=5][b]Remove 自我毁灭[/b][/size]
  2. Remove方法极为简单,找到要删除的NodePath,执行Remove就结束了。如上述代码,我们要删除message属性,代码如下:
  3. [code]
复制代码
到目前为止,AST的CURD我们都介绍完了,下面一篇文章以vue转小程序为例,我们来实战一波。
分享到 :
0 人收藏

2 个回复

倒序浏览
笑靥  高级会员 | 2018-11-9 09:35:23
接下来的呢!
唯他是命  高级会员 | 2018-11-9 09:35:23
就是需要这样的文章
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|翁笔

© 2001-2018 Wengbi.com

返回顶部