寫一個(gè) JS 調(diào)用?？梢暬ぞ?hound-trace

solocoder 發(fā)布于2019-08-26 10:48 / 3227人閱讀

摘要：背景最近在分析一些框架源碼，在寫筆記的時(shí)候，一些函數(shù)的調(diào)用棧希望用流程圖的形式記錄下來(lái)，打開(kāi)就是一頓操作，畫了幾個(gè)調(diào)用棧之后，感覺(jué)很麻煩。

背景

最近在分析一些框架源碼，在寫筆記的時(shí)候，一些函數(shù)的調(diào)用棧希望用流程圖的形式記錄下來(lái)，打開(kāi) http://draw.io 就是一頓操作，畫了幾個(gè)調(diào)用棧之后，感覺(jué)很麻煩。于是蹲在廁所里的我開(kāi)始思考了，調(diào)用棧既然可以用 console.trace() 打印出來(lái)，那是不是也可以把數(shù)據(jù)記錄下來(lái)直接畫出流程圖來(lái)？

當(dāng)然我從不喜歡造輪子，首先熟練的打開(kāi) google 操作一波，發(fā)現(xiàn)地球之大，竟然沒(méi)有我想要的工具？沒(méi)有 JS 調(diào)用?？梢暬ぞ撸吭趺崔k？在繼續(xù)用 draw.io 手畫和自己造輪子之間我陷入了深思。

當(dāng)然我最后選擇了造輪子，不然就沒(méi)有這篇文章了。

輪子長(zhǎng)這樣 —> hound-trace <--

比如說(shuō)有這樣一份代碼：

// 輪子
import houndTrace from "hound-trace-ui";

function f() {}

function e() {}

function d() { f() }

const b = () => { d(); e() };

const c = function () { d() };

function a() { b(); c() }

houndTrace.start();
a();
houndTrace.end();

可視化輸出:

造輪子的過(guò)程

### 首先要取個(gè)酷炫的名字

代碼寫的好不好，工具好不好用，不重要，一定要有酷炫的名字，那就是 hound-trace ，看這個(gè)谷歌翻譯出來(lái)的名字多么清新脫俗，光芒四射。

怎么去拿調(diào)用棧信息？

首先想到的是能不能在函數(shù)調(diào)用前后做點(diǎn)什么？作為 21 世紀(jì)的程序員，下手前當(dāng)然是先 google 和 stackoverflow 一波，看看能不能輕輕松松當(dāng)個(gè)搬運(yùn)工。逛了半天，靠譜的答案似乎有這些：

// 偷天換日大法
var old = UIIntentionalStream.instance.loadOlderPosts;
UIIntentionalStream.instance.loadOlderPosts = function() {
    // hook before call
    old();
    // hook after call
};


// 原型拓展大法
Function.prototype.before = function (callback) {
    var that = this;
    return (function() {
        callback.apply(this, arguments);
        return (that.apply(this, arguments));
    });
}

Function.prototype.after = function (callback) {
    var that = this;
    return (function() {
        var result = that.apply(this, arguments);
        callback.apply(this, arguments);
        return (result);
    });
}

var both = test.before(function(a) {
    console.log("Before. Parameter = ", a);
}).after(function(a) {
    console.log("After. Parameter = ", a);
});
both(17);

看起來(lái)不錯(cuò)，可是這，我要是看個(gè) react 源碼，想拿到調(diào)用棧信息。函數(shù)調(diào)用豈不都要重寫個(gè)遍？不靠譜，還不如去手畫呢。

找啊找啊找，靈光一閃？AST。運(yùn)行的時(shí)候不行，直接改代碼不就完了。就這么干？于是就寫了個(gè) babel 插件，在代碼里下點(diǎn)毒。babel-plugin-hound-trace 這個(gè)插件干啥呢？

// ...
module.exports = function (babel) {

    return {
        visitor: {
              // 在我們的代碼里面遇到函數(shù)聲明語(yǔ)句,函數(shù)表達(dá)式，箭頭函數(shù)表達(dá)式的時(shí)候
            // 該插件會(huì)注入一些代碼
            FunctionDeclaration: (path) => {
                // ...    
            },
            FunctionExpression: expressionHandle.bind(null, babel),
            ArrowFunctionExpression: expressionHandle.bind(null, babel)
        }
    };
};
// ...

比如源碼里的函數(shù)如下：

function test(a, b, c) {
    const cj = "cj";
}

下毒之后（經(jīng)過(guò)這個(gè)插件處理之后）：

function test(a, b, c) {
  let __traceParent__ = window.__traceParent__;
  let __traceOldParent__ = __traceParent__;

  if (window.__trace__) {
    if (!__traceParent__.next) {
      __traceParent__.next = [];
    }

    const current = {
      name: "test",
      params: ["a", "b", "c"]
    };

    __traceParent__.next.push(current);

    window.__traceParent__ = current;
  }

  const cj = "cj";
  window.__traceParent__ = __traceOldParent__;
}

注入的代碼比較奇怪，因?yàn)閷?shí)現(xiàn)的思路是借助 window 上的全局變量來(lái)做這個(gè)事情，所以看起來(lái)奇怪。（暫時(shí)還沒(méi)想其它好方法）

注入了代碼之后就簡(jiǎn)單了，可以看到代碼里注入了 window.__trace__ 這個(gè)變量用于是否記錄該函數(shù)，所以 hound-trace 包的代碼就自然出來(lái)了：

let trace = false;

// 開(kāi)始記錄調(diào)用棧
function __NoTraceHook__start() {
    if (trace) { return }

    window.__trace__ = trace = true;

    window.__traceParent__ = {};
}

// 結(jié)束記錄調(diào)用棧
function __NoTraceHook__end(callback) {
    if (!trace) { return }

    window.__trace__ = trace = false;

    callback && callback(window.__traceParent__);
}

export default {
    start: __NoTraceHook__start,
    end: __NoTraceHook__end
};

到這里，就差可視化渲染了，考慮到 UI 層是比較個(gè)性的，所以又拆了個(gè)包出來(lái) hound-trace-ui 底層調(diào)用 hound-trace 的 API ，這樣以后就能隨意加皮膚了。

hound-trace-ui 其實(shí)很簡(jiǎn)單，就是在 __NoTraceHook__end 的回調(diào)里可以拿到調(diào)用棧的數(shù)據(jù)，然后怎么用這個(gè)數(shù)據(jù)就隨意了，這個(gè)包里使用的是 mermaid 做可視化（因?yàn)楹?jiǎn)單）:

// 調(diào)用 hound-trace 包代碼
import houndTrace from "../../hound-trace/src/index";
// 渲染數(shù)據(jù)邏輯
import renderCallStack from "./renderCallStack";

import "./index.css";


function start() {
    houndTrace.start();
}

// 包裝底層 API
function end() {
    houndTrace.end(callStack => {
        setTimeout(() => {
              // 調(diào)用 mermaid 包渲染數(shù)據(jù)
            renderCallStack(callStack);
        }, 14);
    });
}

export default {
    start,
    end,
    endAndRenderCallStack: end
};

好吧，就這樣世界上又多了一個(gè)輪子。

感興趣的可以去 star ，當(dāng)然更希望大家給出奇淫技巧一起完善?！? hound-trace <--

GPU云服務(wù)器云服務(wù)器 JS調(diào)用棧 JS調(diào)用棧機(jī)制 js寫一個(gè)乘法 js 寫一個(gè)組合算法

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106801.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

solocoder

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Assassin暗殺者-自用短小精悍的webshell管理工具分享

閱讀 2490·2021-11-24 09:39
bootstrap4.0 css架構(gòu)

閱讀 3531·2019-08-30 15:53
前端每日實(shí)戰(zhàn)：9# 視頻演示如何用純 CSS 創(chuàng)作一種按鈕被瞄準(zhǔn)的交互特效

閱讀 607·2019-08-29 15:15
對(duì)api請(qǐng)求封裝的探索和總結(jié)

閱讀 2912·2019-08-26 13:23
寫一個(gè) JS 調(diào)用?？梢暬ぞ?hound-trace

閱讀 3228·2019-08-26 10:48
vue單頁(yè)應(yīng)用的內(nèi)存泄露定位和修復(fù)（一）

閱讀 653·2019-08-26 10:31
2019前端秋季社招面試經(jīng)歷總結(jié)（三年經(jīng)驗(yàn)）

閱讀 779·2019-08-26 10:30
【Vue原理】Computed - 源碼版

閱讀 2373·2019-08-23 18:32

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

寫一個(gè) JS 調(diào)用?？梢暬ぞ?hound-trace

相關(guān)文章

「全棧初探」- Mongoose的簡(jiǎn)單使用

Node.js 究竟是什么？

PyCon China 深圳站精彩回顧（附PPT及視頻）

**JavaScript引擎是如何工作的？從調(diào)用棧到Promise你需要知道的一切**

前端人員必須知道的三個(gè)問(wèn)題

發(fā)表評(píng)論

0條評(píng)論

solocoder

男|高級(jí)講師

TA的文章

Assassin暗殺者-自用短小精悍的webshell管理工具分享

bootstrap4.0 css架構(gòu)

前端每日實(shí)戰(zhàn)：9# 視頻演示如何用純 CSS 創(chuàng)作一種按鈕被瞄準(zhǔn)的交互特效

對(duì)api請(qǐng)求封裝的探索和總結(jié)