qnn-object-ast-handle 代码文件中的js字面量对象操作插件

English | 简体中文

简介

安装

yarn add qnn-object-ast-handle | yarn i qnn-object-ast-handle

快速开始

// 从整个文件中查询出字面量对象ast代码推荐直接使用 gogocode 插件
const $ = require('gogocode');
const { getObjectAttr, setObjectAttr, delObjectAttr } = require('qnn-object-ast-handle');
// 假如这是从某个代码文件中读取出来的代码内容
const code = ` 
 window.configs = { 
 name:"test",
 obj:{
 wang:'hh',
 zong:{
 foo:11
 }
 },
 person:[ "王" ],
 personObj:[ { name:"王", age:24 } ]
 } 
`;
// ==== 需求1:修改 window.configs.obj.zong.foo 为 "张三" ==== 
// 拿到字面量对象 ast 节点
const matchs: any = $(code).find('window.configs = $_$');
const objectAst = matchs.match[0][0].node;
// 传入 ast 节点,修改属性。返回新的 ast 节点
const newObjectAst = setObjectAttr(objectAst, 'obj.zong.foo', "张三"); 
// 使用 gogocode 替换 ast 节点并且生成新的代码文件内容
const curAttrCodeStr: string = $(newObjectAst).generate(); 
const newCode = $(code).replace(`window.configs = $_$`, `${protoStr} = ${curAttrCodeStr}`).generate();
// 修改后的 code 如下
` 
 window.configs = { 
 name:"test",
 obj:{
 wang:'hh',
 zong:{
 foo:"张三"
 }
 },
 person:[ "王" ],
 personObj:[ { name:"王", age:24 } ]
 } 
`;
// ==== 需求2:要从一段代码文件中准确获取某个属性 ==== 
// 获取 ast 节点中的某个属性
const attrVal = getObjectAttr(objectAst, 'obj.zong.foo'); // 张三
// ==== 需求3:要从一段代码文件中准确删除某个属性 ==== 
const newObjectAstByDeled = delObjectAttr(objectAst, "name");
// 使用 gogocode 替换 ast 节点并且生成新的代码文件内容
const curAttrCodeStr: string = $(newObjectAstByDeled).generate(); 
const newCode = $(code).replace(`window.configs = $_$`, `${protoStr} = ${curAttrCodeStr}`).generate();

修改属性

// 修改指定的某一项属性
setObjectAttr(objectAst, "name", "hhh"); 
setObjectAttr(objectAst, "obj.zong", "张三");
setObjectAttr(objectAst, "obj.zong.foo", "张三");
// 修改指定的某一项属性为对象、数组
setObjectAttr(objectAst, "obj", { name: "张三" });
setObjectAttr(objectAst, "person", { name: "张三" });
setObjectAttr(objectAst, "person", ["李四"]); 
setObjectAttr(objectAst, "personObj.0.name","李四"); 

新增属性

// 指定属性新增
setObjectAttr(objectAst, "aaa", "wang");
setObjectAttr(objectAst, "aaa.bb", "wang");
setObjectAttr(objectAst, "aaa.bb.c", "wang"); 
// 新增字面量对象属性
setObjectAttr(objectAst, "info", { age: 1 }); 
setObjectAttr(objectAst, "info", { age: { one:"111" } }); 
setObjectAttr(objectAst, "info", { age: 1, other:{ one:"111" } }); 

新增数组类型属性

// 非对象类型的数组项新增
setObjectAttr(objectAst, "hob", ["吃饭", "睡觉"]); 
setObjectAttr(objectAst, "info", { detail: ["吃饭", "睡觉"] }); 
setObjectAttr(objectAst, "info.hob", ["吃饭", "睡觉"]); 
setObjectAttr(objectAst, "info.hob", { detail: ["吃饭", "睡觉"] }); 
// 对象类型数组项新增
setObjectAttr(objectAst, "info", [ { name: "吃饭", time: 1234568477711 } ]); 
setObjectAttr(objectAst, "info.list", [ { name: "吃饭", time: 1234568477711 } ]); 
setObjectAttr(objectAst, "info", {
 list: [ { name: "吃饭", time: 1234568477711 } ]
});
setObjectAttr(objectAst, "info", [
 [{ name: "吃饭", time: 1234568477711 }], [{ name: "睡觉", time: 1234568477711 }]
]);

获取整个字面量对象

const obj = getObjectAttr(objectAst); // { /.../ } 

获取指定的属性

const attrVal = getObjectAttr(objectAst, "person"); // [ "王" ]
const attrVal2 = getObjectAttr(objectAst, "personObj.0"); // { name:"王", age:24 }

删除指定的属性

// 传入 ast 节点,修改属性。返回新的 ast 节点
// 全部删除, 返回 null
const newObjectAst = delObjectAttr(objectAst);
// 删除某个属性 
const newObjectAst = delObjectAttr(objectAst, "name");
const newObjectAst = delObjectAttr(objectAst, "obj.wang");
const newObjectAst = delObjectAttr(objectAst, 'obj.zong');
const newObjectAst = delObjectAttr(objectAst, 'obj.zong.foo');
// 数组操作
const newObjectAst = delObjectAttr(objectAst, 'person');
const newObjectAst = delObjectAttr(objectAst, 'person.0');
const newObjectAst = delObjectAttr(objectAst, 'personObj.0.name');
const newObjectAst = delObjectAttr(objectAst, 'personObj.0.table.title');
console.log('delObjectAttr:', gogocode(newObjectAst).generate())

和 gogoCode 这类插件的区别?