什么是指令
从技术上来说,dagger.js是一个指令驱动开发框架(DDD),指令是用户代码执行的唯一入口。如果把页面看做是一辆汽车,那么dagger.js相当于车辆的发动机,指令则是遍布车身底盘的传动齿轮。
形式上,指令是具有特定结构的元素属性。在运行时当中,指令将转化为一个回调函数,由框架在满足条件时触发调用。
宿主元素与平凡元素
声明了指令的DOM元素称为该条指令的宿主元素。
在一个元素上可以声明任意条指令,没有声明任何指令的元素称为平凡元素。
指令的结构
一个典型的指令由“ 前缀 + 名称 + 修饰符(可选)+ 表达式 ” 四部分组成,下面的input元素上声明了一个名为“value”的控制指令:
<input $value#number="expression">
在上面的html片段中,input元素是指令的宿主元素,“$”是指令前缀,“value”是指令名称,“number”是指令修饰符,“expression”是指令表达式。
指令的类型
dagger.js定义了四种不同类型的指令:
| 类型 | 前缀 | 支持修饰符 | 触发条件 | 触发次数 | 举例 |
|---|---|---|---|---|---|
| 生命周期指令 | + | ✔️ | 元素创建或销毁 | 一次 | +loading |
| 控制指令 | $ | ✔️ | 依赖数据发生变化 | 多次 | $each |
| 事件指令 | + | ✔️ | 用户操作或系统事件 | 多次 | +click |
| 元指令 | @ | ❌ | 框架对页面元素解析 | 一次 | @raw |