avalon 相似于angular

avalon是一个简单易用迷你的MVVM框架,它最先发布于2012.09.15,为解决同一业务逻辑存在各类视图呈现而开发出来的。 事实上,这问题其实也能够简单地利用通常的前端模板加jQuery 事件委托 搞定,但随着业务的膨胀, 代码就充满了各类选择器与事件回调,难以维护。所以完全的将业务与逻辑分离,就只能求助于架构。 最初想到的是MVC,尝试过backbone,但代码不降反升,很偶尔的机会,碰上微软的WPF, 优雅的MVVM架构立马吸引住我,我以为这就是我一直寻找的解决之道。html

avalon将全部前端代码完全分红两部分,视图的处理经过绑定实现(angular有个更炫酷的名词叫指令), 业务逻辑则集中在一个个叫VM的对象中处理。咱们只要操做VM的数据,它就天然而然地神奇地同步到视图。 显然全部神秘都有其内幕,C#是经过一种叫访问器属性的语句实现,那么JS也有对应的东西。 感谢上帝,IE8最先引入这东西(Object.defineProperty),惋惜有BUG,但带动了其余浏览器实现它,IE9+便能安全使用它。 对于老式IE,我找了很久,实在没有办法,使用VBScript实现了。前端

Object.defineProperty或VBS的做用是将对象的某一个属性,转换一个setter与getter, 咱们只要劫持这两个方法,经过Pub/Sub模式就能偷偷操做视图。为了记念WPF的指引,我将此项目以WPF最初的开发代号avalon来命名。 它真的能让前端人员脱离DOM的苦海,来到数据的乐园中!git

优点

绝对的优点就是下降了耦合, 让开发者从复杂的各类事件中挣脱出来。 举一个简单地例子, 同一个状态可能跟若干个事件的发生顺序与发生时的附加参数都有关系, 不用 MVC (包括 MVVM) 的状况下, 逻辑可能很是复杂并且脆弱。 而且一般须要在不一样的地方维护相关度很是高的一些逻辑, 稍有疏忽就会酿成 bug 不能自拔。使用这类框架能从根本上下降应用开发的逻辑难度, 而且让应用更稳健。github

除此以外, 也免去了一些重复的体力劳动, 一个 {{value}} 就代替了一行 $(selector).text(value)。 一些个经常使用的 directive 也能快速实现一些本来可能须要较多代码才能实现的功能chrome

  • 使用简单,做者是吃透了knockout, angular,rivets API设计出来,没有太多复杂的概念, 指令数量控制得当,基本能覆盖全部jQuery操做, 确保中小型公司的菜鸟前端与刚转行过来的后端也能迅速上手。
  • 兼容性很是好, 支持IE6+,firefox3.5+, opera11+, safari5+, chrome4, 最近也将国产的山寨浏览器(360, QQ, 搜狗,猎豹, 邀游等)加入兼容列队 (相比其余MVVM框架,KnockoutJS(IE6), AngularJS1.3(IE9), EmberJS(IE8), WinJS(IE9))
  • 向前兼容很是好,不会出现angular那种跳崖式升级
  • 注重性能,因为avalon一直在那些上千的大表格里打滚,经历长期的优化, 它能支撑14000以上绑定(相对而言,angular一个页面只能放2000个绑定)。另,在IE10等能良好支持HTML5的浏览器, 还提供了avalon.modern.js这个高性能的版本。
  • 没有任何依赖,不到5000行,压缩后不到50KB
  • 完善的单元测试,因为测试代码很是庞大,放在独立的仓库中—— avalon.test
  • 拥有一个包含2个Grid,1个树,1 个验证插件等总数近50个UI组件库 OniUI, 由去哪儿网前端架构组在全力开发与维护
  • 存在一个活跃的小社区,因为国内已有很多公司在用,咱们都集中一个QQ群里互相交流帮助 QQ:228372837,79641290(注明来学avalon)
  • 支持管道符风格的过滤函数,方便格式化输出
  • 让DOM操做的代码近乎绝迹,所以实现一个功能,大体把比jQuery所写的还要少50%
  • 使用相似CSS的重叠覆盖机制,让各个ViewModel分区交替地渲染页面
  • 节点移除时,智能卸载对应的视图刷新函数,节约内存
  • 操做数据即操做DOM,对ViewModel的操做都会同步到View与Model去
  • 自带AMD模块加载器,免得与其余加载器进行整合

avalon的前缀是ms,意即mass, 弥撒,纪念我以前的框架mass Framework。后端

相关文章
相关标签/搜索