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
avalon的前缀是ms,意即mass, 弥撒,纪念我以前的框架mass Framework。后端