JavaScript | Как сохранить функцию в файл на клиенте (браузере)?

JavaScript | Как сохранить функцию в файл на клиенте (браузере)?

У нас есть функция:

function fun(a, b){return a + b - 20}

Мы не присваиваем переменной анонимную функцию. Мы создаём именованную функцию.

Эту функцию мы хотим сохранить в файл на компьютере при помощи клиента (браузера). То есть нам не нужно использовать серверную сторону для этого. Сервер не создаёт для нас этот файл! Мы не зависим от сервера.

 

Весь код без комментариев — Запусти, протестируй

function fun(a, b){return a + b - 20};
var blob = new Blob([fun.toString()], {type: "text/javascript"});
var link = document.createElement("a");
link.setAttribute("href", URL.createObjectURL(blob));
link.setAttribute("download", "my-function.js");
link.click();

Как это работает?

Если коротко, то мы создаём большой двоичный объект с «данными» и «типом данных«.

Данными у нас всегда будет строка, поэтому мы используем конструкцию fun.toString(), чтобы конвертировать нашу функцию в строковое представление.

Типом данных мы выбираем mime-тип «text/javascript«, чтобы сохранить в файл с расширением «.js«.

Потом мы создаём «невидимый» объект ссылки. Потом мы назначаем этой ссылке атрибуты. Потом вызываем событие клика по ссылке. Файл с функцией скачивается на компьютер. Задача выполнена.

Сохранение функции в файл - JavaScript
Сохранение функции в файл — JavaScript

Дополнительную информацию можно почитать в публикации JavaScript | Как сохранить данные в файл на клиенте (браузере)?

 

Информационные ссылки

Стандарт URL — WHATWG — https://url.spec.whatwg.org

Стандарт File API — w3.org — «Creating and Revoking a blob URL» — https://www.w3.org/TR/FileAPI/#creating-revoking

Стандарт File API — w3.org — createObjectURL(obj)https://www.w3.org/TR/FileAPI/#dfn-createObjectURL

Стандарт ECMAScript — «20.2.3.5 Function.prototype.toString ( )» — https://tc39.es/ecma262/#sec-function.prototype.tostring

Internet Assigned Numbers Authority (IANA) — Media Typeshttps://www.iana.org/assignments/media-types/media-types.xhtml

Перевод стандарта File APIhttps://efim360.ru/file-api/

JavaScript | Как сохранить данные в файл на клиенте (браузере)?