浅析js前端发展及mvvm的选型

最近终于下定决心学点前端的东西，然而各种框架，让人眼花缭乱。

先总结一下js前端的发展史

1、刀耕火种，原始时代

这个时候用DOM原生API来操html元素，估计getElementBy之类的函数满天飞

2、蒸汽机，工业时代

jquery等之类的框架出现，DOM操作被框架封装好，可以很方便的更新

3、电能，后工业时代

react、vue、angular、avalon等mvvm的出现，忘记操作DOM

 

说起mvvm实际上变量绑定，把DOM和js变量绑定，更新js变量就可以达到更新DOM的目的，或者双向绑定。

先看了一下国外的angular2 和react，感觉太大型了，于是主要盯上了vue和avalon，下面是两者的绑定语法。

avalon的绑定语法

<script>
var vm = avalon.define({
$id: "test",
a: 111
})
</script>

<div ms-controller="test">
{{@a}}
</div>

vue的绑定语法

<div id="app">
  {{ message }}
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>

可以看到几乎一样，而avalon在绑定时要使用额外的标签，输出时则要再多加一个@，vue的代码明显更加简洁。

而且两者绑定的方法几乎都用Object.defineProperties实现。在1.x版两者都没加入虚拟DOM，而在2.0之后都采用了虚拟DOM。

到底采用哪个让我犹豫了好久。avalon官网上有一张性能对比，在1.x时代，它的性能要高于vue。

由于没有看源码，我想性能差距或许就来自于绑定语法了，vue不需要额外的标签，那么有些DOM是绑定了的，有些是没有绑定的，扫描

分析肯定要比有标签的avalon要慢了。

另外由于avalon的组件要更丰富，支持的浏览器低到惊人的ie6，于是最终选择了avalon。

 

去除掉虚拟DOM其实我们也可以实现简单的mvvm，比如把jquery封装下，也做成变量绑定的语法糖。

或许还可以用元素和行号哈希表对应起来，直接用正则表达式。