OpenAI 在簡化程式碼方面出奇地好-js教程-PHP中文網

在瀏覽網路尋找靈感時，我發現了一個看起來很有趣的元件。

OpenAI is shockingly good at unminifying code

我認為帶有運行 ASCII 藝術的區塊看起來很酷，但我不太明白它是如何實現的，所以我開始查看原始程式碼。

我發現程式碼看起來可能可以完成這項工作，但它被縮小了。

雷雷

通常，我只是透過閱讀最小化的程式碼來了解實作（或尋找 .map 檔案來恢復原始程式碼）。然而，我意識到我從未嘗試過要求 ChatGPT 為我做這件事......所以我複製了上述所有代碼並要求 ChatGPT “解釋代碼”。回覆如下：

提供的程式碼非常複雜，但我會將其分解為更易於理解的格式，解釋其不同部分及其功能。

概述

程式碼使用 JavaScript 定義了多個函數和元件，特別是在 React 應用程式的上下文中。它涉及生成一些動態文字內容，大概是 ASCII 藝術或使用預定義集中的字元的某種視覺效果。此外，它還包括用於事件處理、效能計時和 HTML 內容轉換的實用函數。

關鍵部件和功能

字元集選擇：

``javascript
const { Floor: ra, abs: KE, min: QE } = Math;
const O5 = ["reactive.network REACTIVE.NETWORK", "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/|()1{}[]?-_+~i!lI;:,^'. . :â –'â–'â–「â–ˆ」];
const G7 = Date.now() % 3 ? O5[1] : O5[0];
const V5 = G7.length;
雷雷

eT 函數根據輸入位置 (e.x, e.y) 和當前時間 (t.time) 產生字元。

它使用一些長寬比計算來調整位置，並根據位置和時間的組合從 G7 中選擇一個角色。

YE 函數的用途並不能直接從程式碼中清楚地看出，但它似乎是此計算中使用的自訂函數。

用於顯示動態內容的 React 元件 (tT)：

```javascript
const tT = () =>; {
const e = j.useRef(null);
const [t, n] = j.useState({ height: null, width: null });
j.useEffect(() => {
函數 r() {
n({ 高度: window.innerHeight, 寬度: window.innerWidth });
}
if (typeof window n({ 高度: window.innerHeight, 寬度: window.innerWidth });
window.addEventListener("調整大小", r);
返回() => window.removeEventListener("resize", r);
}
}, []);
雷雷
`；
}
r.textContent = c;
}, 1e3 / JE.fps);
返回() =>清除間隔(u);
}, [t]);
雷雷
};
雷雷