摘要：最近因项目进展需求对现有项目进行重构，由于目前项目还未实现真正意义上的前后端分离后续会循序重构实现，在时间紧产品循序迭代的情况下，想一次性实现前后端分离精力实在有限主要是前端开发人力不足。
最近因项目进展需求对现有项目进行重构，由于目前项目还未实现真正意义上的前后端分离（后续会循序重构实现），在时间紧产品循序迭代的情况下，想一次性实现前后端分离精力实在有限（主要是前端开发人力不足）。所有决定先将影响项目开发进度和影响团队开发的一些历史遗留问题进行改造（包括模块发、配置化、前端渲染引擎等问题的改造）。
模块发、配置化的改造此处省略，需要的同学请自行补脑，目前流行的模块化思想的产物有requirejs、seajs(项目中使用)等......
目前比较流行的前端MVVM框架包括Angular、React、Avalon等，由于前两者均已在后续的版本中抛弃了对IE的支持（老的版本对ID的支持也不太友好，这是我直接抛弃前两者的直接原因），avalon是一款基于虚拟DOM与属性劫持的 迷你、 易用、 高性能， 拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开箱即用。avalon体积虽小但五脏俱全，包括虚拟DOM、指令（自定义组件开发和完善的第三方组件库）、双向绑定（相比原先利用ejs渲染爽了很多）、过滤器、验证、服务端渲染等等...
直接上示例：
html:
first example
Hello,{{@name}}!
是不是和我们熟悉的Angular等前端MVVM架构很像？ 直接定义一个avalon作用域（Avalon的作用域也是向上冒泡查找的），通过$id属性进行绑定，html通过“{{@aa}}”或“ms-text”属性直接进行绑定（avalon有个“卖”点就是“改变model及改变View”,其实就是通过虚拟DOM的特性实时监听变化达到局部更新视图的效果，所以我们项目中必不可少的会有很多种状态--这点类似于React里的"状态机"，需要合理去搭配使用。）
例如常见的Tab页切换：
html:
js：
var searchNav = avalon.define({
$id: "searchNavCtrl",
active: 1,
checkSearch: function(indx) {
if (indx == 1) {
this.active = 1;
} else {
this.active = 2;
}
}
});
只要上述几行代码就可以搞定这个功能，比起原先直接操作DOM要方面的许多。
根据上述代码不难发现avalon是已’ms-‘字符开头作为属性名称的，常用的属性如下：
当多个属性并行时建议使用已下写法（一些保留字节属性需要加单引号如id,class等，为了统一格式建议全部加上）：
未完待续......
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/50162.html
摘要：的相关文章其实框架就是让你使用起来简单些关于路由其实用一个轻便的框架就可以了路由就是根据后面的路径不同变换代码前端路由由于其特殊性最常见表述为这样的形式然后我们直接上使用代码可以使你使用现在我们开始写组件组件写法定义组件使用组件 avalon2 的相关文章https://segmentfault.com/blog/jslouvre 其实框架就是让你使用起来简单些 关于路由其实用一个轻便...
摘要：使用前端框架开发信息管理系统有三年了，最近半年花了些心血将这三年的积累凝聚起来，诞生了两个开源项目和。，中文名安逸，是基于的端组件库。有用于数据展示的组件用于数据提交的组件用于消息提示的与组件组件和用户输入组件等，并且还在不断完善中。 使用 Avalon 前端框架开发信息管理系统有三年了，最近半年花了些心血将这三年的积累凝聚起来，诞生了两个开源项目 ms-bus 和 ane。 ms-b...
摘要：也是一个版本，没有增加任何新特征。不同的是内部源码已经全部用重新编写了。之前使用风格的编写，进行合并。很好的解决这问题。随着对的大胆尝试的成功，以后源码也计划随迁移。不过，大家放心，最后出来的框架还是形式，能运行于下。 avalon2.1.16也是一个Fix BUG版本，没有增加任何新特征。不同的是内部源码已经全部用es6 modules重新编写了。之前使用nodejs风格的Commo...
摘要：场景描述某表单中有一个邮箱的输入框，但是为非必填项，我们期望的结果不填写可以验证通过如果填写了邮箱验证邮箱格式代码如下全部通过备用邮箱非必填提交未填写邮箱运行结果没有达到期望结果，如下图方案重写验证规则官方有示例，可以自己重写一个验 场景描述 某表单中有一个邮箱的输入框，但是为非必填项，我们期望的结果 1. 不填写可以验证通过 1. 如果填写了邮箱,验证邮箱格式 代码如下 ...
