快速上手 — $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 应用