ПОШАГОВОЕ РУКОВОДСТВО

Создание приложения с помощью Electron.js - Часть 2

Подробное руководство по различным методам, используемым для доступа к элементам DOM в electronic.js

В предыдущей статье у нас был обзор того, что такое electronic.js и как настроить приложение, чтобы начать процесс разработки. Поэтому сегодня мы собираемся изучить различные методы доступа к элементам HTML DOM.

Вкратце, DOM, то есть объектная модель документа, является стандартом для изменения, добавления или удаления элементов HTML. В основном существует три метода доступа к элементам DOM, а именно:

  1. Использование модуля ipcRenderer и ipcMain файла electronics.js
  2. Использование webContents.executeJavaScript (код, userGesture)
  3. Использование тега скрипта в файле HTML

Метод 1. Использование тега скрипта

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

Согласно этому фрагменту, как только событие клика запускается, мы получаем доступ к тегу ‹p› ‹/p›, чтобы изменить его текст. Но этот подход не считается лучшим, потому что он делает наш код немного беспорядочным и нарушает стандарт разделения кода.

Метод 2: Использование webContents.executeJavaScript (код, [userGesture])

webContents - это тип EventEmitter, который отвечает за рендеринг и управление веб-страницей. Это свойство модуля BrowserWindow главного процесса. Он также содержит функцию executeJavaScript с двумя аргументами, а именно:

  1. код:, который принимает значение в формате строки, и
  2. userGesture: Это необязательный аргумент, значение по умолчанию которого равно false.

Аргумент code - это тот, который содержит значение кода javascript, содержащегося в кавычках, для преобразования его в строковый формат.

Примечание. Распространенная ошибка, с которой сталкиваются разработчики в этом методе, связана с интерполяцией строк, так как иногда мы пропускаем кавычки, т.е. неуместные открывающие и закрывающие кавычки.

Давайте посмотрим на следующий фрагмент кода, используемый для изменения значений элементов DOM.

Здесь код переменной указывает строковый формат кода javascript, заключенный в обратную кавычку или обратную кавычку (``). Чтобы использовать значение переменной, например «пользователь», мы можем интерполировать переменную в строке, используя $ {‹имя переменной›}.

Метод 3: Использование модуля ipcRenderer и ipcMain

IPC означает Межпроцессное взаимодействие. Поскольку процесс рендеринга отвечает за отображение пользовательского интерфейса, доступ к DOM в основном процессе невозможен, но модуль ipc присутствует как в основном процессе, так и в процессе рендеринга. Этот модуль обеспечивает связь между этими двумя процессами с помощью сообщений синхронизации / асинхронности.

  • ipcMain: помогает в обмене данными между основным процессом и процессом рендеринга. Он обрабатывает все синхронные и асинхронные сообщения, отправляемые процессом рендеринга.
  • ipcRenderer: это помогает в коммуникации от Renderer к основному процессу. Он определен и используется в процессах рендеринга. Он предоставляет возможность отправлять сообщения и получать сообщения от основного процесса, синхронно и асинхронно.

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

Итак, давайте посмотрим на фрагмент кода для использования модуля ipcRenderer.

Прежде всего, мы должны загрузить модуль ipcRenderer из электрона и через функцию send (channel,… args) передать информацию, где channel - это аргумент, имеющий строковый формат, а затем - различные значения параметров, которые мы хотим отправить. Эта функция может быть выполнена при возникновении события.

Чтобы получить сообщение от основного процесса, мы используем функцию ipcRenderer.on (channel, listener (event,… args)), где channel - строковая переменная, а событие указывает на некоторые ipcRendererEvent, а args указывает на параметры.

Мы можем включить это непосредственно в индексный файл или создать отдельный файл javascript (скажем, renderer.js) и добавить тег скрипта внизу файла HTML (скажем, index.html).

Ниже приведен фрагмент кода для модуля ipcMain.

Это пример кода для выполнения задачи, полученной от процесса рендеринга, и как только задача завершена, информация отправляется обратно процессу рендеринга.

Подводя итог, мы получили знания о доступе к элементам DOM с помощью различных методов, а также их реализации.

Если вы так далеко зашли в блог, похлопайте себя по плечу, знаете что? Ты восхитителен. Весь рабочий репозиторий доступен на GitHub.

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