《中级前端4.1》Backbone 概述——单页面应用的代表,mvc,mvvm,mvp

学习 Backbone 之前，先分析单页面应用出现的原因，介绍 Backbone 是什么、怎么用、特点有哪些。通过一个开发示例，引领大家进入 Backbone 的世界。 

核心内容： 
1. 单页面应用的出现及特点
2. 开发模式：MVC、MVVM、MVP
3. Backbone 基础模型：View、Model、Collection 

 

单页面应用

本课时主要分析 Web 开发到后期遇到的问题，Backbone 作为单页面应用的代表如何解决遇到的问题。介绍了单页面应用的出现的背景、特点、优缺点。

但是随着互联网快速发展，Web应用也越来越复杂，例如：

Gmail，

印象笔记Evernote，

Worktile等；

如果用传统的http请求不断刷新页面，很难打造出极佳的用户体验。

 

单页面应用通过改变url后面的哈希值来改变页面内容。

 

优点：

1. 最大有点：前后端分离。前端可以更关注页面性能，页面逻辑，页面交互；后端可以更关注业务逻辑，数据安全，数据存储等；前后端可以并行开发；

2. 减轻服务器压力。 后端只需吐出数据，不再需要展示逻辑和页面渲染。

3. 更好的用户体验。

4. 前端工作的挑战增加，机会也在增加，前端的价值也越来越被重视。

缺点：

1. SEO问题。

2. 浏览历史问题。

3. 初次加载问题。 页面通过js渲染，首次加载需要load很多js文件。

 

 

Backbone 简介

本课时介绍使用 Backbone 的优点，Backbone MVC 思路，MVC、MVVM、MVP对比，Backbone 的依赖，Backbone 学习资料整理。

 

Backbone MVC架构图：

 

 

MVC，MVP，MVVM三种开发模式的对比：

MVC:

  

MVP:

 

MVVM: 最近非常热的开发模式，常见的Angular就是这种模式

 

 

Backbone资料：

http://www.css88.com/doc/backbone/     API中文文档

 

 

牛刀小试：第一个Backbone示例

本课时通过一个简单开发示例展示如何使用 Backbone，与Backbone亲密接触。

 

Backbone的入口文件index.html，通过router路由解析url后面的哈希值，调取对应的js文件控制器Controller，把页面模板渲染出来给用户。

Backbone的数据交互可以是通过Controller，也可以绑定view和model。

 

关于Backbone和Angular的对比：