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

先总结一下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封装下,也做成变量绑定的语法糖。

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

浅析js前端发展及mvvm的选型的更多相关文章

  1. Web前端发展简史

    Web前端发展简史 有人说“前端开发”是IT界最容易被误解的岗位,这不是空穴来风.如果你还认为前端只是从美工那里拿到切图, JS和CSS一番乱炖,难搞的功能就去网上信手拈来,CtrlC + Ctrl ...

  2. web前端入坑第五篇:秒懂Vuejs、Angular、React原理和前端发展历史

    秒懂Vuejs.Angular.React原理和前端发展历史 2017-04-07 小北哥哥 前端你别闹 今天来说说 "前端发展历史和框架" 「前端程序发展的历史」 「 不学自知, ...

  3. 秒懂Vuejs、Angular、React原理和前端发展历史

    「前端程序发展的历史」 「 不学自知,不问自晓,古今行事,未之有也 」 我们都知道现在流行的框架:Vue.Js.AngularJs.ReactJs,已经逐渐应用到各个项目和实际应用中,它们都是MVVM ...

  4. 浅析JS中的模块规范(CommonJS,AMD,CMD)////////////////////////zzzzzz

    浅析JS中的模块规范(CommonJS,AMD,CMD)   如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已.     ...

  5. 14个优秀 JS 前端框架、库、工具及其使用时机

    这篇文章主要描述现今流行的一些 Javascript web 前端框架,库以及它们的适用场景. 新的 Javascript 库层出不穷,从而Web 社区愈发活跃.多样.在多方面快速发展.详细去描述每一 ...

  6. JS前端图形化插件之利器Gojs组件(php中文网)

    JS前端图形化插件之利器Gojs组件(php中文网) 一.总结 一句话总结:php中文网我可以好好走一波 二.JS前端图形化插件之利器Gojs组件 参考: JS前端图形化插件之利器Gojs组件-js教 ...

  7. js前端分页之jQuery

    锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...

  8. js前端对后台数据的获取,如果是汉字则需要添上引号

    js前端对后台数据的获取,如果是汉字则需要添上引号

  9. JS前端调用后台方法

    //JS前端代码function Exportqmdltb() { var areavalue= GetQmdltmValue(); $.ajax({ type: "post", ...

随机推荐

  1. Javakeyword之this

    this的作用: 1) this是当前对象的一个引用.便于对当前对象參数的使用. 2)能够返回对象的自己这个类的引用.同一时候还能够在一个构造函数其中调用还有一个构造函数 this演示样例: publ ...

  2. TP2.0或3.1 或者 3.2 下使用ajax+php做无刷新分页(转+自创)

    1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...

  3. 使用SafeIP隐藏自己的IP

    资料:http://www.cnblogs.com/KeenLeung/p/3482241.html 1.到网上下载SafeIP这个工具,安装,打开 2.选择自己熟悉的语言: 3.到www.ip138 ...

  4. JavaScript 设计模式之代理模式

    一.代理模式概念解读 1.代理模式概念文字解读 代理,顾名思义就是帮助别人做事,GOF对代理模式的定义如下: 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问.代理模式使得代理对象 ...

  5. Hadoop Map/Reduce教程

    原文地址:http://hadoop.apache.org/docs/r1.0.4/cn/mapred_tutorial.html 目的 先决条件 概述 输入与输出 例子:WordCount v1.0 ...

  6. JMeter学习笔记--JMeter执行顺序规则

    JMeter执行顺序规则: 配置元件 前置处理器 定时器 采样器 后置处理器(除非服务器响应为空) 断言 监听器 只有当作用域内存在采样器时,定时器.断言.前置/后置处理器才会被执行,逻辑控制器和采样 ...

  7. Linux时间子系统(一) 基本概念

    本文使用Q & A的方式来和大家以前探讨一下时间的基本概念 一.什么是时间? 这个问题实在是太复杂了,我都不知道这是一个物理学.宇宙学.还是热力学异或是哲学问题,我只是想从几个侧面来了解一下时 ...

  8. Python rindex() 方法

    描述 Python rindex() 方法返回子字符串最后一次出现在字符串中的索引位置,该方法与rfind() 方法一样,只不过如果子字符串不在字符串中会报一个异常. 语法 rindex() 方法语法 ...

  9. mysql按日/周/月统计

    一.mysql按日统计 ) count ' and start_time > '2017-06-28' group by days; 二.mysql按周统计 ) ' group by weeks ...

  10. CView类的使用

    首先我们来写一个样例: 1.建一个win32简单应用程序,不要觉得这样就不能写出MFC程序,由于是不是MFC程序取决于调没调MFC函数. 2. 删除入口函数.仅仅留下#include "st ...