Avalon2初体验

近日，由于项目进度需要，对现有项目进行了重构。由于目前的项目还没有实现真正的前后端分离（以后会依次重构），在时间紧迫的顺序产品迭代的情况下，实现分离确实有限前后端同时开发（主要是前端开发人手不足）。所有的决定都是为了改造一些影响项目开发进度和团队发展的历史遗留问题（包括模块开发、配置、前端渲染引擎等方面的改造）。模块开发和配置改造这里不再赘述。需要的同学自己脑补一下。流行的模块化思想的产物有requirejs、seajs（项目中使用）等。目前比较流行的前端MVVM框架包括Angular、React、Avalon等，因为前两者在后续放弃了对IE的支持versions（老版本对ID的支持不是很友好，这也是我直接放弃前两个的直接原因），avalon是一个基于virtualDOM和属性劫持的mini，易用，高性能，带有兼容性极佳，支持移动端开发、后端渲染、WEBComponent式组件开发，无需编译，开箱即用。avalon虽然体积小，但是五脏六腑一应俱全，包括虚拟DOM、指令（自定义组件开发和完善的第三方组件库）、双向绑定（相对于原来用ejs渲染）、过滤器、校验、和服务器端渲染。等等……直接上例子：html:<正文ms-controller="test">

你好，{{@name}}！

{{$index}}--{{el}}

是不是类似于我们熟悉的Angular等前端MVVM架构和？直接定义一个avalon作用域（Avalon的作用域也是向上冒泡查找），通过$id属性properties，而html是直接通过“{{@aa}}”或者“ms-text”属性绑定的（avalon有个“卖点”就是“改model改View”，其实就是通过特性虚拟DOM的变化实时监听，达到局部更新视图的效果，所以有很多状态在我们的项目中是不可或缺的——这类似于React中的“状态机”，需要在一个合理的方式）比如常见的Tab页切换：html:

Tab1Tab2

js:varsearchNav=avalon.define({$id:"searchNavCtrl",active:1,checkSearch:function(indx){if(indx==1){this.active=1;}else{this.active=2;}}});只要上面几行代码就能搞定这个功能，比直接操作DOM重要多了。根据上面的代码不难发现，avalon的属性名是以字符'ms-'开头的。常用属性如下：多个属性并列时，建议使用小写法（一些保留字节属性需要加单引号如id、class等，建议全部按顺序加统一格式):0?{'class':'productmsgchildOption'}:{'class':'productmsg'}]"ms-click="@showHideIncome(pd,$event)"ms-mouseenter="@showChildEnter($event)"ms-mouseleave="@showLeaveEnter($event)"ms-for="($index,pd)initem.data_list">待续.....