这款前端可视化代码执行工具，打残Js执行过程

一、款前工具页面

整个页面看起来是端可代码打残如此的朴素，包含三个区块：代码区块、视化操作区块、执行执行可视化区块，工具过程三个区块的款前功能如下所示：

1.代码区块

该部分主要负责编辑要执行的代码，特别注意，端可代码打残该工具不支持一些函数，视化例如：setTimeout、执行执行setInterval等，工具过程这部分确实是款前该平台需要进一步优化的点。

2.操作区块

操作区块主要负责代码的端可代码打残移动，First按钮将代码运行到开头;Last按钮将代码运行到末尾;Prev负责逐行将代码移动到上一步;Next负责逐行将代码移动到下一步。视化

3.可视化区块

可视化区块用来展示执行过程中的执行执行调用栈、相关变量以及对应的亿华云计算工具过程变量值。

image-20220504090946788.png

二、秒杀js关键技术点在

js中有很多晦涩难懂的关键技术点，例如变量对象、调用栈、代码执行过程等，下面用一段代码，并通过该工具可以更加直观的了解这些内容，从而降低理解成本。

var a = 10;

function f1() {

var b = 20;

return a + b;

}

function f2(e) {

var c = 30;

var d = f1();

function f2Child() {

return d * 2;

}

return c + d + e + f2Child();

}

f2(15);

1.变量对象

变量对象是一个与执行上下文相关的特殊对象，存储着上下文中声明的内容。按照执行上下文可划分为全局上下文中的变量对象和函数上下文中的对象，当执行到函数f2时，其变量对象中的三部分均得到创建：

创建arguments对象;检查function函数声明创建属性;检查变量声明创建属性。站群服务器

2.调用栈

当JavaScript执行全局代码的时候，会创建全局执行执行上下文(整个页面的生存周期内，全局执行上下文只有一份);在调用一个函数的时候会创建该函数的执行上下文(执行环境)。将多个执行上下文管理起来的就是调用栈(调用栈就是用来管理函数调用关系的一种数据结构),当函数运行到f2Child这个函数的时候，其调用栈是什么样子的呢?用该工具可以很好的进行展示。

3.代码执行过程

通过点击操作区块的按钮可看到可视化区域中的调用栈和变量对象在不断变化，从而可以清晰了解整个代码执行过程。

可视化工具.gif

网站模板