Какую функцию вызывает эта jsaction?

Question

Я пытаюсь определить путь, по которому Google Drive загружает содержимое своей папки, от двойного щелчка по имени папки до момента загрузки содержимого этой папки.

Я заметил, что Google использует что-то вроде:

<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 ^ для обработки / отправки событий.

google / jsaction > README.md

JsAction - это крошечная библиотека делегирования событий, которая позволяет отделить узлы DOM, на которых происходит действие, от кода JavaScript, который обрабатывает действие.

Традиционным способом добавления обработчика событий является получение ссылки на узел и добавление обработчика событий к нему. JsAction позволяет нам сопоставлять события и имена обработчиков для этих событий с помощью пользовательского атрибута HTML, называемого jsaction.

Отдельно, JavaScript код регистрирует обработчики событий с заданными именами, которые не нужно раскрывать глобально. Когда происходит событие, имя действия сопоставляется с соответствующим обработчиком, который выполняется.

Наконец, JsAction отсоединяет обработку событий от реальных реализаций. Таким образом, можно позднее загрузить реализации, в то время как приложение всегда может реагировать на действия пользователя, отмеченные с помощью JsAction. Это может помочь значительно сократить время загрузки страницы, в частности, для приложений, отображаемых на стороне сервера.

Базовая c настройка 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:

• Пример события 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>

• Наконец, давайте посмотрим, как мы можем прикрепить несколько событий ,

// 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('click');
eventContract.addEvent('mouseover');
eventContract.addEvent('mouseout');

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

// Register individual handlers

const click = function(flow) {
  // do stuff
  console.log('click called!');
};

const mouseOver = function(flow) {
  // do stuff
  console.log('mouseover called!');
};

const mouseOut = function(flow) {
  // do stuff
  console.log('mouseout called!');
};

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

<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;mouseover:leftNav.mouseOverAction;mouseout:leftNav.mouseOutAction">
    some content here
  </div>
</div>

Вот полный список событий в jsaction, в которых большинство из них являются css событиями

_{^: сокращение от "google-developers";)}

Answer 2

Нажмите Ctrl + Shift + I , чтобы открыть инспектор, а затем Ctrl + Shift + F , чтобы найти все исходные файлы, используемые на странице. Ищите «FNFY6 c» или любую другую ссылку. Нажмите маленький значок {} в левом нижнем углу, чтобы красиво напечатать код. У вас должно быть несколько хороших начальных точек для размещения точек останова в коде и начала отслеживания функции, которую вы сейчас ищете.

Я догадался, что они используют обработчики dblclick для document.body, поэтому я использовал getEventListeners(document.body) чтобы найти обработчик события. Я поставил условную проверку точки останова c.type == 'dblclick', чтобы получить точку останова. Он переходит на go в слушатель и в конечном итоге отправляет событие «активность» и продолжается.

Я не уверен, кто вы в надежде достичь, но даже при высоком уровне реверсирующих способностей вам, скорее всего, будет трудно получить что-то значимое из этого. Вывод кода использует очень агрессивно запутанный код с помощью Google Closure Compiler, который заходит так далеко, что извлекает ссылочные имена в строках. Вы будете копаться в очень запутанном коде без идентифицируемых имен.

Если вы заинтересованы в реверсе и делать это для удовольствия, удачи. Просто я не ожидал бы слишком многого без большого количества времени и практики. Вероятно, даже после большого количества времени и практики.