Aberdeen - v1.0.0 这是什么？教程GitHub

Aberdeen

用纯 TypeScript/JavaScript 构建飞快的、声明式的 UI – 无需 virtual DOM。

Aberdeen 提供了一种非常简单的响应式 UI 构建方法。其核心思想是：

使用许多小的匿名函数来发出 DOM 元素，并在其底层 代理的 数据发生更改时自动重新运行它们。 这个代理的数据可以是任何东西，从简单值到复杂的、类型化的、深度嵌套的数据结构。

现在，让我们深入了解一下为什么这很重要...

为什么要使用 Aberdeen?

为什么 不 使用 Aberdeen?

示例

为了快速了解 Aberdeen 代码的样子，下面是一个带有撤消历史记录的井字游戏应用程序。 如果您正在官方网站上阅读本文，您应该在代码下方看到一个工作演示，并在代码的右上角看到一个“编辑”按钮，可以进行尝试。

import {$, proxy, onEach, insertCss, observe} from"aberdeen";// Helper functionsfunctioncalculateWinner(board) {constlines = [    [0, 1, 2], [3, 4, 5], [6, 7, 8], // horizontal    [0, 3, 6], [1, 4, 7], [2, 5, 8], // vertical    [0, 4, 8], [2, 4, 6] // diagonal  ];for (const [a, b, c] oflines) {if (board[a] && board[a] === board[b] && board[a] === board[c]) {returnboard[a];    }  }}functiongetCurrentMarker(board) {returnboard.filter(v=>v).length % 2 ? "O" : "X";}functiongetBoard(history) {returnhistory.boards[history.current];}functionmarkSquare(history, position) {constboard = getBoard(history);// Don't allow markers when we already have a winnerif (calculateWinner(board)) return;// Copy the current board, and insert the marker into itconstnewBoard = board.slice();newBoard[position] = getCurrentMarker(board);// Truncate any future states, and write a new futurehistory.current++;history.boards.length = history.current;history.boards.push(newBoard);}// Define component-local CSS, which we'll utilize in the drawBoard function.// Of course, you can use any other styling solution instead, if you prefer.constboardStyle = insertCss({display:'grid',gap:'0.5em',gridTemplateColumns:'1fr 1fr 1fr','> *': {width:'2em',height:'2em',padding:0,  },});// UI drawing functions.functiondrawBoard(history) {$('div', boardStyle, () => {for(letpos=0; pos<9; pos++) {$('button.square', () => {letmarker = getBoard(history)[pos];if (marker) {$({ text:marker });        } else {$({ click: () =>markSquare(history, pos) });        }      });    }  })}functiondrawStatusMessage(history) {$('h4', () => {// Reruns whenever observable data read by calculateWinner or getCurrentMarker changesconstboard = getBoard(history);constwinner = calculateWinner(board);if (winner) {$(`:Winner: ${winner}!`);    } elseif (board.filter(square=>square).length === 9) {$(`:It's a draw...`);    } else {$(`:Current player: ${getCurrentMarker(board)}`);    }  });}functiondrawTurns(history) {$('div:Select a turn:')// Reactively iterate all (historic) board versionsonEach(history.boards, (_, index) => {$('button', {// A text node:text:index,// Conditional css class:".outline":observe(() =>history.current != index),// Inline styles:$marginRight:"0.5em",$marginTop:"0.5em",// Event listener:click: () =>history.current = index,    });  });}functiondrawMain() {// Define our state, wrapped by an observable proxyconsthistory = proxy({boards: [[]], // eg. [[], [undefined, 'O', undefined, 'X'], ...]current:0, // indicates which of the boards is currently showing  });$('main.row', () => {$('div.box', () =>drawBoard(history));$('div.box', {$flex:1}, () => {drawStatusMessage(history);drawTurns(history);    });  });}// Fire it up! Mounts on document.body by default..drawMain();
CopyEdit

<style>.AbdStl1{display:grid;gap:0.5em;grid-template-columns:1fr 1fr 1fr;}.AbdStl1 > *{width:2em;height:2em;padding:0;}</style><main class="row"> <div class="box">  <div class="AbdStl1">   <button class="square"></button>   <button class="square"></button>   <button class="square"></button>   <button class="square"></button>   <button class="square"></button>   <button class="square"></button>   <button class="square"></button>   <button class="square"></button>   <button class="square"></button>  </div> </div> <div class="box" style="flex: 1 1 0%;">  <h4>Current player: X</h4>  <div>Select a turn:</div>  <button style="margin-right: 0.5em; margin-top: 0.5em;">0</button> </div></main>

更多示例:

学习 Aberdeen

当然，您可能还想研究上面的示例！

新闻

设置

Member Visibility

ThemeOSLightDark

On This Page

Aberdeen

What's this?TutorialGitHubAberdeen - v1.0.0