avalon2学习心得（1）

　　github上，avalon2的项目描述是这样的：“avalon2是一款基于虚拟DOM与属性劫持的 迷你、 易用、 高性能 的 前端MVVM框架， 适用于各种场景, 兼容各种古老刁钻浏览器, 吸收最新的技术成果, 能迅速堆砌组件与应用。”而对于我来说，一方面是由于项目的需要。另一方面是avalon的学习成本确实比ng低了相当多，个人感觉入门还是相当快的。当然，这也可能是因为个人有学习angular的基础在里面。学习了一个多礼拜的avalon2，是时候总结下这段时间的学习成果了。

　　1、通用形式为

<div ms-controller="AAA">
    {{@name}}:{{@color}}
</div>
<script type="text/javascript">
        avalon.define({
        $id:"AAA",
        name:"label",
        color:'red'
    });
</script>

 得到的结果为。具体来说可以分成两个方面，一方面是html语句，与ng相同，定义一个不可复用的控制器，使用指令ms-controller；另一方面，在js代码中的常用形式即为avalon.define({});其中$id的内容表示控制器的名称（如上为AAA），其他变量可以自由设置，以逗号分隔开。与avalon1不同的是，使用avalon1时，绑定数据的时候只需要使用双花括号，而现在需要加上符号"@"或者"##"才能实现数据的单向绑定。

　　2、实现数据双向绑定。

　　angular中使用ng-model进行双向绑定，实时将数据展示到前台。avalon2使用指令ms-duplex来进行数据的双向绑定。如以下代码:

<div ms-controller="BBB">
    <input type="text" ms-duplex="@yuyuyu">
    {{@yuyuyu}}
</div>
<script type="text/javascript">
    avalon.define({
        $id:'BBB',
        yuyuyu:111
    });
</script>

得到的结果如图：

改变input里面的值，显示的值也会相应改变，这就是avalon2中简单的双向绑定。

3、属性操作。属性操作html中使用的指令是ms-attr，它的值是一个对象。即使用一个ms-attr绑定所有的自定义属性。而且，所有的指令最好写在一行以内，以提高性能。

4、样式操作。使用指令ms-css，处理思路和ms-attr一样。需要注意的是，带“-”的css属性名需要使用驼峰命名法，或者添加引号。例如font-size要写成fontSize或者ms-css="{{'font-szie':@fontSize}}"

5、循环操作。使用指令ms-for，和ng-repeat类似，ms-for="el in @eles"。进行循环的时候，同时可以进行过滤操作，形如：ms-for="el in @eles | filterName",filterName可以是自定义的过滤指令或者内置的过滤指令。想要获取特定的某个循环因子，可以使用$index来获得.

 6、组件

　　avalon2中组件的使用形式主要是以下几种：

<xmp ms-widget='{is:"ms-button"}'></xmp>
<wbr ms-widget='{is:"ms-button"}'/>
<template ms-widget='{is:"ms-button"}'></template>

或者可以跟ng一样直接使用，即<ms-button></button>.js中的书写方法如下：

avalon.component('ms-button', {
        template: '<button type="button"><span><slot name="buttonText"></slot></span></button>',
         defaults: {
               buttonText: "默认内容"
           },
             soleSlot: 'buttonText'
 })

 

　　断断续续学了一周多，学到的东西都不是很深，日还还要多多深入学习。