如何做一个avalon组件

在avalon1.5中改用更直观的自定义标签来声明组件,废掉ms-widget,引入更强大的生命周期管理,可以让组件任意套嵌。

组件是由JS,HTML,CSS构成

JS 以AMD形式组织,引入HTML与CSS

HTML是组件的模板, 模板里面使用ms-*等指令

JS内部是一个avalon.component方法的调用

avalon.component有两个参数,第一个是标签名(务必全部小写并且中间存在冒号,冒号前面是ms, oni等表示UI库的名字,默认ms已经生效,否则要用avalon.library来声明,冒号后面是组件的名字)

下面一个样板代码:

define(["avalon","template.html","style.css"], function(avalon, template){
    var _interface = function(){}
    avalon.component("ms:button",{
       $template: template,
       a: 1,
       b: 2,
       aMethod: _interface ,//组件的方法,在开始必须为空方法
       bMethod: _interface,//组件的方法,在开始必须为空方法
       onAevent: _interface,//组件的事件回调,在开始必须为空方法,必须以on开头,后面是大写,如onSelect
       onBevent: _interface,//组件的事件回调,在开始必须为空方法, 必须以on开头,后面是大写
       $init: function(vm, el){
          //vm就是当前组件的vm, el就是此自定义标签
       },
       $ready: function(vm, el){
          //在这里重写所有空方法
       },
       $dispose:function(vm, el){
          //在这里移除事件与清空节点内部
          el.innerHTML = ""
       }
    }
  })
  return avalon
})

avalon.component会在该组件$init回调被调用时,在avalon.vmodels上添加该组件的VM,此VM就是$init, $ready, $dispose传入的第一个参数,它拥有a, b, aMethod, bMethod等你声明好的属性与方法。

当然,其实还有$construct, $$template, $childReady等回调,还有$replace, $container, $slot等配置项。详见官网

然后你在页面引入avalon,与该组件的JS(当然以AMD方式引入),然后页面使用<ms:button></ms:button>这组件就会自动实例化!

至于组件里面有什么东西,就要看你的template有什么东西。

如果你在使用自定义标签时,<ms:button c="111"></ms:button> ,那么组件的VM就会多出一个c属性,值为111, 因为标签内,除了id,$id, $slot, data-*属性, ms-*属性都会自动复制到vm上。如果是一个弹出层,众所周知,弹出层都有title与content这两大区域,你又不想写在JS中,可以直接写在自定义标签,那么可以使用HTML5的插入点机制。

<ms:dialog>
<p slot="title">我是标题</p>
<div slot="content">
<iframe>许多内容</iframe>
<form>许多内容</form>
</div>
</ms:dialog>

自定义标签下的子元素如果带有slot属性,它们就转换同名的vm属性,其值是一个文档碎片,包括着刚才的p与div标签

avalon.component("ms:dialog",{
  title:"",//这两个属性需要预先声明,到时会变成文档碎片
  content: "",
  $ready: function(vm, elem){}
  //.....
})

然后你模板里面ms-html绑定,它就会自动填空到里面去。比如我们是这样定义ms:dialog组件的模板:

<div class="oni-dialog-inner">
    <div class="oni-dialog-header">
        <div class="oni-dialog-close" ms-click="_close" ms-if="showClose">
            <i class="oni-icon oni-icon-times"></i>
        </div>
        <div class="oni-dialog-title">{{ title|html }}</div>
        <div class="oni-dialog-content">{{content|html}}</div>
        <div class="oni-dialog-footer oni-helper-clearfix">
            <div class="oni-dialog-btns">
                <oni:button data-button-color="success" ms-hover="oni-state-hover" ms-click="_confirm">{{confirmText}}</oni:button>
                <oni:button ms-if="type =='confirm'" ms-click="_cancel">{{cancelText}}</oni:button>
            </div>
        </div>
    </div>
</div>

有了插入点机 ,我们为组件添加大片的内容就非常简单。并且组件里面还可以有其他代表组件的自定义标签。这样一层层累积木,既直观又轻松。由于它存在严密的生命周期管理,我们也不怕如何计算父组件这样的难题了。有关组件的宽高计算,然后在$ready回调里计算,因为这时子组件肯定渲染才会执行上方父组件的$ready!

大家可以参考这里的组件源码进行学习,打造自己一套UI库。

avalon组件的更多相关文章

  1. 如何做一个avalon组件

    在avalon1.5中改用更直观的自定义标签来声明组件,废掉ms-widget,引入更强大的生命周期管理,可以让组件任意套嵌. 组件是由JS,HTML,CSS构成 JS 以AMD形式组织,引入HTML ...

  2. 一步步编写avalon组件02:分页组件

    本章节,我们做分页组件,这是一个非常常用的组件.grid, listview都离不开它.因此其各种形态也有. 本章节教授的是一个比较纯正的形态,bootstrap风格的那种分页栏. 我们建立一个ms- ...

  3. 一步步编写avalon组件01:弹出层组件

    avalon2已经稳定下来,是时候教大家如何使用组件这个高级功能了. 组件是我们实现叠积木开发的关键. avalon2实现一个组件非常轻松,并且如何操作这个组件也比以前的avalon2,还是react ...

  4. 基于avalon1.4.x ----分页组件编写

    avalon分页组件 (1.4.x版本) 随着avalon2的推出,avalon1的官网已经不再维护了,现在似乎是找不到avalon 1.4版本的官方文档了,所以本文章所有的内容均不保证正确性,只能保 ...

  5. 迷你MVVM框架 avalonjs1.5 入门教程

    avalon经过几年以后,已成为国内一个举足轻重的框架.它提供了多种不同的版本,满足不同人群的需要.比如avalon.js支持IE6等老旧浏览器,让许多靠政府项目或对兼容性要求够高的公司也能享受MVV ...

  6. 搭建docker私有仓库 笔记

    抄送消息到企业微圈 avalon组件 twitterCopy/twitterCopy 说明 说明 说明 说明 说明 说明 该组件提供接口 开发者可以吧 有需要分享到微圈的的信息 发布到微圈中去. 应用 ...

  7. avalon实现分页组件

    前言 分页组件比较常见,但是用avalon实现的见的不多,这个分页组件,可以适配2种分页方式, 第一种是每次点击下一页,就请求一次后台,并返回当页数据和总条数,我称之为假分页: 第二种是一次性把所有数 ...

  8. SUI分页组件和avalon搞定ajax无刷新分页

    <div ms-controller="main"> <h2 class="pagination-centered">{{ title ...

  9. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

随机推荐

  1. hdu2089不要62(数位dp)

    #include <stdio.h> #include <string.h> ][]; ]; /* dp[i][0] 不含62,4 dp[i][1] 2开头 dp[i][2] ...

  2. Follow your hear(跟着心走)

    端午三天的哈尔滨之旅已经over,非常开心真的非常开心.听了刘四风老师的"为爱开讲.我爱这世界"的论坛,尽管.这三天老师讲的不多.可是句句是精华.Follow your heart ...

  3. VC6 鼠标钩子 最简单样例

    Windows系统是建立在事件驱动的机制上的,说穿了就是整个系统都是通过消息的传递来实现的.而钩子是Windows系统中非常重要的系统接口,用它能够截获并处理送给其它应用程序的消息,来完毕普通应用程序 ...

  4. Cocostudio学习笔记(4) LoadingBar+ TextField

    这同时录制两个控件的使用方法:LoadingBar和 TextField. -------------------------------------------------------------- ...

  5. Visual Studio 2010 将网站直接发布到远程站点

    原文:Visual Studio 2010 将网站直接发布到远程站点 这次说下如何将web应用程序直接发布到IIS服务器站点!!! 问题的由来 本人每天要发布更新的程序,所以每次更新的时候要做的工作: ...

  6. Echache整合Spring缓存实例讲解(转)

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主要介绍了EhCache,并通过整合Spring给出了一个使用实例. 一.EhCac ...

  7. HDoj-2084-号码塔-dp

    号码塔 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  8. Harry Potter and the Prisoner of Azkaban

    称号:Harry Potter and the Prisoner of Azkaban 作者:J.K. Rowling 篇幅: 448页 蓝思值:880L 用时:    11天 工具:  有道词典 [ ...

  9. POJ - 3249 Test for Job (DAG+topsort)

    Description Mr.Dog was fired by his company. In order to support his family, he must find a new job ...

  10. android性能测试内存泄漏

    1.什么是内存泄漏?     适用于该系统的内存使用内存泄漏,未回复(释放),该内存可以没有事业,也不能被其他人使用使用自己. 2.出有什么差别?    内存泄漏是分配出去的内存无法回收.    内存 ...