检测用户界面单击操作/事件处理程序

Question

我正在尝试找出不同的方法，我们可以使用这些方法在 Knockoutjs 中检测点击操作并放置任何检测代码。我主要是希望检测单击操作处理程序所花费的时间。

我尝试了什么？

我尝试使用绑定处理程序上可用的 Preprocess 函数来挂钩绑定。我可以通过为特定绑定句柄提供绑定预处理器来挂钩 Knockout 解释数据绑定属性的逻辑。

所以，我修改函数引用以添加拦截代码。显然，在函数调用之前和之后添加代码。以下代码显示了该概念的工作版本。

ko.bindingHandlers.click.preprocess = function(value, name, addBindingCallback) {
           if (value.indexOf("function") > -1) {
              
                modifiedvalue = value.replace("function", "function __placeholderAnonymousFunction");
                // return value needs to be returned back, so that event bubble/Capture can be done correctly 
                modifiedvalue = modifiedvalue + "; var returnValue = __placeholderAnonymousFunction.apply($data, arguments); ";
            } else {
                // return value needs to be returned back, so that event bubble/Capture can be done correctly 
                modifiedvalue = "var returnValue = " + value + ".apply($data, arguments);";
            }

            var returnvalue = "function($data,$event){ " +
                "InterceptStart();"+
    				modifiedvalue +
                " ;InterceptEnd(); " +
                " return returnValue;" +
                " }";

            return returnvalue;
        }

var startTime;
var endTime;

function InterceptStart(){
  startTime = performance.now();
	console.log("start");
}

function InterceptEnd(){
  endTime = performance.now();
	console.log("end. Total time spent=" + (endTime - startTime));
}

var ViewModel = function() {
    var self = this;
    self.clickHandler = function() {
        console.log("in Click handler");
    };
    return self;
};
 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<button data-bind='click: clickHandler'>Intercept Me</button>

问题

1. 您是否发现上述代码存在任何可能的问题。它处理点击处理程序可以是函数引用、匿名函数、使用绑定调用的函数、应用的场景。在任何其他情况下它会失败吗？
2. 对于处理程序中的代码更新任何 UI 元素或更新任何绑定到 HTML 的 observable 的场景，是否可以挂钩到我可以在 UI 更新完成后调用的 knockoutjs 或 javascript 中的任何可用函数。 目的是捕获事件处理程序 + UI 更新所花费的时间。基本上，在单击操作完成后捕获脚本 + 渲染 + 绘制的时间。 我应该在requestAnimationFrame 或setTimeout 中添加代码，以便在绘制结束时执行代码。在淘汰赛组件绑定中类似于afterRender 的内容。
3. 是否有任何其他推荐方法可用于此类用例？

注意：对于涉及 XHR 交互的点击处理程序，我正在连接到 XMLHttpRequest，并且我已经有了相应的代码。因此，XHR 交互超出了这个问题的范围。

编辑 1： 我不是在寻找调试解决方案。这是为了检测函数调用并将数据发送到另一个应用程序。

Answer 1

对于这种用例，还有其他推荐方法吗？

我推荐的方法是使用浏览器的开发人员工具...它们提供您想要的东西：花在脚本编写（事件处理程序）、布局和绘画上的时间。

例如：（记录在knockout documentation page上）

• 黄色部分显示脚本时间。请注意 Run Microtasks 来自 deferred 更新（我认为您当前的代码不能解释这些...）
• 紫色部分是您的布局和样式更新
• 绿色部分是绘制更新后的 UI 的位置