Какстомный парсер цвета строки?

чтобы что получить на выходе?

Как правильно вызывать функцию?

т.е. держите все функции для всех страниц в едином файле?
Почему бы не подгружать на каждую страницу только нужные ей функции?

Как реализовать ООП на VUE?

Дмитрий, ага, понял.
Можно разделить так:
Простой объект с WebSocket соединением – он может соединится, а может нет.
Если соединился — его класть в массив, из которого он реактивно попадает в созданный для него инстанс Компонента. Это уже вот карточка со всей логикой управления.
Компонент-Карточка получает через props объект WS с установленным соединением и работает с ним.

Как реализовать ООП на VUE?

Дмитрий, нашли сокет – положили инстанс объекта в массив в data.
В темплейте у вас цикл, который для каждого элемента массива рендерит инстанс Компонента.
Объект передаёте в Компонент через props.

Как реализовать ООП на VUE?

Дмитрий, ответ: компоненты.

Как реализовать ООП на VUE?

Дмитрий, не понял, для чего нужен массив-массивов (список-списков), если вроде бы, задача одного списка. Не 50 листов, а 50 задач в одном листе. Не?

Как реализовать ООП на VUE?

Так идёт поиск открытых сокетов в сети в заданном диапазоне.
Процесс долгий, и можно показывать его сразу, динамически, по мере нахождения.
Вместо статичного массива found пихать прямо в data.found основного инстанса Vue.

Как реализовать ООП на VUE?

Дмитрий, с очередным сокетом вам же надо только понять, установилось ли соединение, или нет — и всё?
Я бы разделил задачи: Поиск сокетов и отображение.
Класс для поиска – при создании получает адрес-порт, которые пробовать, и коллбек, куда отдать результат. Хотя тут не нужен класс, больше подходит Promise:

const makePortScanner = (address, port) => new Promise((resolve, reject) => {
  const ws = new WebSocket(`ws://${address}:${port}`);
  ws.onopen = () => {
    ws.close();
    resolve([address, port]);
  };
  ws.onclose = () => {
    reject("no connection");
  }
});

const found = []; // сюда складывать найденные

// TODO: продумать логику пула задач,
// одновременно не более N параллельных попыток
for (let octet = 0x0; octet < 0xFF; octet++) { // не запускать так!
  for (let port = 1024; port < 9000; port++) {
    makePortScanner(`192.168.1.${octet}`, port)
      .then((pair) => found.push(pair))
      .catch((err) => void err)
      .finally(() => {
        // TODO: тут создаётся следующий Promise
      }
  }
}

Примерно так, только надо не сразу весь диапазон зарядить, а умно, не более 10 скажем одновременных — в finally() создавать следующую задачу.

Как реализовать ООП на VUE?

Дмитрий, вероятно, я не понял проблемы из вопроса. Что именно у вас не получается?
Создать класс – чего, какой сути приложения? Сложить инстансы класса в массив? Передать через пропсы Vue в компонент не примитив, а объект?

Как реализовать ООП на VUE?

Дмитрий, да как угодно. В вопросе не описаны детали. Допустим, сканируете все IP подсети и все порты. В цикле создаёте очередной инстанс класса, который создаёт новый WS и ломится по очередному адресу. Тикает таймаут, слушаются события. Если подключился - ура - нашли пару IP:port. Положили в массив в data. Отобразился ещё один элемент списка.

Как реализовать ООП на VUE?

создается инстанст класса CreateDataCard
в этом инстансе создается инстанс класса CreateViewCard

Для чего такая вложенность?

Как передать много текста на страницу и сохранить его в файл?

Александр Интересный, два утверждения про тело запроса, противоречащих друг другу.
Большой объем надо передавать в теле запроса POST / PUT запросом. Варианты только кодирования содержимого, чтобы оно правильно принялось сервером.

Как передать много текста на страницу и сохранить его в файл?

В теле запроса никак

...

полностью тело запроса могу получить

Противоречение detected.

Как дождаться выполнения хотя бы одной асинхронной задачи?

GrayHorse, необязательно: может быть некий диспетчер, который создаёт новые задачи. И пинать его можно по событию завершения любой из задач (плюс по таймеру?)

Как посчитать кол-во каждого элемента и для него посчитать сумму?

Иван Симонов, обновил ответ. Надеюсь, понятно

Как посчитать кол-во каждого элемента и для него посчитать сумму?

Иван Симонов, связать по id

Как посчитать кол-во каждого элемента и для него посчитать сумму?

А, теперь вижу. Надо в вопросе указать, что есть и что хочется получить.
Из arr получите словарь id: количество.
Добавьте в него price, чтобы получилась структура типа

{
  id1: { price: X, quantity: Y },
  id2: ...
}

Как посчитать кол-во каждого элемента и для него посчитать сумму?

Иван Симонов,

[...document.querySelectorAll(".item")]
  .map((item) => item.querySelector(".count").textContent)

Как разобраться в коде?

Можно имя свойства держать в переменной:

const obj = {};
let name = "a";
obj[name] = "A";

name = "b";
obj[name] = "B";

obj // { a: "A", b: "B" }

Как упростить такой цикл?

it_pear_yurec, Если там требуется последовательная асинхрота:

async function zipper() {
  const ports = [ "1", "2", "3" ];
  const urls = [ "q", "w", "e", "r", "t", "y" ];
  for (let i = 0; i < urlsLength; i++) {
    const combo = urls[i] + ports[i % ports.length];
    await getSomePromise(combo);
  }
}