快速開始 — $mol

快速開始

從 React 或 Vue 過來，覺得哪裏都對不上？先讀

心智模型：五分鐘講清 computed、watch、生命週期鉤子和資料載入都去了哪裏。本頁帶你從一個空資料夾走到一個可執行的響應式 $mol 應用，大約需要十五分鐘。下面每段程式碼都是真實可用的——原樣複製即可。元件你會用普通的 TypeScript 來寫。$mol 另有一種更短的元件描述格式 view.tree，下一頁你就會遇到它。這裡用不上：不管哪種寫法，$mol 元件都只是一個普通的類別。

你需要什麼

Node.js 18+ 和 git。就這些。你無需安裝全域 CLI，也無需產生日後還得費力理解的樣板程式碼。$mol 應用位於 MAM 工作區內，而它已經知道如何建構和執行它們。

1. 取得工作區

MAM 是 $mol 的建構工具和模組登錄表。複製一次並安裝：1git clone https://github.com/hyoo-ru/mam.git ./mam2cd mam3npm install4npm startnpm start 會在 http://localhost:9080/ 啟動開發伺服器。它會監看你的檔案並自動重新建構——讓它在自己的終端機裡一直執行。

2. 建立一個模組

一個 $mol 應用就是一個資料夾。選一個命名空間（你自己的，例如 my）和一個名字（hello）：1mkdir -p my/hello要記住的一條規則：元件名中的底線是資料夾分隔符。$my_hello 位於 my/hello/，而 $my_hello_form 會位於 my/hello/form/。模組資料夾名永遠不含底線。現在在 my/hello/ 裡加入兩個檔案。

1<!doctype html>2<html mol_view_root>3 <head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1" />6 </head>7 <body mol_view_root>8 <div mol_view_root="$my_hello"></div>9 <script src="web.js"></script>10 </body>11</html>mol_view_root="$my_hello" 屬性會在頁面載入時掛載你的元件。

hello.view.ts — 元件

1namespace $ {2 3 export class $my_hello extends $mol_page {4 5 title() {6 return 'Greeting'7 }8 9 body() {10 return [ this.Name(), this.Message() ]11 }12 13 @ $mol_mem14 Name() {15 const obj = new this.$.$mol_string16 obj.hint = () => 'Enter your name'17 obj.value = ( next?: string ) => this.name( next )18 return obj19 }20 21 @ $mol_mem22 name( next?: string ) {23 return next ?? ''24 }25 26 @ $mol_mem27 Message() {28 const obj = new this.$.$mol_view29 obj.sub = () => [ this.greeting() ]30 return obj31 }32 33 greeting() {34 const name = this.name()35 return name ? `Hello, ${ name }!` : 'Please enter your name'36 }37 38 }39 40}在 GitHub 上編輯此頁這有幫助嗎？是否上一頁心智模型下一頁從 TypeScript 到 view.tree本頁內容你需要什麼 1. 取得工作區 2. 建立一個模組 index.html — 進入點 hello.view.ts — 元件 3. 執行 4. 加入第二個響應式值 5. 檢查你的建構你建構了一個 $mol 應用