文本元素中属性值替换
<span>hi, i am {{name}}, {{old}} ages old</span>
// 无效。宏指令不能有相邻兄弟节点。
<span>hi, i am {{name}}, {{old}} ages old <strong>。</strong></span>
宏指令不能有相邻兄弟节点,否则无法生效
4-1. 内建
4-1-1. 绑定
绑定部分参考第二章节2. 绑定,同。
双向绑定-安全 | {{ prop }} | hi, i am {{name}} |
---|---|---|
双向绑定-非安全 | {{{ prop }}} | hi, i am {{{name}}} |
单向绑定-安全 | [[ prop ]] | hi, i am [[name]] |
单向绑定-非安全 | [[[ prop ]]] | hi, i am [[[name]]] |
4-2. 自定义
自定义宏指令为一个工厂函数
4-2-1. 入参
- el:当前元素。<span>hi,user.name</span>中 el值为$(span)。
- exp:表达式。hi,user.name中 exp值为’{{user.name}}’
- $update: 更新函数。hi, i am {{name}}, {{old}} ages old中有两个宏指令实例,任意一个值发生变化都需要触发更新。
- $scope: 当前作用域。
- $ctx: 当前上下文。
// 定义一个宏指令工厂函数,将数值前添加$符,格式为$100$
const money = function ({$exp, $update, $scope, $ctx}) {
const money = $exp.replace
};
4-2-2. 出参
- $mount: 生命周期函数,挂载时调用
- $unmount: 生命周期函数,销毁时调用
- iterator:迭代器工厂函数,返回替换的内容。返回值可为函数或者常量。值为函数时接收一个 text参数,为当前的文本内容;常量时需要返回$value值。
4-2-3. 全局
使用Highway.marco定义,需指定正则表达式和宏指令工厂函数
4-2-4. 局部
指定视图中有效,通过$marcos指定,需指定正则表达式和宏指令工厂函数
4-2-5. 实例
自定义宏指令,将数值转化为百分比格式,指令格式为 prop 或 [prop] , 其中指定 prop 为双向绑定, [prop] 单向绑定。
examples/macros/customized.html
<div id="app">
<p>two way bind is: ${ratio}$</p>
<p>one way bind is: $[ratio]$</p>
<button hi-on:click="change">Change</button>
</div>
// 自定义指令
const percentage = function ({$exp, $update, $scope, $ctx}) {
const prop = $exp.replace(/[\\${}\[\] ]/g, '');
const handler = function () {
return ($scope.$get(prop) - 0) * 100 + '%';
};
// 双向绑定
if (/\$\{[^\\}]+\}\$/.test($exp)) {
return {
$mount() {
$scope.$watch(prop, $update);
},
$unmount() {
$scope.$unwatch(prop, $update);
pipeline.destroy();
},
$iterator($text) {
return $text.replace($exp, function () {
return handler();
});
}
}
} else {
return {
$iterator: {
$value: handler()
}
}
}
};
// 全局
//Highway.macro('\\$\\{[^$]+\\}\\$|\\$\\[[^$]+\\]\\$', percentage)
const app = new Highway({
$el: $('#app'),
$scope: {
ratio: 0.95
},
// 局部
$macros: {
'\\$\\{[^$]+\\}\\$|\\$\\[[^$]+\\]\\$': percentage
},
change() {
this.$scope.$set('ratio', '0.90')
}
});