“本文轉(zhuǎn)載自https://glama.ai/blog/2024-08-29-reverse-engineering-minified-code-using-openai”

? 在瀏覽互聯(lián)網(wǎng)尋找靈感時(shí)，我發(fā)現(xiàn)了一個(gè)看起來很有趣的組件：

https://reactive.network/hackathon

我覺得帶有運(yùn)行 ASCII 藝術(shù)的區(qū)塊看起來很酷，但我不太明白它是如何實(shí)現(xiàn)的，于是我開始查看源代碼。

我找到了看起來可以完成這項(xiàng)工作的代碼，但它被精簡(jiǎn)化了。

const { floor: ra, abs: KE, min: QE } = Math,    O5 = ["reactive.network REACTIVE.NETWORK", "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/|()1{}[]?-_+~<>i!lI;:,^`'. .:a–‘a(chǎn)–’a–“a–?"],    G7 = Date.now() % 3 ? O5[1] : O5[0],    V5 = G7.length,    JE = { fps: 60 };function eT(e, t, n, r) {    const i = t.time * 8e-5,        s = QE(t.cols, t.rows),        o = t.metrics.aspect * 0.2,        l = { x: ((4 * (e.x - t.cols / 6.25)) / s) * o, y: (5 * (e.y - t.rows / 4)) / s },        u = ra(KE(YE(l) - i) * V5 + (ra(e.x / 1) % 2) * 2) % V5;    return G7[u];}const tT = () => {    const e = j.useRef(null),        [t, n] = j.useState({ height: null, width: null });    return (        j.useEffect(() => {            function r() {                n({ height: window.innerHeight, width: window.innerWidth });            }            if (typeof window < "u") return n({ height: window.innerHeight, width: window.innerWidth }), window.addEventListener("resize", r), () => window.removeEventListener("resize", r);        }, []),        j.useEffect(() => {            const r = e.current;            if (!r) return;            const i = 12,                s = ra(t.width / i) * 1.6,                o = ra(t.height / i),                l = { aspect: s / o },                u = setInterval(() => {                    let c = "";                    for (let d = 0; d < o; d++) {                        for (let f = 0; f < s; f++) c += eT({ x: f, y: d }, { cols: s, rows: o, metrics: l, time: Date.now() });                        c += ``;                    }                    r.textContent = c;                }, 1e3 / JE.fps);            return () => clearInterval(u);        }, [t]),        a.jsx("div", { style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }, children: a.jsx("div", { ref: e, style: { width: "100%", height: "100%", whiteSpace: "pre", overflow: "hidden" } }) })    );};function nT(e) {    return Math.cos(e.x * e.x - e.y * e.y);}const { floor: ia, abs: rT, min: iT } = Math,    D5 = ["reactive.network REACTIVE.NETWORK", "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/|()1{}[]?-_+~<>i!lI;:,^`'. .:a–‘a(chǎn)–’a–“a–?"],    X7 = Date.now() % 3 ? D5[1] : D5[0],    F5 = X7.length,    sT = { fps: 60 };function oT(e, t, n, r) {    const i = t.time * 8e-5,        s = iT(t.cols, t.rows),        o = t.metrics.aspect * 0.2,        l = { x: ((4 * (e.x - t.cols / 6.25)) / s) * o, y: (5 * (e.y - t.rows / 4)) / s },        u = ia(rT(nT(l) - i) * F5 + (ia(e.x / 1) % 2) * 2) % F5;    return X7[u];}const aT = () => {    const e = j.useRef(null),        [t, n] = j.useState({ height: null, width: null });    return (        j.useEffect(() => {            function r() {                n({ height: window.innerHeight, width: window.innerWidth });            }            if (typeof window < "u") return n({ height: window.innerHeight, width: window.innerWidth }), window.addEventListener("resize", r), () => window.removeEventListener("resize", r);        }, []),        j.useEffect(() => {            const r = e.current;            if (!r) return;            const i = 12,                s = ia(t.width / i) * 1.6,                o = ia(t.height / i),                l = { aspect: s / o },                u = setInterval(() => {                    let c = "";                    for (let d = 0; d < o; d++) {                        for (let f = 0; f < s; f++) c += oT({ x: f, y: d }, { cols: s, rows: o, metrics: l, time: Date.now() });                        c += ``;                    }                    r.textContent = c;                }, 1e3 / sT.fps);            return () => clearInterval(u);        }, [t]),        a.jsx("div", { style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }, children: a.jsx("div", { ref: e, style: { width: "100%", height: "100%", whiteSpace: "pre", overflow: "hidden" } }) })    );},

通常情況下，我會(huì)通過閱讀最小化的代碼來理解其實(shí)現(xiàn)（或者查找 .map 文件來還原原始代碼）。不過，我意識(shí)到我從未嘗試過讓 ChatGPT 幫我做這件事...... 于是，我復(fù)制了上述所有代碼，并要求 ChatGPT “解釋代碼”。以下是回復(fù)：

提供的代碼非常復(fù)雜，但我會(huì)將其分解為更易于理解的格式，解釋其不同部分及其功能。
概述該代碼使用 JavaScript 定義了幾個(gè)函數(shù)和組件，特別是在 React 應(yīng)用程序的上下文中。它處理使用預(yù)定義字符集中的字符生成一些動(dòng)態(tài)文本內(nèi)容，可能是 ASCII 藝術(shù)或某種視覺效果。此外，它還包括用于事件處理、性能計(jì)時(shí)和 HTML 內(nèi)容轉(zhuǎn)換的實(shí)用函數(shù)。
關(guān)鍵部件和功能字符集選擇：
const { floor: ra, abs: KE, min: QE } = Math;const O5 = ["reactive.network REACTIVE.NETWORK", "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/|()1{}[]?-_+~<>i!lI;:,^`'. .:a–‘a(chǎn)–’a–“a–?"];const G7 = Date.now() % 3 ? O5[1] : O5[0];const V5 = G7.length;這部分代碼導(dǎo)入了一些常見的數(shù)學(xué)函數(shù)（floor、、abs和min），并定義了兩組字符，存儲(chǔ)在中O5。
根據(jù)當(dāng)前時(shí)間（Date.now() % 3），它會(huì)選擇其中一個(gè)集合（G7）以供稍后使用。
所選字符集的長(zhǎng)度存儲(chǔ)在中V5。
動(dòng)態(tài)角色選擇功能：
function eT(e, t, n, r) {    const i = t.time * 8e-5;    const s = QE(t.cols, t.rows);    const o = t.metrics.aspect * 0.2;    const l = { x: ((4 * (e.x - t.cols / 6.25)) / s) * o, y: (5 * (e.y - t.rows / 4)) / s };    const u = ra(KE(YE(l) - i) * V5 + (ra(e.x / 1) % 2) * 2) % V5;    return G7[u];}該eT函數(shù)根據(jù)輸入位置（e.x，e.y）和當(dāng)前時(shí)間（t.time）生成一個(gè)字符。
它使用一些縱橫比計(jì)算來調(diào)整位置，并根據(jù)G7位置和時(shí)間的組合選擇一個(gè)字符。
YE從代碼中無法直接看出該函數(shù)的用途，但它似乎是此計(jì)算中使用的自定義函數(shù)。
tT用于顯示動(dòng)態(tài)內(nèi)容的React 組件（ ）：
const tT = () => {    const e = j.useRef(null);    const [t, n] = j.useState({ height: null, width: null });    j.useEffect(() => {        function r() {            n({ height: window.innerHeight, width: window.innerWidth });        }        if (typeof window < "u") {            n({ height: window.innerHeight, width: window.innerWidth });            window.addEventListener("resize", r);            return () => window.removeEventListener("resize", r);        }    }, []);
    j.useEffect(() => {        const r = e.current;        if (!r) return;        const i = 12;        const s = ra(t.width / i) * 1.6;        const o = ra(t.height / i);        const l = { aspect: s / o };        const u = setInterval(() => {            let c = "";            for (let d = 0; d < o; d++) {                for (let f = 0; f < s; f++) c += eT({ x: f, y: d }, { cols: s, rows: o, metrics: l, time: Date.now() });                c += ``;            }            r.textContent = c;        }, 1e3 / JE.fps);        return () => clearInterval(u);    }, [t]);
    return a.jsx("div", { style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }, children: a.jsx("div", { ref: e, style: { width: "100%", height: "100%", whiteSpace: "pre", overflow: "hidden" } }) });};這是一個(gè) React 組件，它設(shè)置一個(gè)間隔，以使用動(dòng)態(tài)生成的字符定期更新div元素的內(nèi)容（ ）。e.current
它根據(jù)窗口大小計(jì)算列數(shù)（s）和行數(shù)（ ），然后用函數(shù)生成的字符填充。odiveT
該效果以每秒指定的幀數(shù)運(yùn)行（JE.fps）。

我繼續(xù)詢問“用 TypeScript 實(shí)現(xiàn)等效代碼并使其易于閱讀”，并得到了以下答復(fù)：

import React, { useEffect, useRef, useState } from 'react';
const selectedCharacterSet =  "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/|()1{}[]?-_+~<>i!lI;:,^`'. .:a–‘a(chǎn)–’a–“a–?";const characterSetLength = selectedCharacterSet.length;
const calculateCharacter = (  x: number,  y: number,  cols: number,  rows: number,  aspect: number,  time: number,): string => {  const timeFactor = time * 0.000_08;  const size = Math.min(cols, rows);  const aspectRatio = aspect * 0.2;  const position = {    x: ((4 * (x - cols / 6.25)) / size) * aspectRatio,    y: (5 * (y - rows / 4)) / size,  };
  const index =    Math.floor(      Math.abs(        Math.cos(position.x * position.x - position.y * position.y) -          timeFactor,      ) *        characterSetLength +        (Math.floor(x) % 2) * 2,    ) % characterSetLength;  return selectedCharacterSet[index];};
type Size = {  height: null | number;  width: null | number;};
const AsciiArtGenerator: React.FC = () => {  const textRef = useRef(null);  const [size, setSize] = useState({ height: null, width: null });
  useEffect(() => {    const handleResize = () => {      setSize({ height: window.innerHeight, width: window.innerWidth });    };
    // Initial size setting    handleResize();
    window.addEventListener('resize', handleResize);    return () => {      window.removeEventListener('resize', handleResize);    };  }, []);
  useEffect(() => {    const element = textRef.current;    if (!element || !size.width || !size.height) return undefined;
    const cols = Math.floor(size.width / 12) * 1.6;    const rows = Math.floor(size.height / 12);    const aspectRatio = cols / rows;
    const intervalId = setInterval(() => {      let content = '';
      for (let y = 0; y < rows; y++) {        for (let x = 0; x < cols; x++) {          content += calculateCharacter(            x,            y,            cols,            rows,            aspectRatio,            Date.now(),          );        }
        content += 'n';      }
      element.textContent = content;    }, 1_000 / 60); // 60 fps
    return () => {      clearInterval(intervalId);    };  }, [size]);
  return (    
  );};
export default () => {  return ;};

令我驚訝的是，響應(yīng)不僅足夠好，而且可讀性也很強(qiáng)。

上述組件的實(shí)際運(yùn)行情況如下：

比較輸出結(jié)果，LLM 響應(yīng)似乎忽略了一些實(shí)現(xiàn)細(xì)節(jié)，但它仍然是一個(gè)值得學(xué)習(xí)的好實(shí)現(xiàn)。這絕對(duì)是一個(gè)我以前從未考慮過的巧妙用例！

注意：如果想第一時(shí)間收到 KiCad 內(nèi)容推送，請(qǐng)點(diǎn)擊下方的名片，按關(guān)注，再設(shè)為星標(biāo)。

常用合集匯總：

和 Dr Peter 一起學(xué) KiCad

KiCad 8 探秘合集

KiCad 使用經(jīng)驗(yàn)分享

KiCad 設(shè)計(jì)項(xiàng)目（Made with KiCad）

常見問題與解決方法

KiCad 開發(fā)筆記

審核編輯 黃宇