Backbone.js入门

JavaScript010

Backbone.js入门,第1张

个人博客

基于对Backbone.js的学习与几个项目实践,从本篇开始介绍Backbone.js,希望给看官提供一些帮助,同时巩固、提升已有知识。经过这些年的发展,前端MVC、MV*模式框架都得到了巨大的发展,如Backbone.js、AngularJs。在介绍Backbone之前有必要先了解一下MVC。

MVC,即Model-View-Controller,是一种架构设计模式,强调通过分离关注点以改进程序的组织结构,通过将业务数据与用户界面分离、由另外的组件控制逻辑、用户输入、模型与视图的交互实现关注点分离。

经过不断发展与尝试,JavaScript开发人员将MVC模式融进了前端开发,并提出了多个使用MVC的JavaScript框架,如接下来要介绍的Backbone。

不同框架中模型功能多少会有些不同,但一般都会有表示模型数据的属性。

集合是模型的有序组合,一般通过对同一性质或类型模型进行分组归入不同集合以集中管理模型,但集合并不是必须的。

在程序中,用户一般只与用户界面(即视图)交互,用户通过视图对模型进行操作。

相对于最初通过字符串拼接,在内存中创建大量HTML标记,然后便利数据插入,耗费大量成本的这种不明智方式,JavaScript模板库通常将视图模板定义为包含模板变量的HTML标记。模板可以保存在script标签或外部文件模板中,变量通过变量语法分隔;以多种格式接收数据,常见的是JSON格式。

如Underscore.js模板:

Backbone事件Event,将事件触发后要执行的函数注册成事件处理句柄,事件发生便触发执行该函数。

严格来说,Backbone中并没有MVC中的控制器,通常在视图中包含控制器逻辑,而使用路由管理应用程序状态,在不刷新页面的同时通过监听文档url的hash片段变化,导向不同的视图和模型。

本篇主要介绍了一下Backbone.js的主要特征及主要模块,对Backbone有一个综合的了解,下篇开始学习Backbone具体模块。

Backbone.js 的适用场景非常广,无论是 Web-Page 还是 Web-App 都可以应用,但最合适的还是大型的 Web-App,对于中小型项目来讲 Backbone.js 的 MVC 结构还是有点臃肿了,用不好很容易 over design。

Backbone.js 是非常典型的 MVC 框架,但是相对于传统的 server 端 MVC 来讲还是有一些特殊的地方的。

backbone.js提供了一套web开发的框架,通过Models进行key-value绑定及custom事件处理,通过Collections提供一套丰富的API用于枚举功能,通过Views来进行事件处理及与现有的Application通过RESTful JSON接口进行交互.它是基于jquery和underscore的一个js框架。

主要组成:

1.model:创建数据,进行数据验证,销毁或者保存到服务器上

2.collection:可以增加元素,删除元素,获取长度,排序,比较等一系列工具方法,说白了就是一个保存 models的集合类

3.view:绑定html模板,绑定界面元素的事件,初始的渲染,模型值改变后的重新渲染和界面元素的销毁等

优势:

1. 将数据和界面很好的分离开来。

2. 将事件的绑定很好的剥离出来,便于管理和迭代。

3. 使得Javascript程序的模块化更加清晰、明了。

应用场景:

最适合的应用场景是单页面应用,并且页面上有大量数据模型,模型之间需要进行复杂的信息沟通。

目前应用:

豆瓣说