詳解使用抽象語法樹AST實現(xiàn)一個AOP切面邏輯

更新時間：2023年04月06日 17:03:19 作者：頭疼腦脹的代碼搬運工

這篇文章主要為大家介紹了使用抽象語法樹AST實現(xiàn)一個AOP切面邏輯的簡單方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

開篇

AST 功能很靈活，可以通過改變一些自定義結構便可以輸入自定義的功能，下面簡單的展示下如何利用抽象語法樹AST實現(xiàn)一個AOP切面邏輯

一、實現(xiàn)目的

將 js 文件下的全部方法添加一個開始事件和一個結束事件并傳入方法名，以便監(jiān)聽某個方法的調用。

1、work.js

function eat(){
    let food = "apple"
    let time = '2小時'
    return '吃' + food + '用時' + time
}
function work(){
}
console.log(eat())

控制臺打印

可以看到，輸入了執(zhí)行 eat 方法的開始事件及結束事件。其實，這個過程就是 work.js 轉成語法樹后，對方法節(jié)點進行了處理，添加了兩個切面方法：start 和 end 事件。

2、aop.js

這個文件用來聲明 start 和 end 事件。

function start(funcName){
    console.log('開始執(zhí)行：' + funcName + '方法')
}
function end(funcName){
    console.log('執(zhí)行結束：' + funcName + '方法')
}

二、利用語法樹添加切面事件

//文件操作工具
const fs = require('fs');
//JS代碼轉語法樹工具
const parser = require('./babel-core/node_modules/babylon');
//語法樹遍歷工具
const traverse = require('./babel-core/node_modules/babel-traverse');
//語法樹轉JS代碼工具
const generator = require('./babel-core/node_modules/babel-generator');
//聲明語法樹類型工具
const t = require('./babel-core/node_modules/babel-types');
//獲取aop代碼
let aop = fs.readFileSync('./aop.js','utf-8')
//獲取需要添加切面的代碼
let content = fs.readFileSync('./work.js','utf-8')
//將需要添加切面的代碼轉換為語法樹
let ast = parser.parse(content,{
    sourceType:'script'
})
//遍歷指定語法樹時操作項（這里遍歷的指定節(jié)點是FunctionDeclaration方法）
const visitor = {
    FunctionDeclaration:({ node }) => {
        //獲取每個方法體里面的節(jié)點
        let funcBody = node.body.body
        //創(chuàng)建一個名為start,參數為當前方法名的執(zhí)行節(jié)點，后面的參數為創(chuàng)建一個名為start方法的參數
        let start = t.callExpression(t.identifier('start'), [t.identifier(`"${node.id.name}"`)])
        //添加到方法的最前面
        funcBody.unshift(start)
        //判斷最后一個節(jié)點是不是return，方式結束事件調用節(jié)點在最后無法調用。
        let lastNode = funcBody.slice(-1)
        //創(chuàng)建一個名為end,參數為當前方法名的執(zhí)行節(jié)點，后面的參數為end方法的參數
        let end = t.callExpression(t.identifier('end'), [t.identifier(`"${node.id.name}"`)])
        //設定end節(jié)點添加的位置
        let insertEndEventPosition = (funcBody.length)
        if(lastNode[0].type == 'ReturnStatement'){
            //放在return節(jié)點的前面
            insertEndEventPosition -= 1
        }
        //添加end節(jié)點
        funcBody.splice(insertEndEventPosition,0,end)
    }
}
//開始遍歷操作語法樹
traverse.default(ast,visitor)
//將處理完的語法樹再次轉換為JS代碼
let codeResult = generator.default(ast)
//這里需要添加aop里面的兩個切面事件到最終的JS代碼里。
let outFileCode = aop + '\n\n' + codeResult.code
// 寫入文件操作
fs.mkdir('cache',(err)=>{
    if(!err){
        fs.writeFile('cache/main.js',outFileCode,(err)=>{
            if(!err){
                console.log('文件創(chuàng)建完成')
            }
        })
    }
})

上面的代碼執(zhí)行完后，看下 main.js 生成的代碼內容。

function start(funcName){
    console.log('開始執(zhí)行：' + funcName + '方法')
}
function end(funcName){
    console.log('執(zhí)行結束：' + funcName + '方法')
}
function eat() {
    start("eat")
    let food = "apple";
    let time = '2小時';
    end("eat")
    return '吃' + food + '用時' + time;
}
function work() {
    start("work")
    end("work")
}
console.log(eat());

相比較之前的 work.js 文件，添加了兩個切面方法的同時，保證每個方法都添加了 start 及 end 事件。這樣再調用的時候便可直接在執(zhí)行前后操作其他任務了。