3. 指令 -- Highway MVVM

最新推荐文章于 2024-11-27 14:35:43 发布

原创最新推荐文章于 2024-11-27 14:35:43 发布 · 320 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#mvvm

Highway 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了Highway前端框架中的各种指令用法，包括内建指令如数据绑定、事件绑定等，以及如何自定义指令。提供了丰富的示例帮助理解。

3-1. 内建

3-1-1. hi-bind

元素innerHTML绑定

<!-- examples/directives/bind.html -->

<div id="app">
  <input type="text" hi-value="user.name"/>
  <div hi-bind="user.name">{{user.name}}</div>
</div>

const app = new Highway({
  $el: $('#app'),
  $scope: {
    user: {
      name: 'highway'
    }
  }
});

3-1-2. hi-value

表单组件的值绑定

text

<!-- examples/directives/value.html -->

<input type="text" hi-value="user.name">

password

<!-- examples/directives/value.html -->

<input type="password" hi-value="user.password">

number

<!-- examples/directives/value.html -->

<input type="number" hi-value="user.income">

tel

<!-- examples/directives/value.html -->

<input type="tel" hi-value="user.amount">

textarea

<!-- examples/directives/value.html -->

<textarea hi-value="user.description"></textarea>

select

<!-- examples/directives/value.html -->

<select hi-value="user.city">
 <option value="shanghai">shanghai</option>
 <option value="guangzhou">guangzhou</option>
 <option value="shenzhen">shenzhen</option>
</select>

radio

<!-- examples/directives/value.html -->

<input name="sex" type="radio" value="male" hi-value="user.sex"> male
<input name="sex" type="radio" value="female" hi-value="user.sex"> female

checkbox

<!-- examples/directives/value.html -->

<input name="hobbies" type="checkbox" value="sports" hi-value="user.hobbies"> sports
<input name="hobbies" type="checkbox" value="games" hi-value="user.hobbies"> games
<input name="hobbies" type="checkbox" value="reading" hi-value="user.hobbies"> reading

checkbox的绑定值是一个数组，如上，选中sports, games, 得到hobbies值为[‘sports’, ‘games’]

3-1-3. hi-on

事件绑定, 格式hi-on:event=”handler”，支持所有的DOM事件

触发时handler获得

$el: 触发元素
$ev: window.event事件

<!-- examples/directives/on.html -->

<div id="app">
  <button id="btn" hi-on:click="clickMe">clickMe</button>
</div>

const app = new Highway({
  $el: $('#app'),
  clickMe($el, $ev) {
    console.log(`element id is ${$el.attr('id')}, event type is ${$ev.type}`)
  }
});

3-1-4. hi-show

显示绑定，显示元素当属性值为true

<!-- examples/directives/show.html -->

<div id="app">
  <div hi-show="see">you can see me</div>
  <input name="show" type="radio" value="1" hi-value="see" checked> show
  <input name="show" type="radio" value="0" hi-value="see"> hide
</div>

false、’false’、”、’0’、null、undefined、0均被判断为boolean false

3-1-5. hi-hide

隐藏绑定，显示元素当属性值为true

<!-- examples/directives/hide.html -->

<div id="app">
  <div hi-hide="see">you can see me</div>
  <input name="show" type="radio" value="1" hi-value="see" checked> hide
  <input name="show" type="radio" value="0" hi-value="see" > show
</div>

false、’false’、”、’0’、null、undefined、0均被判断为boolean false

3-1-6. hi-if

插入元素当属性值为true，如为false将被移除

<!-- examples/directives/if.html -->

<div id="app">
  <div hi-if="ifMe">
    <p>you can see me</p>
    <my-component></my-component>
  </div>
  <input name="if" type="radio" value="true" hi-value="ifMe" checked> render
  <input name="if" type="radio" value="false" hi-value="ifMe"> destroy
</div>

<script id="template" type="text/template">
  <div>i am {{name}}</div>
</script>

const myComponent = Highway.extend({
  $template: $('#template').html(),
  $scope: {
    name: 'myComponent'
  },
  $mount() {
    console.log('>>>::myComponent rendered');
  },
  $unmount() {
    console.log('>>>::myComponent destroyed');
  }
});

const app = new Highway({
  $el: $('#app'),
  $components: {
    'my-component': myComponent
  }
});

false、’false’、”、’0’、null、undefined、0均被判断为boolean false

hi-if会触发局部编译/销毁过程，同时移除元素

hi-show/hi-hide仅会隐藏元素，并不会移除

3-1-7. hi-repeat

重复绑定

<!-- examples/directives/repeat.html -->

<div id="app">
  <ul>
    <li hi-repeat="user in data.users" hi-data:id="{{user.id}}">
      <p>{{user.name}}</p>
    </li>
  </ul>
  <button hi-on:click="change">change</button>
</div>

const app = new Highway({
  $el: $('#app'),
  $scope: {
    data: {
      users: [
        {
          'id': '001',
          'name': 'jackey'
        },
        {
          'id': '002',
          'name': 'suse'
        },
        {
          'id': '003',
          'name': 'ann'
        },
      ]
    }
  },
  change() {
    this.$set('data.users[2].name', 'highway');
  }
});

repeat指令会触发局部编译，同时临时伸展作用域

3-1-8. hi-src

元素src绑定

<!-- examples/directives/src.html -->

<div id="app">
  <img hi-src="imageUrl" width="100%"/>
</div>

3-1-9. hi-href

元素href绑定

<!-- examples/directives/href.html -->

<div id="app">
  <a hi-href="link">click me</a>
</div>

3-1-10. hi-data

元素data属性绑定, hi-data:dataProp=”prop”

<!-- examples/directives/data.html -->

<div id="app">
  <button hi-on:click="clickMe" hi-data:name="name">clickMe</button>
</div>

const app = new Highway({
  $el: $('#app'),
  $scope: {
    name: "highway"
  },
  clickMe($el) {
    alert($el.data('name'));
  }
});

3-1-11. hi-enable

元素enable绑定

<!-- examples/directives/enable.html -->

<div id="app">
  <button hi-enable="enable" hi-on:click="clickMe">button</button>
  <input name="enable" type="radio" value="1" hi-value="enable" > enable
  <input name="enable" type="radio" value="0" hi-value="enable"> disable
</div>

const app = new Highway({
  $el: $('#app'),
  clickMe() {
    alert(1)
  }
});

3-1-12. hi-disable

元素disable绑定

<!-- examples/directives/disable.html -->

<div id="app">
  <button hi-enable="disable" hi-on:click="clickMe">button</button>
  <input name="disable" type="radio" value="1" hi-value="disable" checked> disable
  <input name="disable" type="radio" value="0" hi-value="disable"> enable
</div>

const app = new Highway({
  $el: $('#app'),
  clickMe() {
    alert(1)
  }
});

3-1-13. hi-readonly

<!-- examples/directives/readonly.html -->

<div id="app">
  <p>{{name}}</p>
  <input type="text" hi-readonly="readonly" hi-value="name"/>
  <input name="readonly" type="radio" value="1" hi-value="readonly" checked> readonly
  <input name="readonly" type="radio" value="0" hi-value="readonly" > editable
</div>

const app = new Highway({
  $el: $('#app'),
  $scope: {
    name: 'highway'
  }
});

3-1-14. hi-attr

元素属性值绑定。hi-attr:domAttr=”prop”，任意绑定指定DOM属性值。

<!-- examples/directives/attr.html -->

<div id="app">
  <img hi-attr:src="imageUrl" hi-attr:width="width" />
</div>

const app = new Highway({
  $el: $('#app'),
  $scope: {
    width: '50%',
    imageUrl: './dog.jpeg'
  }
});

3-1-15. hi-css

元素css值绑定。hi-css:css=”prop”。

<!-- examples/directives/css.html -->

<div id="app">
  <div hi-css:background-color="{{bgColor}}">div</div>
</div>

const app = new Highway({
  $el: $('#app'),
  $scope: {
    bgColor: 'red'
  }
});

3-1-16. hi-class

元素样式值绑定。hi-class:unique=”obj[prop]”，遇多个中间以；分割

3-1-16-1. 直接量

3-1-16-1-1. 单个

<div hi-class="direct.bgColor">direct-0</div>
<div hi-class="direct.fontSize">direct-1</div>

3-1-16-1-2. 组合

中间以”,”号分隔，如使用多个hi-class指令，需指定uniqueid，例如hi-class:bgColor=”direct.bgColor”, uniqueid=”bgColor”

<div hi-class:bgColor="direct.bgColor", hi-class:fontSize="direct.fontSize">direct-2</div>
<div hi-class="direct.bgColor, direct.fontSize">direct-3</div>

3-1-16-2. 映射

3-1-16-2-1. 单个

<div hi-class="{'red': 'bg-red', 'green': 'bg-green'}[mapping.bgColor];">mapping-0</div>
<div hi-class="{'fs20': 'fs-20', 'fs40': 'fs-40'}[mapping.fontSize]">mapping-1</div>

3-1-16-2-2. 组合

中间以”,”号分隔，如使用多个hi-class指令，需指定uniqueid。

<div hi-class:bgColor="{'red': 'bg-red', 'green': 'bg-green'}[mapping.bgColor];" hi-class:bgColor="{'red': 'bg-red', 'green': 'bg-green'}[mapping.bgColor];">mapping-2</div>

<div hi-class="{'red': 'bg-red', 'green': 'bg-green'}[mapping.bgColor];{'fs20': 'fs-20', 'fs40': 'fs-40'}[mapping.fontSize]">mapping-3</div>

3-1-16-3. 示例

<!-- examples/directives/class.html -->

<style type="text/css">
  .bg-red {
    background-color: red;
  }

  .bg-green {
    background-color: green;
  }

  .fs-20 {
    font-size: 20px;
  }

  .fs-40 {
    font-size: 40px;
  }
</style>

<div id="app">
  <p>>>> direct - single</p>
  <div hi-class="direct.bgColor">direct-0</div>
  <div hi-class="direct.fontSize">direct-1</div>

  <p>>>> direct - combi</p>
  <div hi-class:bgColor="direct.bgColor", hi-class:fontSize="direct.fontSize">direct-2</div>
  <div hi-class="direct.bgColor, direct.fontSize">direct-3</div>
  <hr>

  <p>>>> mapping - single</p>
  <div hi-class="{'red': 'bg-red', 'green': 'bg-green'}[mapping.bgColor];">mapping-0</div>
  <div hi-class="{'fs20': 'fs-20', 'fs40': 'fs-40'}[mapping.fontSize]">mapping-1</div>

  <p>>>> mapping - combi</p>
  <div hi-class:bgColor="{'red': 'bg-red', 'green': 'bg-green'}[mapping.bgColor];" hi-class:bgColor="{'red': 'bg-red', 'green': 'bg-green'}[mapping.bgColor];">mapping-2</div>
  <div hi-class="{'red': 'bg-red', 'green': 'bg-green'}[mapping.bgColor];{'fs20': 'fs-20', 'fs40': 'fs-40'}[mapping.fontSize]">mapping-3</div>

</div>

const app = new Highway({
  $el: $('#app'),
  $scope: {
    mapping: {
      bgColor: 'red',
      fontSize: 'fs40'
    },
    direct: {
      bgColor: 'bg-red',
      fontSize: 'fs-20'
    }
  }
});

3-2. 自定义

自定义指令为一个工厂函数

3-2-1. 入参

参数

$el: 指定所在的DOM元素，为一个jQuery对象
$arg: 参数，例如hi-attr:title="myTitle",$ arg = ‘title’
$exp: 表达式，例如hi-attr:title="myTitle",$ exp = ‘myTitle’
$scope: 当前作用域，例如hi-attr:title="myTitle", 可以直接通过$ scope.$get(‘myTitle’)获取当前作用域中myTitle值。
$ctx: 上下文, 当前视图(子视图)实例this值

// 通过bg-color指令设置元素背景颜色 <div bg-color="#ff0000"></div>
const bgColor = function ({$el, $exp}) {
    $el.css('background-color', $exp)
};

3-2-2. 出参

$mount：生命周期函数，挂载时调用。
$unmount：生命周期函数，卸载时调用

3-2-3. 全局

全局有效，通过Highway.directive指定

Highway.directive('bg-color', bgColor);

3-2-4. 局部

指定视图中有效，通过View.$directives指定

3-2-5. 示例

自定义指令，指令格式为hi-bgcolor=”color”

<!-- examples/directives/customized.html -->

<div id="app">
  <div hi-bgcolor="#ff0000">highway</div>
</div>

const bgColor = function ({$el, $exp}) { //$ctx, $el, $arg, $exp
  $el.css('background-color', $exp);
};

//Highway.directive('hi-bgcolor', bgColor);

const app = new Highway({
  $el: $('#app'),
  $directives: {
    'hi-bgcolor': bgColor
  }
});

3-2-3. 指令模式

Highway中预置了指令模式，快速构建您的自定义指令，可通过Highway.directive.pattern指定

接收4个参数，依次为

$exp：表达式
$scope：作用域
$ctx：上下文
$updater：更新函数

<!-- examples/directives/pattern.html -->

<div id="app">
  <div hi-bgcolor="bgColor">highway</div>
</div>

const bgColor = function ({$el, $exp, $scope, $ctx}) { //$ctx, $el, $arg, $exp
  return Highway.directive.pattern($exp, $scope, $ctx, function ({newVal, secure}) {
    newVal = secure ? Highway.utils.secureHtml(newVal) : newVal;
    $el.css('background-color', newVal);
  });
};

//Highway.directive('hi-bgcolor', bgColor);

const app = new Highway({
  $el: $('#app'),
  $scope: {
    bgColor: 'red'
  },
  $directives: {
    'hi-bgcolor': bgColor
  }
});