迷你MVVM框架 avalonjs 0.82发布

本版本最大的改进是启用全新的parser。

parser是用于干什么的？在视图中，咱们经过绑定属性实现双向绑定，好比ms-text="firstName", ms-html="sex + '士'", ms-visible="Math.abs(toggle + 2000) >= 20", 咱们须要将它们转换为求值函数。咱们经过ms-controller="vm"来绑定ViewModel，好比vm = { firstName: '司徒'}， 那么对于上面的第一个绑定，咱们想让它变成函数，之前是这样实现的：

            function anonymous(vm1372575919386) {
                with (vm1372575919386) {
                    var ret1372575919386 = firstName
                }
                return ret1372575919386
            }

而后视图刷新函数会将vm传入此函数，var ret = anonymous(vm), 获得'司徒'，而后node.value = ret（注，这里的node 为文本节点，它在扫描DOM树时被抽取出来），完成视图的最少化刷新。这个过程当中如何将绑定属性的值转换为求值函数显然是重中之重。

以前的parser，正如你们看到的那样，很是简单，而后with表达式一包，而后返回结果。但with在ES5的严格模式下运行不了，也一直为性能洁癖人士所不齿。而且它存在一个问题，它的依赖收集并不完整。好比下面这种

     
aaa {{test1 && test2}} 

上面的插值表达式是一个文本绑定，转换为求值函数时，为：

            function anonymous(vm1372575919386) {
                with (vm1372575919386) {
                    var ret1372575919386 = test1 && test2
                }
                return ret1372575919386
            }

当一开始test1为false, test2为true时，因为短路与的关系，咱们并无对test2进行取值。因为avalon只在求值函数的第一次执行时收集依赖，在依赖是经过求值赋值语句实现的，而这时，咱们就确定遗漏了test2了。所以一个全新的parser就迫在眉睫了。

新的parser的实现思路时，设法抽取到绑定值中的变量，而后转换为赋值语句，放到求值函数的最前面，这样就不会遗漏任何依赖了。问题是如何获得这些变量。好比上面三例，它们的变量依次是firstName, sex, toggle，咱们要设法去掉全部杂质，首先要去掉注释，字符串，正则这些字面量，而后是加减乘除这些操做符，而后是if, while, for, undefined, void 等关键字，而后是做为某个对象的属性或方法存在的语句，如.prop，而后逗号这样用于断句用的符号。但即便这样，还会留下像Math, String等全局变量，这时咱们就经过vm取hasOwnerProperty进行排除。

下面就是经过新的parser转换获得的求值函数。

            function anonymous(vm1372575919386) {
                var firstName =  vm1372575919386.firstName
              
                return firstName 
            }
            function anonymous(vm1372575919386) {
                var test1=  vm1372575919386.test1, test2 = vm1372575919386.test2
              
                return test1 && test2
            }

而且进一步，咱们能够在里面塞进'use strict'来提升性能。

            function anonymous(vm1372575919386) {
                'use strict';
                var firstName =  vm1372575919386.firstName
              
                return firstName 
            }
            function anonymous(vm1372575919386) {
                'use strict';
                var test1=  vm1372575919386.test1, test2 = vm1372575919386.test2
              
                return test1 && test2
            }

如何存在过滤器

   
 
 
 
 

  
  
  
  {{ new Date  | date('dd MM yyyy') }} 
 
 
 
 

            function anonymous(vm1372896828095_0, filters1372896828095) {
                'use strict';
                var ret1372896828095 = new Date
                if (filters1372896828095.date) {
                    try {
                        ret1372896828095 = filters1372896828095.date(ret1372896828095, 'dd MM yyyy')
                    } catch (e) {
                    }
                }
                return ret1372896828095
            }

凭借着此新parser，avalon又有了一个质的提升。有关的parser的实现，能够详看该issue

读者们也能够对比angular的parser实现， avalon的是很是小巧的。

迷你MVVM框架在github的仓库https://github.com/RubyLouvre/avalon

官网地址http://rubylouvre.github.io/mvvm/

你们能够加入QQ群：79641290进行讨论，此群为技术群，禁水！