这个 jsaction 调用了哪个函数？

Question

我试图找出谷歌驱动器加载其文件夹内容的路径，从双击文件夹名称到加载该文件夹内容的位置。

我注意到谷歌使用类似的东西：

<div jsaction="click:cOuCgd; contextmenu:mg9Pef; dblclick:FNFY6c; focus:AHmuwe" jsname="LvFR7c" role="row" tabindex="0" aria-selected="false" aria-disabled="false">

有什么作用dblclick:FNFY6c？是FNFY6c函数吗？这整个过程是如何运作的？我一直在尝试使用 Chromes DevTools 来弄清楚这是如何工作的，但似乎找不到FNFY6c任何地方。

我如何知道dblclick:FNFY6c单击时接下来会发生什么？

Answer 1

JsAction 不仅仅是一个属性，它是一个用于处理/调度事件的完整的 google-d ^库。

谷歌/jsaction > README.md

JsAction 是一个小型事件委托库，它允许将发生动作的 DOM 节点与处理动作的 JavaScript 代码分离。

添加事件处理程序的传统方法是获取对节点的引用并向其添加事件处理程序。JsAction 允许我们通过称为 jsaction 的自定义 HTML 属性在事件和这些事件的处理程序名称之间进行映射。

另外，JavaScript 代码使用给定名称注册不需要全局公开的事件处理程序。当一个事件发生时，动作的名称被映射到相应的被执行的处理程序。

最后，JsAction 将事件处理与实际实现分离。因此，人们可能会延迟加载实现，而应用程序始终能够响应通过 JsAction 标记的用户操作。这有助于大大减少页面加载时间，特别是对于服务器端呈现的应用程序。

jsaction的基本设置是这样的，

HTML

<script src="https://www.gstatic.com/jsaction/contract.js"></script>
<script src="https://www.gstatic.com/jsaction/dispatcher.js" ></script>

<div id="foo" 
  jsaction="leftNav.clickAction;dblclick:leftNav.doubleClickAction"> 
some content here </div>

JavaScript

const eventContract = new jsaction.EventContract();

// Events will be handled for all elements under this container.
eventContract.addContainer(document.getElementById('container'));

// Register the event types we care about.
eventContract.addEvent('click');

const dispatcher = new jsaction.Dispatcher();
eventContract.dispatchTo(dispatcher.dispatch.bind(dispatcher));

// Register individual handlers

const click = function(flow) {
  // do stuff
  alert('click event dispatched!');
};

dispatcher.registerHandlers(
  'leftNav', // the namespace
  null, // handler object
  { // action map
    'clickAction': click
  });

让我们举一些关于 jsaction 的例子：

• 点击事件的例子，

<script src="https://www.gstatic.com/jsaction/contract.js"></script>
<script src="https://www.gstatic.com/jsaction/dispatcher.js" ></script>

<div id="foo" 
  jsaction="leftNav.clickAction;dblclick:leftNav.doubleClickAction"> 
some content here </div>

const eventContract = new jsaction.EventContract();

// Events will be handled for all elements under this container.
eventContract.addContainer(document.getElementById('container'));

// Register the event types we care about.
eventContract.addEvent('click');

const dispatcher = new jsaction.Dispatcher();
eventContract.dispatchTo(dispatcher.dispatch.bind(dispatcher));

// Register individual handlers

const click = function(flow) {
  // do stuff
  alert('click event dispatched!');
};

dispatcher.registerHandlers(
  'leftNav', // the namespace
  null, // handler object
  { // action map
    'clickAction': click
  });

• 双击事件示例，

// A BASIC SETUP --- JSACTION

const eventContract = new jsaction.EventContract();

// Events will be handled for all elements under this container.
eventContract.addContainer(document.getElementById('container'));

// Register the event types we care about.
eventContract.addEvent('click');

const dispatcher = new jsaction.Dispatcher();
eventContract.dispatchTo(dispatcher.dispatch.bind(dispatcher));

// Register individual handlers

const click = function(flow) {
  // do stuff
  alert('click event dispatched!');
};

dispatcher.registerHandlers(
  'leftNav', // the namespace
  null, // handler object
  { // action map
    'clickAction': click
  });

<script src="https://www.gstatic.com/jsaction/contract.js"></script>
<script src="https://www.gstatic.com/jsaction/dispatcher.js" ></script>

<div id="container">
  <div id="foo" jsaction="click:leftNav.clickAction">
    some content here
  </div>
</div>

• 最后，让我们看看如何附加多个事件，

// Set up

const eventContract = new jsaction.EventContract();

// Events will be handled for all elements under this container.
eventContract.addContainer(document.getElementById('container'));

// Register the event types we care about.
eventContract.addEvent('dblclick');

const dispatcher = new jsaction.Dispatcher();
eventContract.dispatchTo(dispatcher.dispatch.bind(dispatcher));

// Register individual handlers

const dbClick = function(flow) {
  // do stuff
  alert('double-click event dispatched!');
};

dispatcher.registerHandlers(
  'leftNav', // the namespace
  null, // handler object
  { // action map
    'doubleClickAction': dbClick
  });

<script src="https://www.gstatic.com/jsaction/contract.js"></script>
<script src="https://www.gstatic.com/jsaction/dispatcher.js" ></script>

<div id="container">
  <div id="foo" jsaction="dblclick:leftNav.doubleClickAction">
    some content here
  </div>
</div>

这里是jsaction中事件的完整列表，其中大部分是css-events。

_{^： “谷歌开发”的缩写；)}

Answer 2

按Ctrl+Shift+I打开检查器，然后按Ctrl+Shift+F搜索页面中使用的所有源文件。搜索“FNFY6c”或任何其他参考文献。{}单击左下角的小图标可以漂亮地打印代码。您应该有一些好的起点来在代码中放置断点并开始跟踪您现在正在寻找的函数。

我猜测他们正在使用dblclick处理程序document.body，所以我用来getEventListeners(document.body)查找事件处理程序。我设置了一个条件断点检查c.type == 'dblclick'来获取断点。它继续进入侦听器并最终调度“活动”事件并继续。

我不确定您希望实现什么，但即使具有高水平的逆转能力，您也很可能很难从中获得有意义的东西。代码输出通过 Google Closure Compiler 使用非常积极的混淆代码，甚至在字符串中合并引用名称。您将挖掘非常复杂的代码，基本上没有可识别的名称。

如果您有兴趣逆转并以此为乐，祝您好运。只是如果没有大量的时间和练习，我不会期望太多。可能即使经过大量时间和练习。