简化的目的:
- 展现和逻辑分离。让页面模板文件仅仅和展现相关,从而方便做为 GUI Designer / 设计师工具的文件格式。
- 简化语法变种,方便 transpile 到不同的运行时平台,例如微信小程序。
- 修复了 jsx 语法不方便表达模板之间的 slot 组合关系的问题
简化后的页面模板使用体验大致如下所述
展现和逻辑分离
和 .vue 一个单文件定义组件不同,我们把组件拆分为 .tm 和 .ts 两个文件,例如
SomeComponent.tm
<html>
<body>
<div :title="myTitle" />
</body>
</html>
SomeComponent.ts
import * as Biz from '@triones/biz-kernel';
export class SomeComponent extends Biz.MarkupView {
public readonly myProp1: string;
public readonly myProp2?: string;
public get myTitle() {
return '..some title...' + this.myProp1;
}
}
当调用 SomeComponent 组件的时候,会创建对应的 SomeComponent.ts 这个类的实例。然后渲染页面的时候,会用 SomeComponent.tm 来渲染。通过 :title 这样的属性来绑定“展现”和“逻辑”,渲染的时候 get myTitle() 这个 getter 属性会被求值。
调用组件可以传参,例如
<SomeComponent myProp1="hello" />
这个时候,从 public readonly myProp1: string 上就可以取到传入的 myProp1 属性。没有传的 myProp2 属性就是 undefined。
对于事件处理,需要做如下声明
SomeComponent.tm
<html>
<body>
<button @onClick="sayHello">hello</button>
</body>
</html>
SomeComponent.ts
import * as Biz from '@triones/biz-kernel';
export class SomeComponent extends Biz.MarkupView {
public sayHello() {
// ...
}
}
和 vue 类似的是都是用 : 和 @ 来表达属性绑定和事件处理。和 vue 不同的是,在绑定的地方只能写属性名字引用对应的属性,不能写复杂的表达式。和微信的 wxml 语法类似,bind:tap 这样的事件绑定的地方,也是只能写一个 event handler 的方法名,不能写表达式。
习惯了在页面模板里写大量逻辑代码的同学会非常不习惯,觉得这是开历史的倒车。但是把逻辑从页面模板里分离之后,这个纯展示的页面模板是非常适合做为 GUI Designer 的持久化格式的,或者从 sketch / figma 这样的设计师工具导出。
零散小组件
为了避免写很多组件,要建很多文件。我们可以把相关的小组件,合并写在一个大文件里。例如这样
<template #default>
<Header />
<Body />
<Footer />
</template
<template #Header>
...
</template>
<template #Body>
...
</template>
<template #Footer>
...
</template>
这么写就省得建立 4 个组件了,合并写到一个组件里。如果没有写 <template #default>,那默认就是包裹在 <template #default> 里的。从语法上来说,也非常类似微信小程序的 wxml 的写法。只是微信小程序的 wxml 没有 <template #default>,而是直接写在了文件的顶层。
也就是这么写
<div>hello</div>
和这么写
<template #default>
<div>hello</div>
</template>
是等价的
给父组件传复杂参数
在 react / vue 中一个非常常见的做法是用 children 来表达数据属性。例如
<LineChart width={500} height={300} data={data}>
<XAxis dataKey="name"/>
<YAxis/>
<CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
</LineChart>
如果是 react 组件,往往会用 React.Children 来遍历这些子节点,从中提取数据做为参数来使用。也就是给一个组件传递 children,有的时候传的是组件,有的时候传的是渲染组件的函数,有的时候传递过去被当成 array/object 使用。这也是 jsx 语法从一开始没有设计好的地方。
这个问题的实质是类 html 语法,限定了属性是简单的字符串。如果我们这么写:
<LineChart XAxis="{ dataKey: "name" }" YAxis CartesianGrid="{ stroke: "#eee", strokeDasharray="5 5" } />
书写体验会非常难受,这一行 LineChart 组件的调用也会非常的长。把这些属性折行之后写成 children,就可以更结构化地进行书写。
为了改进类 html 语法的书写体验,我们在新语法里,增加了 # 的概念。
<LineChart :wdith="500" :height="300" :data="data">
<attr #XAxis dataKey="name"/>
<attr #YAxis>true</attr>
<attr #CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
</LineChart>
用 #xxx 的方式来表达,我是给组件传递了 xxx 属性。这样做为数据使用的 children,和做为组件使用的 children 就被区分开了。
给父组件传递 slot
#xxx 除了可以用来传递 attr 之外,也可以用来传递 slot。slot 分为三种:
- UI fragment:例如一个 card 组件有一个 title 区域是可以自定义的。那么可以定义一个名为 title 的 slot,允许使用者传入自己的实现。
- 会被多次实例化的 template:例如一个 ListView 的每个 ListItem 是可用户自定义的。但是和 card 组件的 title 不同,这里需要用户传入一个“函数”,因为每一行的数据是不一样的。
- 虚拟节点:微信小程序有一个概念叫虚拟节点。其实是上面所说的 template 的弱化形式。用户传入的是一个“组件名称”,而不是一个“函数”。然后根据传入的组件名字,会多次实例化该组件,达到用户自定义的目的。
我们先来看 UI fragment 形式的表达方式:
定义组件
<div class="container">
<header>
<slot :render="header" />
</header>
<main>
<slot :render="children" />
</main>
<footer>
<slot :render="footer" />
</footer>
</div>
通过 <slot> 来表达,这个地方可以用户自定义。
使用组件
<BaseLayout>
<fragment #header>
<h1>Here might be a page title</h1>
</fragment>
<fragment #children>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</fragment>
<fragment #footer>
<p>Here's some contact info</p>
</fragment>
</BaseLayout>
这里用 <fragment> 来表达,传入的是一个具体的实例,而不是可以被多次调用的参数。如果是 React,那么类型就是 ReactNode。
第二种就是传入可被多次实例化的 template
定义组件
<div class="container">
<header>
<slot :render="header" title="abc" />
</header>
<footer>
<slot :render="footer" title="xyz" />
</footer>
</div>
<slot> 渲染的额时候,额外提供了参数
使用组件
<BaseLayout>
<template #header>
<h1>Here might be a page title: {{ #header.title }}</h1>
</template>
<template #footer>
<p>Here's some contact info: {{ #footer.title }}</p>
</template>
</BaseLayout>
传入 template 和 fragment 不同,template 会捕获参数,从而可以在 template 内容里引用。template 比 fragment 更常用,所以有一种简写形式:
使用组件
<BaseLayout>
<h1 #header>Here might be a page title: {{ #header.title }}</h1>
<p #footer>Here's some contact info: {{ #footer.title }}</p>
</BaseLayout>
综上 #xxx 是一种传递各种复杂属性的写法。相比 jsx 的语法,折行书写更舒服。
引用组件
vue 没有在页面模板里写 import 的语法。最初 vue 是假设所有组件全局可引用的。而我们希望组件必须 import 了才可以使用,这样就方便引入第三方的组件。例如引用微信小程序原生语法书写的组件:
<import from="@vant/weapp/tag/index" as="VantTag"/>
<template #default>
<view>
<VantTag />
</view>
</template>
这里引用的 @vant/weapp 是外部第三方组件,通过 import 就可以直接被使用。import 后的组件可以当作“虚拟节点”传递出去使用。这个是微信小程序特有的概念:
<import from="@app/MyComps/MyHeader" />
<import from="@app/MyComps/MyFooter" />
<template #default>
<BaseLayout :header="<MyHeader/>" :footer="<MyFooter/>" />
</template>
BaseLayout 要声明自己接受这么两个抽象节点,所以要和普通的 slot 区分开来
<div class="container">
<header>
<slot :component="header" title="abc" />
</header>
<footer>
<slot :component="footer" title="xyz" />
</footer>
</div>
区别就是 <slot :component ..> 代替了 <slot :render ...>。
和 jsx 一样的习惯,如果是小写开头的组件,则是平台 native 的组件。例如 <div> <view> 这些都是不用 import 可以直接使用的。
引用 children
如果组件只有一个 slot 要传,那没有必要给这个 slot 命名了。缺省的 slot 名字就叫 children
定义组件
<div class="container">
<main>
<slot :render="children" />
</main>
</div>
使用组件
<BaseLayout>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</BaseLayout>
这个实际上等价于
使用组件
<BaseLayout>
<fragment #children>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</fragment>
</BaseLayout>
也就是普通写法下的子组件,其实是一个 fragment 类型的 slot。
用 slot 来实现分支和循环
有了 slot,就相当于有了回调函数。那么就可以把分支和循环变成内置组件的功能,而不是一种固定语法。比如内置一个叫 <dynamic> 的组件
<dynamic :visible="vip">
<p>you are vip</p>
</dynamic>
分支
<dynamic :slot="userType">
<fragment #vip><p>you are vip</p></fragment>
<fragment #normal><p>you are normal</p></fragment>
</dynamic>
循环
<template #default>
<ul>
<dynamic :expand="items" key="id"><MyItem #element></dynamic>
</ul>
</template>
<template #MyItem>
<span>{{ #MyItem.firstName }}</span><span>{{ #MyItem.lastName }}
</template>
核心区别
- 展示和逻辑分离,分成两个文件来写。不允许在页面模板里写表达式
- 改进 html 传递复杂属性写法不方便的问题,引入写在 tag body 中的 #xxx 属性
- 把 slot 做为第一等的公民,映射到各种运行时平台的三种 slot 类型
- 以 slot 为基础,用内置组件代替分支/循环的语法
语法很大程度上是口味问题。不是说这么写一定就比 jsx,vue,wxml 要高级。只是多了一种选择。如果你需要选择一种面向设计师的序列化格式,或者需要支持代码生成,可以考虑考虑上述的类 vue 语法。