🖥 Выполнение JavaScript кода, хранящегося в строке: методы

▶️Итак, если коротко, то для того чтобы выполнить JavaScript-код, записанный в виде строки, можно воспользоваться функцией eval():

eval("alert('Выполнено!');"); 

В результате появится всплывающее окно с текстом "Выполнено!".

Но будьте осторожны: функция eval() может выполнить любой скрипт, который ей будет предоставлен.

Функция eval() обладает большими рисками для безопасности. Важно убедиться в том, что JavaScript-строка правильно обработана перед ее использованием в eval(), так как инъекции кода могут иметь серьезные последствия.


Альтернативы для запуска строк JavaScript

▶️Использование функции конструктора `Function`

let func = new Function("return 'Привет, мир!';");
func(); // Привет, мир!

Этот метод умеет обходить внешний контекст.

▶️Модуль `vm` в Node.js
В Node.js существует модуль vm, который предоставляет отдельный контекст для выполнения JavaScript-строк.

const vm = require('vm');
const script = new vm.Script("console.log('Привет из VM');");
script.runInThisContext(); // Привет из VM

▶️Безопасное выполнение с помощью `vm2` в Node.js
vm2 предоставляет ограниченное окружение для запуска ненадежного кода.

const { VM } = require('vm2');
const vm = new VM();
vm.run("console.log('Выполнение в песочнице');"); // Выполнение в песочнице

Не забудьте следить за обновлениями в части безопасности и обратите внимание на устаревшие API в vm2, чтобы избежать проблем.

▶️Запуск скриптов с помощью jQuery
Ни одна замена не сможет заменить добрые старые теги <script>, которые можно использовать для запуска JavaScript-строк с помощью jQuery.

let code = "$('body').append('<p>Привет от jQuery!</p>');";
$('<script>').attr('type', 'text/javascript').text(code).appendTo('body'); // Привет от jQuery!

@javascriptv

🖥 Асинхронные итераторы в JavaScript

▶️Итак, кейс.
Мы работаем с Node.js, и нам нужно прочитать файл, строка за строкой. В Node есть API для такого типа функций, который называется readLine (полную документацию можно найти здесь).

Это API событий, которые вы можете прослушивать следующим образом:

const fs = require('fs')
const readline = require('readline')
const reader = readline.createInterface({
  input: fs.createReadStream('./file.txt'),
  crlfDelay: Infinity
})

reader.on('line', (line) => console.log(line))

И допустим, у нас есть простой файл:

line 1
line 2
line 3

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


▶️Решение
В дополнение к API событий readline также предоставляет асинхронный итератор. Это означает, что вместо чтения строки через слушателей в событии line мы будем читать строку при помощи нового способа использования ключевого слова for.

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

async function readLine (files) {
  for (const file of files) {
    const line = await readFile(file) // Imagine readFile is our cursor
    console.log(line)
  }
}

Однако благодаря асинхронным итерациям (например, readline) мы можем сделать так:

const fs = require('fs')
const readline = require('readline')
const reader = readline.createInterface({
  input: fs.createReadStream('./xpto.txt'),
  crlfDelay: Infinity
})

async function read () {
  for await (const line of reader) {
    console.log(line)
  }
}

read()

Обратите внимание, что теперь мы используем новое определение for — for await (const x of y).

📎 Читать подробнее

@javascriptv

🖥 3D Scrolling Gallery/Timeline - 3D-прокрутка, выполненная с помощью SVG, CSS и библиотеки GSAP.js

https://codepen.io/creativeocean/pen/gOvYEgq

@javascriptv

🖥 Немного о замыканиях в Javascript

⏩Замыкание — это функция, которая имеет доступ к переменным, присутствующим в ее цепочке областей видимости, даже если внешняя функция перестает существовать.

Чтобы понять суть замыканий, мы сначала рассмотрим их характеристики:
— Даже если внешняя функция перестает существовать, замыкание по-прежнему имеет доступ к ее переменным.
— Замыкания не имеют доступа к параметру args своей внешней функции.

Давайте разберем подробнее первый пункт. Это основная функциональность любого замыкания. В этом сама суть замыканий и принцип работы.

Чтобы увидеть это в действии, мы выполним вот эту функцию buttonProps:

let buttonProps = (borderRadius) => {
  const createVariantButtonProps = (variant, color) => {
    const newProps = {
      borderRadius,
      variant,
      color
    };
    return newProps;
  }
  return createVariantButtonProps;
}

let primaryButton = buttonProps("1rem"); 

Вызов функции buttonProps вернет нам другую функцию, которая является нашим замыканием.

Теперь давайте выполним это замыкание:

const primaryButtonProps = primaryButton("primary", "red");

В результате выполнения замыкание возвращает следующий объект:

{
   "borderRadius":"1rem",
   "variant":"primary",
   "color":"red"
}

⏩Итак, почему замыкания по-прежнему имеют доступ к переменным, которые определены вне их области видимости, даже если внешняя функция перестает существовать (например, borderRadius)?

⏩Ответ прост: замыкания не хранят статические значения. Вместо этого они хранят ссылки на переменные, находящиеся внутри цепочки областей видимости. Таким образом, даже если внешняя функция умирает, внутренняя функция, то есть замыкание, по-прежнему имеет доступ к родительским переменным.

📎 Читать подробнее

@javascriptv

🖥 Факт дня — метод String.fromCharCode() в JS

⏩Статический метод String.fromCharCode() возвращает строку, созданную из указанной последовательности значений единиц кода UTF-16.

Синтаксис

String.fromCharCode(num1[, ...[, numN]]

num1, ..., numN
— Последовательность чисел, являющихся значениями единиц кода UTF-16. Диапазон составляет от 0 до 65535 (0xFFFF). Числа больше 0xFFFF усекаются. Проверка достоверности не производится.

Метод String.fromCharCode() возвращает примитивную строку, а не объект String.

Поскольку метод fromCharCode() является статическим методом объекта String, вы всегда должны использовать его как String.fromCharCode(), а не как метод созданного вами экземпляра String.


⏩Пример использования метода fromCharCode().

String.fromCharCode(65, 66, 67);  // "ABC"

📎 Полная таблица UTF-16


⏩Как заставить его работать с большими значениями

Хотя большинство распространённых значений Юникода может быть представлено одним 16-битным числом (как ожидалось на ранней стадии стандартизации JavaScript) и метод fromCharCode() может использоваться для возврата одного символа для самых распространённых значений (точнее, значений UCS-2, которые являются подмножеством самых распространённых символов UTF-16), для работы со всеми допустимыми значениями Юникода (занимающими до 21 бита) одного метода fromCharCode() недостаточно. Поскольку большие кодовые точки используют (самое меньшее) два «суррогатных» числа для представления одного символа, для возврата таких пар можно использовать метод String.fromCodePoint() (являющийся частью черновика ES6) и, таким образом, адекватно представлять эти символы.

@javascriptv

🖥 Несколько супер-полезных однострочников на JS

⏩Проверить, является ли путь относительным

const isRelative = (path) => !/^([a-z]+:)?[\\/]/i.test(path);

isRelative('/foo/bar/baz'); // false
isRelative('C:\\foo\\bar\\baz'); // false
isRelative('foo/bar/baz.txt'); // true
isRelative('foo.md'); // true

⏩Проверить, является ли строка шестнадцатеричным цветом

const isHexColor = (color) => /^#([0-9A-F]{3}|[0-9A-F]{4}|[0-9A-F]{6}|[0-9A-F]{8})$/i.test(color);

isHexColor('#012'); // true
isHexColor('#A1B2C3'); // true
isHexColor('012'); // false
isHexColor('#GHIJKL'); // false

⏩Подсчитать количество разных дней между двумя датами

const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));

diffDays(new Date('2014-12-19'), new Date('2020-01-01')); // 1839

⏩Скопировать в буфер обмена

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

copyToClipboard("Hello World");

@javascriptv

🖥 Понимание среды выполнения JavaScript

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

Некоторые факты из статьи:

⏩JavaScript имеет уникальную модель выполнения, основанную на движке.

⏩В среде выполнения JavaScript есть два основных компонента: куча (Heap) и стек вызовов (Call Stack).

⏩Куча предоставляет место для хранения переменных и экземпляров, создаваемых программой.

⏩Стек вызовов играет важную роль в выполнении кода, записывая точку в программе, где выполняются операции.

⏩JavaScript использует асинхронную модель для выполнения операций, которые могут занять непредсказуемое количество времени.

⏩Web API, Очередь Обратных Вызовов и Цикл Событий обеспечивают неблокирующее поведение JavaScript.

📎 Статья

@javascriptv