唯一使用純對象的框架（讓 React 看起來像業余水平）
作者：前端小智
當 React 開發者在與 webpack 配置和構建失敗扭打時，Juris 開發者只是貼上一個 ??<script>??，就能把應用跑到飛起——每次更新都有明確意圖，每次渲染都被精準優化。
當 React 開發者還在第 47 次討論該用 useEffect 還是 useMemo 時，Juris 直接把根問題掀桌：既然 JavaScript 對象已經存在，為什么框架還要逼你學一套自己的語法？
所有框架都繞不過去的坑
// React：你得學一套 JSX
function MyComponent() {
const [count, setCount] = useState(0);
return <div>{count}</div>; // 這可不是純 JavaScript
}// Vue：模板 + 指令組合拳
<template>
<div v-if="show">{{ message }}</div> <!-- 這也不是 JavaScript -->
</template>// Juris：只有“純 JavaScript 對象”
{
div: {
text: () => getState('count', 0), // REACTIVE：count 變了就更新
className: getState('theme', 'default') // STATIC：只算一次，后面不再更新
}
}區別在這：Juris 是目前唯一只用純對象來描述 UI 的框架。沒有 JSX、沒有模板、沒有 node_modules、沒有自定義語法、沒有構建步驟、沒有轉譯。只有對象、函數、數組，再配上飛快的渲染。
技術細講：零構建，性能拉滿
1）零構建，渲染飛快
把下面這段丟進任何 HTML，開箱即用：
<script src="https://unpkg.com/juris"></script>
<script>
const app = new Juris({
states: { count: 0 },
layout: {
div: {
text: () => app.getState('count', 0),
onclick: () => app.setState('count', app.getState('count', 0) + 1)
}
}
});
app.render('#app');
</script>不需要 webpack、babel、Vite，也沒有亂七八糟的構建鏈路。純 JS 原生跑，細粒度 DOM 更新，實測把虛擬 DOM 框架按在地上摩擦。
2）零虛擬 DOM，細到“屬性級”的依賴追蹤
Juris 在屬性級做依賴跟蹤：執行響應式函數時攔截所有狀態讀取，記錄每個 DOM 屬性到底依賴哪些 state 路徑。之后只在那些路徑變動時，精準更新對應屬性。
這比 React 那套“組件級重渲 + diff”更聰明：更新目標明確、開銷更小。
3）雙渲染模式：按需選擇性能模型
// 細粒度模式：直接 DOM 更新（兼容 React 式心智）
setRenderMode('fine-grained');
// 批處理模式：像 VDOM 一樣做批量調和與復用
setRenderMode('batch');批處理如果出現沖突，框架會自動回退到細粒度模式——生產可用的容錯設計到位了。
4）高級狀態管理：中間件流水線
狀態系統內建：
- 中間件組合與變換流水線
- 環依賴檢測防止無限循環
- 深度相等比較，避免無效通知
- 層級通知（父/子路徑聯動）
所有更新都會經過一條可插拔的管線：你可以攔截、修改、拒絕；只有真的變了，才會通知訂閱者。
5）組件生命周期：顯式且干凈
// React：Hook 地獄
function Component() {
useEffect(() => {
return () => cleanup();
}, []);
useEffect(() => {
// Update logic
}, [dep1, dep2]);
}// Juris：明確、可讀
{
render: () => ({ div: { text: 'Hello' } }),
hooks: {
onMount: () => console.log('Mounted'),
onUpdate: (oldProps, newProps) => console.log('Updated'),
onUnmount: () => console.log('Cleanup')
}
}6）Headless 組件：把業務與視圖徹底解耦
// 純邏輯組件：不碰 DOM
app.registerHeadlessComponent('DataManager', (props, context) => ({
api: {
fetchData: () => fetch('/api/data'),
processData: (data) => data.map(transform),
cacheData: (key, data) => context.setState(`cache.${key}`, data)
},
hooks: {
onRegister: () => console.log('Data manager initialized'),
onUnregister: () => console.log('Cleanup')
}
}));
// 任意 UI 組件都能消費它
{
button: {
text: 'Load Data',
onclick: () => context.fetchData()
}
}業務寫在 headless 組件里，UI 只負責展示——架構層面的組合問題，被優雅解決。
7）DOM 增強：真正的 Progressive Enhancement
// 在不動原始 HTML 的前提下，精準增強
app.enhance('.legacy-form', (context) => ({
'.submit-btn': {
onclick: (element) => (event) => {
event.preventDefault();
const form = element.closest('form');
context.handleSubmit(new FormData(form));
}
},
'input[type="text"]': {
oninput: (element) => () => {
context.setState(`form.${element.name}`, element.value);
}
}
}));外科手術式增強：保留原標記，精準注入交互與狀態。
性能故事
內存管理
- 元素回收池，緩解 GC 壓力
- 基于 WeakMap 的訂閱，自動清理
- 批量更新 + 可配置批大小
- 環引用檢測，杜絕內存泄漏
更新優化
// 只更新發生變化的屬性
text: () => getState('name'), // REACTIVE：name 變才更新
className: getState('buttonStyle'), // STATIC：創建時算一次
style: {
color: () => getState('theme.color'), // REACTIVE：只改 color
padding: getState('spacing.default') // STATIC：永不重算
}調和策略
- 基于 key 的元素復用
- 元素回收池最大化減少新建
- 列表優先復用、失敗再安全重渲
- 未用元素清理并回收
為什么它適合“真項目”
- 零構建復雜度：沒有 webpack/babel/Vite 配置地獄，script 一貼就能跑
- 性能狠：直達 DOM 的細粒度更新，沒有虛擬 DOM 背包
- 性能可預期：你知道哪里會更新，debug 不再迷霧重重
- 漸進增強友好：在遺留系統里也能“無痛加速”
- 可組合架構：Headless 負責邏輯，UI 專注表現
- 框架無關：落地在任何服務端棧上（Rails、Django……）
- 生產就緒：自動回退、泄漏防護、錯誤邊界、性能監測全家桶
康威生命游戲 Demo（不僅是 Demo，更是壓力測試）
- 1000 個響應式單元（每個 cell 都是獨立組件）
- 保持 60+ FPS 的交互
- 零虛擬 DOM 開銷
- 粒度極細：只重渲改變了的 cell
// 每個 cell 自成一個“反應單元”
app.registerComponent('Cell', (props, context) => {
const { x, y } = props;
const key = `${x},${y}`;
return {
div: {
// 僅當這個 cell 的狀態變了才更新
className: () => {
const grid = getState('grid', {});
const isAlive = grid[key] || false;
return `cell ${isAlive ? 'alive' : 'dead'}`;
},
onclick: () => {
const currentGrid = getState('grid', {});
const newGrid = { ...currentGrid };
newGrid[key] = !newGrid[key];
setState('grid', newGrid);
}
}
};
});結論
當 React 開發者在與 webpack 配置和構建失敗扭打時，Juris 開發者只是貼上一個 <script>，就能把應用跑到飛起——每次更新都有明確意圖，每次渲染都被精準優化。
這不是又一個“新框架”，而是一種范式切換：零構建復雜度、純 JavaScript 對象、極致渲染、性能可預測。
責任編輯：武曉燕
來源：
大遷世界
