架構
RenderJS 的模組層級配置：單一 data.ts 常數模組同時支撐 RJS 模板引擎與原生 prototype 擴充，另有獨立的 IntersectionObserver listener 層負責 lazyload／SVG。
概覽
graph TB
A[HTML 模板 / DOM 節點] --> B[RJS 核心]
B --> C[指令解析器]
C --> D[渲染後的 DOM]
E[Prototype 擴充模組] -.鏈式方法.-> D
F[Lazyload / SVG Listener] -.IntersectionObserver.-> D
G[data.ts 常數與工具] --> B
G --> E
分層
| 層級 | 位置 | 職責 |
|---|---|---|
| 常數與工具 | src/data.ts |
縮寫屬性名稱別名（$GET、$ADD、$IS ...）、共用正則（REGEX_TEXT、REGEX_FOR_VAL0 ...），以及跨模組共用的全域變數如 requestMap／userHistory |
| RJS 核心 | src/model/RJS.ts |
RJS 類別：實例生命週期（constructor、renew、#init）與指令解析流程（#SET_DOM 及其 #FIT_*／#setIf／#setPath 輔助函式） |
| Prototype 擴充 | src/prototype/*.ts（型別定義於 src/interface/*.ts） |
每個檔案在模組載入時直接擴充對應原生建構子的 .prototype——涵蓋 String、Element、Array、Object、URL、window、Date、Number、Map、Image、HTMLElement、File、HTMLVideoElement、HTMLFormElement、HTMLLinkElement、FormData、DocumentFragment |
| Listener 子系統 | src/listener/*.ts、src/function/listener.ts |
全域 IntersectionObserver 實例，負責圖片延遲載入與 SVG 內嵌，透過 window._Listener(...) 進入 |
| 輔助函式 | src/function/*.ts |
getCamelString（kebab 轉 camel，供 CSS 屬性查找）、printLog／printCopyright（console 橫幅） |
| 打包進入點 | src/RenderJS.js |
上述模組編譯／串接後的產物，透過 terser 壓縮為 dist/RenderJS.js（npm run minify） |
跨切面說明
- 載入順序耦合：prototype 檔案以
(_this => { ... })($Type[_prototype])IIFE 形式在載入時執行——沒有明確的 init 呼叫，因此src/RenderJS.js的 import 順序決定了RJS.ts首次執行時哪些擴充已存在。 - 無虛擬 DOM：指令解析器（
RJS.ts）直接原地修改真實 DOM 節點；重新渲染僅由明確呼叫renew()觸發，絕不自動發生。 - 屬性名稱混淆：
data.ts將其他模組使用的每個 DOM／JS 屬性名稱定義為const _xxx = "xxx"（並進一步組合，如_appendChild = "append" + _Child）。這是一種壓縮策略，而非執行期抽象層——閱讀原始碼時可將_ary[_push](x)理解為ary.push(x)。
指令解析流程細節見 核心概念；完整 prototype 方法列表見 API 參考；模組層級的 sequence／state diagram 見 完整架構文件。