Почему на сайтах в js коде используются непонятные однобуквенные переменные и что они значат?

Question

[Захар Буров]

Копаюсь во внутрянке разных сайтов, ищу для себя примеры "правильного" программирования фронтенда. Сам занимаюсь бэкэндом, но боюсь, что кроме меня в команде программировать фронтенд никто не сможет все равно. По самому программированию вопросов нет, js понятен. Что непонятно - то быстро гуглится. Тем не менее, почти на всех сайтах вижу такую лабуду (такого типа):

(e, r, t) => {
        var n = new Error;
        e.exports = new Promise(( (e, r) => {
            if ("undefined" != typeof mfAgreement)
                return e();
            t.l("/diary/mfAgreement/mfAgreementRemoteEntry.js", (t => {
                if ("undefined" != typeof mfAgreement)
                    return e();
                var s = t && ("load" === t.type ? "missing" : t.type)
                  , i = t && t.target && t.target.src;
                n.message = "Loading script failed.\n(" + s + ": " + i + ")",
                n.name = "ScriptExternalLoadError",
                n.type = s,
                n.request = i,
                r(n)
            }
            ), "mfAgreement")
        }
        )).then(( () => mfAgreement))
    }

Не обращайте внимания на сам код: я взял рандомный участок кода с одного сайта. Суть не в этом. Вопрос о том, что это всё за переменные "s", "t", "n" и т.д.? Я не прошу разъяснять мне, что именно делают данные переменные в моем примере, я хочу понять, почему в большинстве сайтов используется стиль написания через однобуквенные переменные? Это какой-то паттерн? Хочу уточнить, что в большинстве случаев файлы имеют приписку bundle. Погуглил, понял, что это за зверь, но он, вроде бы, не создает такую бредятину сам. Посему спрашиваю у вас, т.к. все, что я нагугливал - информация, никак не относящаяся к вопросу, в большинстве своем для программирования стилем динозавров до н.э.

Comments

[imko]

Потому что кого-то не учили что называть переменные a b c d это плохо)))
Ну а вообще потому что это машинная обработка кода на этапе после которого человек не будет его трогать для того чтоб уменьшить файлик

[Сергей Горностаев]

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

[Алекс Глебов]

webpack, vite, ts это основы фронта сейчас. после знакомства с ними подобных вопросов не возникнет.

Answer 1

[Rsa97]

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

Comments

[Захар Буров]

Премного благодарен!

Answer 2

[Terra_Main]

Данный код сгенерирован компилятором TypeScript. То есть, код был написан не на js а на ts. Поскольку я ОЧЕНЬ много работал с таким кодом, когда писал моды для браузерный игр, могу сказать, что чтобы понять смысл этих переменных, нужно найти функцию, которая находиться почти в самом конце кода, выглядящая примерно так:

function s(i) {
        var n = t[i];
        if (void 0 !== n) return n.exports;
        var o = t[i] = {exports: {}};
        return e[i].call(o.exports, o, o.exports, s), o.exports
    }

или

function t(o) {
        var r = e[o];
        if (void 0 !== r)
            return r.exports;
        var a = e[o] = {
            exports: {}
        };
        return n[o](a, a.exports, t),
        a.exports
    }

Эта функция является загрузчиком модулей, а (e, r, t) => {...} - модуль, который загружается. Если ты скинешь, как выглядит твоя s-функция (так я называю выше описанную функцию загрузки модулей) я смогу тебе помочь

Comments

[WbICHA]

Данный код сгенерирован компилятором TypeScript.

Да что ты говоришь? И давно у нас тс минифицировать код научился?

[modelair]

казалось бы, простой вопрос :)

[Muhammadyusuf]

Это сам банлер (вебпак чаще всего) делает. Это не только минификация, но и обсуфикация. Чтобы усложнить реверсинжиниринг. А так в основном для экономии траифка удаляют даже пробелы, переносы строки.
Т.е. жс программисты пишут в один ряд без пробелов и с минимумом длины имён
Шутка

Answer 3

[VoidVolker]

Да просто чтобы не печатать какие-то длинные названия переменных, когда там что-то типа стандартных exports, error, exception, target или это просто часть стандартного интерфейса какого-то модуля, который повторяется в проекте миллион раз, а так же для сокращения видимого объема кода и облегчения его восприятия.

Answer 4

[Артём Дайнов]

Ваш вариант анонимки не имеет ссылку, а значит this не доступен, а то обычно e это event или error, t обычно this родителя.

Comments

[WbICHA]

Это что за ответ чатгпт 0.5?

[sudo rm -rf /]

WbICHA, гпт напишет "недоступен" слитно

Answer 5

[Thunderinthegrass]

Это минимизированный js-код, есть сборщики проекта, или еще таск-раннеры их называют, такие как gulp, webpack, stylus, может еще какие есть, не помню. Эти сборщики выполняют некоторые задачи по ускорению процесса разработки и оптимизации уже готовой верстки. Среди прочего - минимизируют js, заменяя человеческие названия переменных буквами. Минимизированный код человеку понять труднее, но он и предназначен не для человека, а для браузера, браузеру без разницы, интуитивно понятна переменная, или это просто буква, зато на чтение одной буквы тратится меньше ресурсов

Comments

[Владислав]

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

[Thunderinthegrass]

Владислав, дык и я про то. Браузер быстрее прочитает одну букву, чем две, например. Нет?

Answer 6

[HarutAdyan]

Я не программист но иногда копаюсь там сям, и всегда думал что это своеобразная защита от копирования.

Answer 7

[Reallamos]

Это скомпилированный код, который соответственно максимально уменьшен компилятором.
Забавно, что у себя в команде вы бэкендер, который уверен что напишет фронт лучше фронтендеров. И при этом вот такие вопросы )

Comments

[Dest934]

Скомпилированный код на js... Вы серьёзно считаете себя после такого программистом, а не рисователем кнопок?

[Reallamos]

Dest934, ) много чудных открытий вам ещё предстоит )
Успехов!

[Захар Буров]

В моей команде фронтендер будет делать страничку. Также она будет делать функции, которые нужны для визуальной состовляющей страницы. Я же буду настраивать всю логику взаимодействия сервера с сайтом не только на сервере, но и на сайте.

[Reallamos]

Захар Буров, это не фронтендер , а верстальщик.

Answer 8

[mrererer]

Лучше поискать примеры кода на github или code pen