现在所有的前端框架、视图库，不管是 Vue、React、Angular 还是微信小程序。都是在模板、HTML 里面进行数据绑定、函数绑定，每次都要在 HTML 里面写这些内容是非常繁琐的。而且 HTML 语法啰嗦，并不能说得上好维护。
能否反过来思考，从数据、事件处理函数出发，以它们为核心自动生成对应的 HTML 文件核心结构。并且可以基于这种结构再做维护，让 HTML 回归结构和样式的本源。
核心思想：数据（data）和操作数据的方法（method）才是程序设计的核心，HTML 结构不是。
HTML 和数据之间的桥接关系可以细分一下：
- 文本插入:
<span>{{title}}</span> - 属性插入:
<div class="{{colorTheme}}"> - 事件处理：
<button onClick="{{handleSubmitForm}}"> - 循环模板：
<div forEach="{{users}}" /> - 条件渲染：
<h1 if="{{isShowTitle}}" />
我们可以在逻辑层面就通过特定的方式简单地声明这几种关系：
class Page {
/** 文本插入 */
@h1('title').text()
public tittle: string
/** 属性插入 */
@div('container').attr('class') // or @div('container').class()
public colorTheme: string
/** 事件处理 */
@button('submit-button').click()
public handleSubmitForm() {}
/** 循环模板 */
@div('users').forEach()
public users: Users[]
/** 条件渲染 */
@h1('head').ifShow()
public isShowTitle: boolean
}当然可以拓展更多的方便的桥接工具方法，例如数据双向绑定：
class Page {
@h1('title').text()
public title: string = ''
@button('clear').text()
public buttonText: string = '清除'
@input('title-input').change()
@databind('title')
public handleTitleChange() {}
@button('clear').click()
public handleClearTitle() {}
}这样会生成对应的 HTML 结构：
<h1 title>{{title}}</h1>
<input title-input onChange="handleTitleChange" />
<button clear>{{buttonText}}</button>用这样的方式可以写一个 TodoApp：
@autoMarkup()
class Home {
public onLoad(): void {
}
///////////////// 中间程序会根据以下的配置生成 wxml 并且绑定事件 ///////////////////////////
/**
* 自动生成 <view wx:for="{{todoList}}" />
*/
@view('todo-list').forEach()
public todoList!: User[]
/** 自动生成 <input bind:change="handleInputToDoTitle">，并且自动修改 data.title */
@input('todo-input').change()
@databind('title')
public handleInputToDoTitle() {}
/** 自动生成 <button bind:tap="handleTapAddTodo"> */
@button('add-todo').tap()
public handleTapAddTodo() {
this.setData({ todoList: [...todoList, { title: this.data.title } ], title: '' })
}
/** 自动生成 wx:for 的 view 里面的 checkbox，并且自动修改元素的 done: true/false */
@checkbox('todo-list > check-todo').change()
@toggle('todoList[index].done')
public handleToggleTodo() {}
/** 自动生成 wx:for 的 view 里面的 <button>，并且删除点击的时候删除 todoList[index] */
@button('todo-list > delete-todo').tap()
@remove('todoList[index]')
public handleDeleteTodo() { }
}这时候会产生另外一个问题，因为 HTML 是通过代码生成的，如何给它加上样式？如果强行改这个文件，例如给 <h1 title> 里面加入了一个 <div>：
<h1 title><div class="red">{{title}}</div></h1>那么就和代码里面写的 @h1('title').text() 产生了不一致的结果，这时候生成程序应该怎么处理这种情况？如果再次生成一次 {{title}}：
<h1 title>{{title}}<div class="red">{{title}}</div></h1>这样明显有病。
如何在 可以在生成的代码中添加结构和样式的同时，又要保证生成的元素和代码中配置的一致性 是个大问题。
如果可以随意修改生成的核心 HTML 代码，会导致一致性问题。设想可以加入修改限制：
你可以随意调整生成的 HTML 元素的位置，但是不能删除它。
例如，文本属性插入必须在原来的父节点内、循环模板内部元素结构和父元素保持层级关系（嵌套深度的可以变化，嵌套关系不能发生改变）。举个例子：
class Page {
@h1('head').text()
public title: string
@div('user').forEach()
public users: User[]
@button('user > remove-user').click()
public handleClickRemoveUser(): void {}
}会生成 HTML 结构：
<h1 head>{{head.text(title)}}</h1>
<div user forEach="users">
<button remove-user onClick="handleClickRemoveUser"></button>
</div>生成的核心元素的抽象嵌套结构是：
* head -> head.text
* user -> remove-user这时候这么去改 HTML 结构是合法的：
<div user forEach="users">
<div>
<span>{{user.name}}</span>
<button remove-user onClick="handleClickRemoveUser"></button>
</div>
</div>
<h1 head>
<div class="red"> {{head.text(title)}} </div>
</h1>因为它们的嵌套结构没有发生改变：head.text 还在 head 里面，remove-user 还在 user 里面。
* user -> remove-user
* head -> head.text但是如果这么去改：
<div user forEach="users">
</div>
<button remove-user onClick="handleClickRemoveUser"></button>是不合法的，因为这样的嵌套结构就变成了：
* user
* remove-user有两个问题：
- 把 head 元素删除了，违反了原则 1
- 原来 remove-user 是在 user 下面的，现在被搞出来了，嵌套关系发生了改变。违反了原则 2
这时候应该报错，因为已经产生了和原有代码配置中的抽象嵌套结构不一致的情况。
但是调整平行元素的嵌套关系是不会发生是合法的，例如改成：
<div user forEach="users">
<h1 head>{{head.text(title)}}</h1>
<button remove-user onClick="handleClickRemoveUser"></button>
</divhead 和 user 原来是平行关系，现在变成嵌套关系；其他元素原来已经有的嵌套关系没有发生变化，是合法的。
* user -> head -> head.text
-> remove-user保持两个原则：
- 生成的元素必须存在，不能删除
- 已有嵌套关系不能被改变，但平行关系可以变成嵌套或者调整顺序变
的条件下，HTML 可以随意修改调整结构和样式，并且又可以保持和代码配置的一致性。
解决了 HTML 和配置的一致性问题之后，修改 HTML 结构问题就得到了解决。到时候甚至可以做 Lint 来保证上述原则不被违反。
这时候还有另外一个问题：修改了代码里面的配置，HTML 里面的核心结构怎么同步调整和修改（HTML 可能在不违反一致性原则的情况下调整过）？
还好...