avalon框架系列-指令(一)

avalon的指令是一个非常重要的东西,它用来引入一些新的HTML语法, 使元素拥有特定的行为。

   指令一共拥有3种形式

        插值表达式

        自定义标签

       绑定属性

先说说两个比较少的形式:插值表达式和自定义标签

     1.插值表达式

       跟Vue框架的一样,都是一对双花括号: {{}},

       但是avalon框架里,花括号内部的值会带上一个 @ 符号,比如: <div>{{@arr}}</div>,

       如果仅仅只是展示数据信息的话,不是很推荐用插值表达式的形式,

       一方面是性能低(官方文档说的,性能问题我也不清楚),另一方面在页面渲染较慢的情况下,会直接显示出花括号和其中的变量名,用户体验感相当差

       此时更适合使用的是ms-text指令.

      其次,在花括号中可以进行较为简单的运算,如:字符串拼接 +, 数字运算等,

     也可以配合带有格式化的过滤器一起使用,比如:uppercase lowercase truncate等,

     但是这些功能使用ms-text指令也可以去写成这样的形式,并且性能高一些,所以插值表达式的形式尽量不用最好

    2.自定义标签

     以ms-开头的自定义标签, 我们需要用avalon.component方法定义它,然后在里面使用ms-widget指令 为它添加更多行为.

      以上这句话的描述,显而易见,自定义标签用来分装组件了,我所在项目里面用到了分页组件就是采用指定标签的形式来实现功能的

     avalon.component方法有两个参数,第一个标签名,必须以ms-开头;第二个是配置对象.

     配置对象里也有4个配置项

       1.template,自定义标签的outerHTML,它必须是用一个普通的HTML元素节点包起来,里面可以使用ms-*等指令

        2.defaults,用来定义这个组件的VM有什么属性与方法

        3.soleSlot,表示自定义标签的innerHTML为一个默认的插入点 (或可理解为定义标签的innerHTML为当前组件某个属性的属性值) ,可选

       4.getTemplate, 用来修改template, 依次传入vm与template, 返回新的模板. 可选 (getTemplate一般用不到)

      用分页组件做个例子,有基础的可以直接取看官网链接的Git仓库上的代码

    代码格式:

          avalon.component('ms-page', {

            template: pager,

           defaults: {},

            soleSlot: 'text'

       })

     重点是default配置对象里面的内容,可以在这里给组件添加更多的属性和行为方法,需要注意的有几个地方:

    1. onPageClick

    这个属性的值一般是固定的,格式为: onPageClick: avalon.noop,//在页面配置函数

     页面上的点击是要被重写的,具体的代码是在使用组件时候的定义的配置对象里,会重写onPageClick函数和tolPage以及isShow属性

    2.toPage函数

    函数名可以自己封装时候随意改动,但是内容基本是不变的

    function (p) {

      var cur = this.currentPage

      var max = this.totalPages

      switch (p) {

         case 'first':

               return 1

        case 'prev':

              return Math.max(cur - 1, 1)/*从第一页开始*/

        case 'next':

            return Math.min(cur + 1, max)

        case 'last':

             return max

       default:

            return p

     }

},