4. 宏指令 -- Highway MVVM

文本元素中屬性值替換

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