ITKeyword,专注技术干货聚合推荐

注册 | 登录

MVVM框架对比

gepingping 分享于 2017-04-21

推荐:iOS开发之利用MVVM框架来优化项目结构。对Controller瘦身以及MVC向MVVM框架的迁移。

MVC开发模式 :  1. 苹果官方一直推荐我们开发者使用MVC的开发模式,所以我们大部分人之前的项目都是用MVC来开发APP,这样开发,肯定会发现一个超级大的弊端,vi

2020阿里云最低价产品入口,含代金券(新老用户有优惠),
地址https://www.aliyun.com/minisite/goods

MVVM框架对比

  • MVC和MVP简介
  • MVVM
  • Vue.js、Angular.js、Ember、Backbone等框架对比
  • 双向绑定原理
  • Virtual DOM

前端由于发展比较迅速,框架的更新迭代也比较快,从最初的 backbone.js 到后来的Ember、Knockout、Angular.js, 再到现在的Vue.js、React。

MVC和MVP简介

mvc通信流程

  • 视图(view):用户界面
  • 控制器(controller):业务逻辑
  • 模型(model):数据保存

通信方式如下:

  1. view传送指令到controller
  2. controller完成业务逻辑后,model改变状态
  3. model将新的数据发送到view,用户得到反馈

MVC在前端中的典型实践 Backbone

backbone通信

MVP

  • MVP模式将controller改名为Presenter,同时改变了通信方向

mvp模式通信

  1. 各部分之间的通信,都是双向的。
  2. view与model不发生联系,都通过presenter传递。
  3. view非常薄,不部署任何业务逻辑,被称为被动视图,所有逻辑都部署在Presenter。

MVVM

mvvm通信

  • 唯一的区别是MVVM采用了双向数据绑定,view的变动自动反映在view-model。Vue.js、Angular、Ember都采用这种模式;

每一个框架的诞生都是为了解决客观存在的问题,所以架构是对客观不足的妥协。

那么这么多MVVM框架的诞生是为了解决什么问题?

  • 如何处理数据的更新和界面的更新。

Vue.js、Angular、Ember、Backbone 对比

功能

作为构建应用的基础,框架必须具备一些重要的功能,比如,视图绑定、双向绑定、筛选、可计算属性、脏属性、表单验证等等

功能 Vue Angular Backbone Ember 可观察对象(observable) y y y y 路由(routing) y y y y 视图绑定(view binding) y y - y 双向绑定(two way binding) y y - y 部分视图(partial view) y y - y 筛选列表视图(filtered list view) y y - y
  • 可观察对象:可以被监听是否发生变化的对象
  • 路由
  • 视图绑定:在视图中使用可观察对象,让视图随着可观察对象的变化而自动刷新
  • 双向绑定
  • 部分视图:包含其他视图的视图
  • 筛选列表视图:用于显示根据某些条件筛选出来的对象视图

灵活性

有时候,框架配合一些现成的插件和库来使用,可能要比使用框架原生同类功能效果更好,而这种插件和库几乎遍地都是(不下数百个),又各有特色。因此,能够把这些库和插件整合到MVC框架中也非常重要。

Backbone是其中最灵活的一个框架,因为它的约定和主张最少。使用Backbone需要你自己作出很多决定。

Ember、Angular、Vue.js 也都还算灵活,可有时候你会发现,就算不喜欢它们的某些实现方法,你也只能默默忍受。 这是在选择Ember或Angular时必须考虑的。

上手难度

Vue.js
上手比较容易,官方文档比较清晰。专注于MVVM的ViewModel层,实际的DOM封装和输出格式都被抽象为了Directives和Filters。

Angular 4.0
一开始会让人大呼过瘾,因为可以利用它干好多意想不到的事,而且学习难度不高。乍一看让人觉得很简单。可是,进了门之后,你会发现后面的路还很长。应该说这个框架比较复杂,而且有不少标新立异之处。想看着它的文档上手并不现实,因为Angular制造的概念很多,而文档中的例子又很少。

Backbone

Backbone的基本概念非常容易理解。但很快你会发现它对怎么更好地组织代码并没有太多主张。为此,你得观摩或阅读一些教程,才能知道在Backbone中怎么编码最好。而且,你会发现在有了Backbone的基础上,还得再找一个库(比如Marionette或Thorax)跟它配合才能得心应手。正因为如此,我不认为Backbone是个容易上手的框架。

Ember

Ember的上手难度与Angular有一拼,我认为学习Ember比学习Angular总体上容易一些,但它要求你一开始就要先搞懂一批基本概念。而Angular呢,一开始不需要这么费劲也能做一些让人兴奋不已的事儿。Ember缺少这种前期兴奋点。

社区支持

能轻易找到参考资料和专家帮忙吗?

Backbone的社区很大,这是人所共知的事实。关于Backbone的教程也几乎汗牛充栋,StackOverflow和IRC社区非常热闹。

Angular和Ember社区也相当大,教程什么的同样不少,StackOverflow和IRC也很热闹,但还是比不上Backbone。

Vue的社区比较一般,可能是由于框架还处于发展阶段,还未达到上述几个框架的稳定和成熟。

推荐:几种流行的AJAX框架jQuery,Mootools,Dojo,Ext JS的对比

[说明]我在网上许多地方遇到过这篇文章,都没有明确标记出作者,感到奇怪??如果您是这篇文章的作者,那么十分抱歉,恕我直接到文章摘录于此。因为这篇文章对

有没有插件或库构成的生态系统?

Backbone的选择是最多的,可用插件俯拾皆是,这一点让其他框架都望尘莫及。Angular的生态圈加上Angular UI还是很令人瞩目的。我觉得Ember的下游生态虽然欠发达,但Ember本身很受欢迎, 所以前景十分乐观。

文件大小

Vue和Angular是唯二不需要其他库就能使用的,其他几个框架都需要依赖。
Backbone至少需要 UnderscoreZepto。虽然在Underscore中可以使用最小的模板来渲染视图,但多数情况下,还要借助更好的模板引擎,比如 Mustache
Ember 需要 jQueryHandlebars

Vue Angular Backbone Ember 18kb 80kb 61kb 269kb

成熟度

这个框架成熟吗,经过实际检验了吗,有多少网站在用它呢?

使用Backbone的网站不计其数。最近两年,它的核心代码没怎么改过,这是成熟的一个重要标志。

Ember已经不是新框架了,但它的重大变更还是经常有,前几月刚刚稳定下来。因此,目前还不能说它是个成熟的框架。

Angular似乎比Ember更稳定,验证的示例也更多,但不能与Backbone相提并论。

Vue 属于一个新项目,2014-3-20 发布的0.10.0 Release Candidate版本。

双向绑定

this.showLoading = false
this.cmsData = data
this.showDownload = data.template.isDownload
this.topBar.displaySharebutton = data.displaySharebutton
this.topBar.title = data.template.title

双向绑定的基本原理是通过属性的读写器来实现。

function Person() {
var name = ”;
var friends = [];
Object.defineProperty(this, ‘name’, {
get: function () {
console.log(‘get!’)
return name;
},
set: function (value) {
name = value;
friends.push(name)
}
});
this.getFriends = function() {
return friends;
};
}

Virtual DOM

最近一两年前端最火的技术莫过于ReactJS,即便你没用过也该听过,ReactJS由业界顶尖的互联网公司facebook提出,其本身有很多先进的设计思路,比如页面UI组件化、虚拟DOM等。

为什么需要虚拟DOM?

DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的。如果对前端工作进行抽象的话,主要就是维护状态和更新视图;而更新视图和维护状态都需要DOM操作。其实近年来,前端的框架主要发展方向就是解放DOM操作的复杂性。

理解虚拟DOM

虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。这句话,也许过于抽象,却基本概况了虚拟DOM的设计思想。

  1. 提供一种方便的工具,使得开发效率得到保证;
  2. 保证最小化的DOM操作,使得执行效率得到保证;

//设置虚拟dom的相关属性
var VElement = function(tagName, props, children) {
    //保证只能通过如下方式调用:new VElement
    if (!(this instanceof VElement)) {
        return new VElement(tagName, props, children);
    }

    //可以通过只传递tagName和children参数
    if (util.isArray(props)) {
        children = props;
        props = {};
    }
    this.tagName = tagName;
    this.props = props || {};
    this.children = children || [];
    this.key = props ? props.key : void 666;
    var count = 0;
    util.each(this.children, function(child, i) {
        if (child instanceof VElement) {
            count += child.count;
        } else {
            children[i] = '' + child;
        }
        count++;
    });
    this.count = count;
};

通过VElement,我们可以很简单地用js表示DOM结构。


var vdom = VElement('div', { 'id': 'container' }, [
VElement('h1', { style: 'color:red' }, ['simple virtual dom']),
VElement('p', ['hello world']),
VElement('ul', [VElement('li', ['item #1']), VElement('li', ['item #2'])])
]);

上面的javascript代码可以表示如下DOM结构:

<div id="container">
<h1 style="color:red">simple virtual dom</h1>
<p>hello world</p>
<ul>
<li>item #1</li>
<li>item #2</li>
</ul>
</div>

比对两棵DOM树的差异

DOM树差异

在用JS对象表示DOM结构后,当页面状态发生变化而需要操作DOM时,我们可以先通过虚拟DOM计算出对真实DOM的最小修改量,然后再修改真实DOM结构(因为真实DOM的操作代价太大)。

  1. 如何比较两棵DOM树
    function diff(oldTree, newTree) {
    //节点的遍历顺序
    var index = 0;
    //在遍历过程中记录节点的差异
    var patches = {};
    //深度优先遍历两棵树
    dfsWalk(oldTree, newTree, index, patches);
    return patches;
    }
  2. 如何记录节点之间的差异
  3. 对真实DOM进行最小化修改

针对DOM的处理,可分为:

  • 修改节点属性 PROPS
  • 修改节点文本内容 TEXT
  • 替换原有节点 REPLACE
  • 调整子节点,包括移动、删除 REORDER

推荐:移动WebApp开发 JS框架对比

转载地址:http://zhangdaiping.iteye.com/blog/1613929 1  目的 本次评比的目标是以移动Web App开发为基础的JS框架,会有意的排除部分不适用于移动Web App开发的

MVVM框架对比 MVC和MVP简介 MVVM Vue.js、Angular.js、Ember、Backbone等框架对比 双向绑定原理 Virtual DOM 前端由于发展比较迅速,框架的更新迭代也比较快,从最初的 backbone.js 到后来的Emb

相关阅读排行


相关内容推荐

最新文章

×

×

请激活账号

为了能正常使用评论、编辑功能及以后陆续为用户提供的其他产品,请激活账号。

您的注册邮箱: 修改

重新发送激活邮件 进入我的邮箱

如果您没有收到激活邮件,请注意检查垃圾箱。