对框架的挑选 Ember.js、Backbone.js、Knockout.js、Spine.js、Batman.js , Angular.js

1. 轻量级的应用选择哪一个会比较好?
2. 那一个比较简单,容易上手
3. 哪一个开发周期最短?

具体可以看   (英) Rich JavaScript Applications – the Seven Frameworks

Web前端开发:为何选择MVVM而非MVC

由于工作关系~一直没时间细细研究下这些框架的源码~ 早期就看过Backbone.js与EXT4的MVC

最近开始研究业界小有名气司徒正美的mvvm框架avalon

为什么放着Angular,Ember不去分析,而去研究avalon呢, 看了http://rubylouvre.github.io/mvvm/

其实作者就是基于Angular,Ember,knockout这种成熟的框架中,演化出来的avalon,所以avalon我不说媲美这些框架,但是从研究的角度入手,我觉得未必不可

核心的功能avalon都能够完成,只是组件不够多,毕竟是个人行为的 ,  avalon 源码分析目录 , 博主已经开始研究angular,尽量同步推出源码分析

对比:

  1. angular是找大而面的道路,因此体积非常庞大,1.6-1.7万行;
  2. avalon旨在提供一种远离DOM操作的前端开发体验,0.6.3只有2420行,min只有29kb。
  3. avalon从angular抄来了不少好东西,如{{}}插值表达式,ms-model(通过事件实现双向同步),ms-controller(为了VierModel指定作用域范围),但都做了增强,{{aaa|html}添加html过滤器就能输出innerHTML,ms-model可以通过data-observe来开关双向同步,ms-controller拥有孪生兄弟ms-important。
  4. avalon的$watch与ms-bind方法提供比angular强大得多回调功能。
  5. avalon拥有像knockout, emberjs那样的计算属性, angular没有。
  6. avalon与angular都拥有监控数组,但avalon的监控数组像knockout那样拥有大量好用的方法,能自动同步页面,angular的则相当弱。
  7. avalon与angular都拥有定义UI的功能(将一个元素变成一个UI组件),angular是使用自定义标签,avalon是使用ms-ui属性,但自定义标签在旧式IE并不好使,并且可能随着浏览器的升级,浏览器会添加一个与你一模一样的新标签。avalon则安全多了,并且拥有12UI组件可做参考,实现起来非常简单。
  8. avalon是采取边扫描边转换绑定的策略,用户打开页面后立即能看到效果,angular是要全部扫描后才转换绑定,因此用户可能看到一些奇异的模板。
  9. avalon是通过define方法来定义ViewModel,并有scan方法指定作用的元素与ViewModel。angular要求用户将xxxxCtrl函数暴露到全局作用域下,框架自己去取去组装。
  10. avalon在ViewModel有个$json,就是ViewModel对应的纯数据的Model(ViewModel每次被操作,都会自动同步View与Model的),我们可以直接将它放到AJAX中使用。angular没有独立的Model,需要自己转换。
  11. avalon是使用Object.defineProperty与VBS实现ViewModel,angular则是将整个xxxxCtrl函数进行编译,转换一大堆getter, setter从而实现双向绑定,因此angular的体积是相当庞大的。
  12. avalon的绑定值可是ViewModel的属性或数组或表达式, angular则允许用户在视图定义新变量,新对象,这是个不好的特征,会让页面非常难维护。
  13. avalon的绑定已经强大到让用户完全脱离DOM写业务,顶多是取一下表单元素的checked, disabled等状态值,angular还是传统的思路,只是在1.0后添加数据绑定机制。

其实说了一堆,并非是说angular不够好avalon超过angular,正如作者所说angular是找大而面的道路,因此体积非常庞大,就跟EXT一样想什么都想揽着.

各个框架的技术速览

Backbone

  • 作者:Jeremy Ashkenas and DocumentCloud
  • 内容:
    • Model-View模式,MIT 许可
    • 最小的类库——仅仅一个文件,800行代码!
    • 很专一的功能——仅仅提供REST持久化模型以及简单的路由和回调,这样就可以让你知道什么时候去渲染实体(需要自己设置渲染机制)
    • 最著名的,被许多大牌网站使用(或许是因为它小而易于被接受)
  • 优点:
    • 它很小,你可以在使用之前通过读源代码来弄懂它。
    • 对你的服务端架构和文件结构都没有影响,可以只在页面的一小部分起作用,并不需要考虑整个页面。
    • Jeremy就像一个禅宗大师,对所有的问题都很有观点。他就像一个大人指导着一群吵闹的孩子。
  • 项目地址:GitHub官网
  • 发布时间:两年前

Meteor

  • 作者:Meteor开发团队,他们刚刚获得了1120万美元的融资所以可以全职开发Meteor
  • 内容:
    • 这是一个来自未来世界的令人惊讶的框架,它拥有你所没有见过的东西(可能除了Derby)
    • 在服务端(Node.js + Mongo)和客户端使用相同的代码,使二者(包括数据库)连通起来.通过WebSockets来同步服务端和所有的客户端。
    • 当修改代码时就可以“实时部署”——客户端会快速更新而不会丢失他们的内容。
    • 如果提供视频观看会更加合适【演示
    • 和其他的人一样,我真心希望这个项目会成功——WEB开发需要一些像这样有激情的项目来向前推进。
  • 优点:当你收购了web开发的一些陈规旧俗,Meteor可以让你走在前沿。
  • 项目地址: GitHub,官网
  • 发布时间:仍是早期版本,目前我不知道有哪些网站正式使用Meteor。但是它的核心团队正在认真地做着这个项目。

Ember

  • 作者: Yehuda Katz (Rails和Jquery的先前开发者),Ember团队已经 Yehuda 的伙伴Tilede
  • 内容:
    • 它包含建立一个"强大的Web应用"的一切,采用的是MIT许可
    • 在所有的框架中是功能最强大,当然库的大小也很大.
    • 它的着眼点在于怎样把怎样把一个页面分解成一个个有层次的控件,然后通过一个有状态的路由系统来连接起来.
    • 正在开发更加精细的数据接入类库(Ember.Data)
    • 会在运行时对所有的页面控制,因此对于使用了很多内容的部分(如silverlight,ajax,flash)可能不合适.
    • 文件结构和URL都是固定的,但是可以被重写.
    • 其设计灵感来自Rails和Cocoa
    • 使用:它为Rails提供工程模版(你也可以通过手动配置来使它应用在别的服务端技术上)
  • 优点:常见的问题应该有常见的解决方法--Ember提供了所有的常见解决方案,你只需要考虑对你的应用程序来说那个是适用的.
  • 项目地址GitHub,官网;
  • 开始时间: 仍然不是1.0的发布版本,不过很快会发布,API到时候也会发布(**译者注:已经发布1.0的pre版本)

AngularJS

  • 作者:google的开发者,主要是他们内部使用,并且采用MIT协议
  • 内容:
    • MVW(Model-View-Whatever )模式
    • 基于DOM的模版声明式绑定.
    • 内置基础的url路由和数据序列号
    • 工具:他们实现了一个可以让你在调试时监视你的数据模型的chrome的调试插件,以及一个针对Jasmine 测试框架的插件
  • 优点:
    • 按照他们所宣传的,这是一个未来浏览器会原生支持的框架,所以我们应该现在就用这种方式来编程。
    • 对服务器端的架构和文件结构没有影响,可以用在不需要对整个页面控制的小部分。
  • 项目地址: GitHub,官网
  • 开始时间:已发布(曾在google使用过)

Knockout

  • 作者: Knockout团队和社区(包括我在内目前核心团队有三个成员)
  • 内容:
    • Model-View-ViewModel (MVVM) in JavaScript, MIT licensed
    • 关注与富UI:基于DOM的声明式绑定,拥有自动依赖检测的"观察者“模型
    • 不强制绑定URL路由和数据——和其他第三方库结合(例如使用Sammy.js做路由,采用ajax方式存储数据)。
    • 着重关注于易用性,有大量的文档和交互的例子
  • 特点:
    • 专注于UI,支持IE6
    • 对服务器架构和文件系统没有影响。可以用在不需要对整个页面控制的小部分。
  • 项目地址: GitHub,官网
  • 开始时间: 发布将近两年

Spine

  • 作者: Alex MacCaw
  • 内容:
    • MVC in JavaScript, MIT license
    • 最初作为O’Reilly一本书的示例代码,最终演变为一个开源代码工程
    • 是Backbone的一个克隆版本(就像名字那样)(译者注:Spine和Backbone都有脊柱的意思)
  • 特点:你希望用不同的方式来使用Backbone二者不同可以参看这里
  • 项目地址: GitHub,官网
  • 开始时间: 已经发布1.0.0版本

Batman

  • 作者:Shopify团队(一个电子商务平台公司)
  • 内容:
    • 支持Javascript的MVC架构,几乎是为Rails+CoffeeScript开发者设计的。MIT 许可
    • 定制性最强的一个框架,你必须按照它的约定(例如文件结构和URL路径),否则,就像它”高傲“的作者们所说的:“不遵循约定就别用”。 *全栈式的框架,拥有丰富的模型,视图和控制器及路由。当然也有观察模式的机理。 *基于DOM的模版
  • 特点: 如果你使用Rails和CoffeeScript,你会得心应手……
  • 项目地址: GitHub,官网
  • 开始时间:目前是0.9版,预计在未来几个月内发布1.0版本。

CanJS

  • 作者:bitovi团队(一个js咨询培训公司)
  • 内容:
    • MVC in JavaScript, MIT licensed
    • REST-persistable模型,基础的路由,基于字符串的模版。
    • 并不很出名(我在上周前还不知道它),尽管它是一个很老的javascript mvc项目的重新开放。
  • 特点:致力于构建一个轻量的,提供上述所有框架都具有功能特性的最好的框架。
  • 项目地址: GitHub,官网

总结

如果你在考虑究竟那个是最适合你的项目,我觉得应该考虑两个方面:

  • 应用范围: 你希望一个框架或者类库能够帮助你做多少东西?你是希望有一个可以让你从0开始全程都为你提供架构帮助的全能框架,还是希望自己定制模式和类库?不管选择那种,对不同的项目和团队都是有价值的。

  • 设计美学:你是否看过这些框架并且想自己构建一个小型的类库?你喜欢这样做吗?不要根据局限与描述或者功能列表去选择。忽略你自己的编码习惯就像仅仅根据小说的目录去买书或者是根据个人简历和履历来选择配偶。

除了不同的地方,我可以肯定上述这些技术都遵循的一个功能:模型和视图分离。这是一种在20年钱就已经存在的经典设计模式。即使你在构建最简单的web应用界面你也能从这种模式中受益。

JavaScript富应用MVC MVVM框架的更多相关文章

  1. 几种JavaScript富应用MVC MVVM框架

    Ember.js.Backbone.js.Knockout.js.Spine.js.Batman.js , Angular.js 前端中的MVVM设计模式让UI与数据模型可以很轻松的相互更新,这意味着 ...

  2. 【JavaScript】对比12 款优秀的JavaScript MVC/MVVC框架 你最喜欢Backbone or Ember

    http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/ 目前基本所以后台程序都是面向对象MVC模式开发, ...

  3. 不要听吹牛逼什么前端MVVM框架就是好,其实都是一帮没学好分层设计的搞出来的,让你彻底看清前端MVVM的本质

    最近前端圈子里面,发现大家都在热炒概念,什么knockout,angularJs,都被捧成神了,鄙人不才,最近心情也不好,特地写这篇文章来找骂 写代码的码农都知道,Java社区虽然不是一个提出分层思想 ...

  4. 迷你MVVM框架 avalonjs 入门教程

    新官网 请不要无视这里,这里都是链接,可以点的 OniUI组件库 学习教程 视频教程: 地址1 地址2 关于AvalonJs 开始的例子 扫描 视图模型 数据模型 绑定 作用域绑定(ms-contro ...

  5. MVC & MVVM

    什么是MVC,什么是MVVM? 面向过程 --> 面向对象 --> MVC --> MV* 面向过程: 开发人员按照需求逻辑顺序开发代码逻辑,主要思维模式在于如何实现.先细节,后整体 ...

  6. MVC,MVVM,MVP的区别/ Vue中忽略的知识点!

    按照顺序学习: https://scotch.io/courses/build-an-online-shop-with-vue/hello-world Vue Authentication And R ...

  7. 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC

    大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...

  8. 迷你MVVM框架 avalonjs 沉思录 第2节 DOM操作的三大问题

    jQuery之所以击败Prototype.js,是因为它自一开始就了解这三大问题,并提出完善的解决方案. 第一个问题,DOM什么时候可用.JS不像C那样有一个main函数,里面的逻辑不分主次.但JS是 ...

  9. “老坛泡新菜”:SOD MVVM框架,让WinForms焕发新春

    火热的MVVM框架 最近几年最热门的技术之一就是前端技术了,各种前端框架,前端标准和前端设计风格层出不穷,而在众多前端框架中具有MVC,MVVM功能的框架成为耀眼新星,比如GitHub关注度很高的Vu ...

随机推荐

  1. IOS开发-图片尺寸

    在这篇文章当中,不会讲述关于具体px pt,分辨率,像素的问题,在这篇文章中,只会谈及到一些展现的问题 如果想了解更多关于pt,px之间的关系可以自行到百度查找相关的答案,或者到以下地址阅读更多相关的 ...

  2. Memcached常规应用与分布式部署方案

    1.Memcached常规应用 $mc = new Memcache(); $mc->conncet('127.0.0.1', 11211); $sql = sprintf("SELE ...

  3. 通过rinetd实现端口转发来访问内网的服务

    通过rinetd实现端口转发来访问内网的服务 一.   问题描述 通过外网来访问内网的服务 二.   环境要求 需要有一台能够外网访问的机器做端口映射,通过数据包转发来实现外部访问阿里云的内网服务 三 ...

  4. 给同为.NET开发者普及一点Oracle数据库经验

    前段时间,因为要给自己开发的搜易站内搜索引擎增加Oracle数据库的支持,所以学习了下Oracle的基础知识,发现使用方式跟MYSQL,MSSQL等数据库的思维有很大的不同,总结一下几点不同,希望给初 ...

  5. 转:最简单的基于 DirectShow 的视频播放器

    50行代码实现的一个最简单的基于 DirectShow 的视频播放器 本文介绍一个最简单的基于 DirectShow 的视频播放器.该播放器对于初学者来说是十分有用的,它包含了使用 DirectSho ...

  6. windows下clang的安装与使用

    我本意是想在windows下学习下C++11,而结果是我的Visual Studio 2012不完全支持,而我又懒得去安装2013/2015,太大了.公司运维也不允许我去下载- -,然后就想能不能在w ...

  7. HTML5手机APP开发入(5)

    HTML5手机APP开发入(5) 回顾一下 HTML5手机APP开发入(4) 如何自定义Component,directive HTML5手机APP开发入(3) 如何实现MVC的代码重构,自定义一个P ...

  8. 使用Android Studio打Andorid apk包的流程

    启动Android studio   1.点击菜单栏Build -> Generate Signed APK...,打开如下窗口 2.这里是类似eclipse中Android的签名,假设这里没有 ...

  9. HBase、Redis、MongoDB、Couchbase、LevelDB主流 NoSQL 数据库的对比

    最近小组准备启动一个 node 开源项目,从前端亲和力.大数据下的IO性能.可扩展性几点入手挑选了 NoSql 数据库,但具体使用哪一款产品还需要做一次选型. 我们最终把选项范围缩窄在 HBase.R ...

  10. Android UI系列-----时间、日期、Toasts和进度条Dialog

    您可以通过点击 右下角 的按钮 来对文章内容作出评价, 也可以通过左下方的 关注按钮 来关注我的博客的最新动态. 如果文章内容对您有帮助, 不要忘记点击右下角的 推荐按钮 来支持一下哦 如果您对文章内 ...