4. 宏指令 -- Highway MVVM

最新推荐文章于 2016-12-31 20:38:21 发布

原创最新推荐文章于 2016-12-31 20:38:21 发布 · 264 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#mvvm

Highway 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种文本元素中的属性值替换方法，包括宏指令的绑定方式：单向与双向，并探讨了如何自定义宏指令，实现数值格式转换等功能。

文本元素中属性值替换

<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')
    }
  });