迷你MVVM框架 avalonjs 组件编写指南

avalon经过半年的宣传,已经有不少公司在使用avalon应用于它们内外网应用或移动项目,比较大牌的客户有百度,搜狐,金山,边缘,去哪儿……最近成为去哪儿的前端架构师后,掌握更多资源,可以随使抓个人帮忙写文档做测试写UI,之前的种种诰病都会迅速被解决掉的。因此大家不需要担心什么,放心试用avalon吧!

说说去哪儿的情况吧,现在我所在的酒店部门有一个40多号人的前端组,并且不断壮大。很早之前,他们就用我的avalon重构他们的组件库OnionUI 。对于一个公司来说,组件库是一个重要的财富,能让我们更快地进行开发迭代。至于一般的业务开发,藉凭avalon操作数据即操作DOM的机制,也是不费吹灰之力就能搞定。大头的还是组件,像阿狸的Kissy,成熟无比,组件应有尽用,这是我们奋斗的目标。因为去哪儿前端团队很早就使用avalon的UI绑定了。

avalon的UI绑定的语法如下:

  ms-widget="uiName, id?, optsName? "
  • uiName,必选,一定要全部字母小写,表示组件的类型
  • id 可选 这表示新生成的VM的$id,方便我们从avalon.vmodels[id]中获取它操作它,如果它等于$,那么表示它是随机生成,与不写这个效果一样,框架会在uiName加上时间截,生成随机ID
  • optName 可选, 配置对象的名字。这是指框架会找离它最近那个VM作为目标,然后在上面找与它同名的一个对象。如果你没有指定, 那么这个配置对象的名字与组件的名字同名。
<div ms-controller="xxx">
     <div ms-controller="yyy">
        <div ms-widget="dialog,$,$opt">
        </div>
    </div>
</div>
<script>
   avalon.define("xxx", function(vm){
        vm.uuu = "ssdf"     
   })
   avalon.define("yyy", function(vm){
        vm.dfd = "sdfdf"
        vm.$opt = {//这个对象是作为dialog的配置对象而存在
            width: 400,
            height: 200,
            toggle: false
        }
   })
</script>

编写一个组件,我们非常注重它的可配置性。avalon的UI绑定拥有三处用于定义配置的地方。第一处,就是上面提到的,在一个已存的VM中定义一个对象(最好将它定义不可监听的,以$开头或放在$skipArray数组中)。 它相当于一个父类。让一组UI共享相同的配置。第二处是位于UI绑定的构造器中,我们可以通过avalon.ui[widgetName].defaults访问到。它是让同一种组件的所有实例都共享相同的配置。第三处是在定义ms-widget所在的元素上,添加一些HTML5 data-*属性,格式为data- widgetName - optionName,比如你想为suggest组件定义一个叫toggle的配置项,那么就应该写作data-suggest-toggle,如果是一个叫currentValue,那么要将它改成"连字符风格",即将大写变小写前面再加一横杠,data-suggest-current-value。它们是用来制定当前UI实例的。

 <input ms-controller="bbb" ms-widget="datepicker"   data-datepicker-date-format="yyyy-MM-dd">

好了,我们正式介绍如何编写组件本身。我们要记住一点,avalon所有操作都与扫描机制息息相关,就像jQuery喜欢把它的API选择器引擎绑架在一起。为什么这样说呢,因为视图与代码分定义在不同的地方,只有经过扫描后,视图中的绑定才会挟持它们所在的元素节点与VM关联在一起。框架会默认在domReady之后扫描一次。如果这时我们用到的组件所对应的JS文件还没有加载好,那么当加载好后我们需要自己手动扫描。

       require(["avalon.datepicker"], function() {
                    avalon.define("ccc", function(vm) {
                        vm.datepicker = {
                            titleFormat: "",
                            changeYear: true,
                            yearSuffix: "year",
                            dateFormat: "dd   MM   yyyy",
                            titleFormatOnlyMonth: ["风月", "芽月", "花月", "牧月", "获月", "热月", "果月", "霞月", "雾月", "霜月", "雪月", "雨月"],
                            onHide: function(datepickerVM) {
                                avalon.log(datepickerVM.selectedTime)
                            }
                        }

                    })
                    avalon.scan()//手动扫描
                })

组件大抵都是以下样子,留意一下里面的注释:

 define(["avalon.position", "text!avalon.datepicker.html"], function(avalon, tmpl) {

   // 必须 在avalon.ui上注册一个函数,它有三个参数,分别为容器元素,data, vmodels
    var widget = avalon.ui.datepicker = function(element, data, vmodels) {
       var $element = avalon(element), 
       options = data.datepickerOptions, //混合好的配置对象,它由上面提到的三种配置组成
       msData = element.msData //原元素拥有的所有ms-*绑定属性组成的对象,2014.2.28的版本才有

        var model = avalon.define(data.datepickerId, function(vm) {
           ////优先添加用户的配置,防止它覆盖掉widget的一些方法与属性
            avalon.mix(vm, options)
            vm.currentYear = now.getFullYear()//其他属性与方法
            vm.currentMonth = now.getMonth()
            vm.currentDate = now.getDate()
           //.....
            getWeeksMulti(now, vm.numberOfMonths)
            vm.$watch("toggle", function(bool) {
                if (bool && datepickerEl) {
                         //...........
                }
            })
        })
        avalon.ready(function() {
            $element.bind("focus", function() {
                model.toggle = true
            })
            datepickerEl = avalon.parseHTML(tmpl).firstChild
            document.body.appendChild(datepickerEl)
            avalon.scan(datepickerEl, [model].concat(vmodels))//内部手动扫描
        })
        return model//必须返回新VM

    }
    widget.defaults = {
        dayNames: "日一二三四五六".split(""), //设置日历上方的星期显示
        dayNameTitles: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"], //设置鼠标移上去时,星期的title
        monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        changeMonth: false,
        changeYear: false,
        toggle: false,
        yearRange: "y-10:y+10", //你只能改动这里面的数字
        showOtherMonths: true,
        showButtonPanel: false,
        closeText: "Done", // Display text for close link
        prevText: "Prev", // Display text for previous month link
        nextText: "Next", // Display text for next month link
         //......
        dateFormat: "MM/dd/yyyy"//日期格式,自己设置
    }
    return avalon//必须返回avalon
})

这里需要着重留意的是data里面有两个属性,一个叫"组件名+Options",是一个对象,如果它里面有widget+"Id"这个属性,那么新生成的VM就是用它作为它的$id。 一个叫"组件名+Id",就是新生成的VM的$id。组件必须注册到avalon.ui上,它的构造器必须定义一个叫defaults的默认配置项。

另外,由于扫描从外到里,当它扫描了ms-widget所在的元素,如果此元素里面还有子元素, 并且它们的绑定属性需要用到新VM的某一些字段,这时让它继续扫下去就有出错的危险。我们可以先它的所有子元素放到一个文档碎片中。待到新VM中出来后,再插回原地置,然后手动扫描。

为了方便大家编写组件,avalon还暴露了getVModel, getWidgetData, parseExprProx等接口,让大家自行解析绑定属性。

大家可以参考下面官方组件编写自己的UI组件。

如果您觉得这文章对您有帮助,可以打赏点钱给我,鼓励我继续写博,我的支付宝

迷你MVVM框架 avalonjs 组件编写指南,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。