一、单页面应用

  1、单页面应用(single-page application :SPA),是指在浏览器中运行的应用,在使用期间不会重新加载页面。

  2、它所有的活动局限于一个Web页面,仅在初始化加载时对应的HTML、JavaScript和CSS。一旦加载完成,SPA不会因为用户的操作而重新加载页面或者跳转。它是通过JavaScript动态变换HTML的内容,避免页面的重新加载,提供更具流畅性的用户体验。

  3.1、优点:前后分离,可以同时前后端的开发;减轻服务器的压力;更好的用户体验。

  3.2、缺点:SEO问题,由于是只有一个页面,搜索引擎在抓取数据的话只会抓取首页,其他跳转界面不会被抓取;

         浏览历史问题,也无浏览器记录,前进后退需要程序管理;

初次加载问题。

二、Backbone 简介

  1、BackBone 是由Jerry Ashkenas 创建的轻量级MVC JavaScript库,有两个特点:

    强制依赖Underscore.js

    非强制依赖于jQuery/Zepto

2、以下是架构图:

   当用户在浏览器输入我们想要访问的地址的时候,router就会监听到URL的hash值的改变,然后会匹配到相应的View界面,这个时候View就会告诉Model或者Collection,表明自己需要数据来轩然我们的页面,然后Model和Collection就去对应的数据请求。拿到数据之后就返回给View,然后渲染页面。

  

  

三、几种框架的简单介绍

  1、MVC 框架Model - View - Controller

     · 视图(View) 用户界面:传送指令到控制器

     · 控制器(Controller)业务逻辑:控制器完成业务逻辑后,要求model改变状态

     · 模型(Model)数据保存:将新数据发送到View,用户得到反馈

      

     

  2、MVP 框架Model - View - Presenter

    · 各部分之间的通信都是双向的

    · View与Model不发生直接的联系,主要通过Presenter传递

    · View非常薄,不部署任何业务逻辑

    · Presenter非常厚,部署所有的业务逻辑

      

  3、MVVM框架:Model - View - ViewModel

    · MVVM 模式将Presenter 改名为ViewModel,基本上与MVP模式完全一致

    · 区别是,它采用的是双向绑定模式(data Binding)View 的改动会自动反映在ViewModel上,反之亦然

    · 比如说View中的数据发生改变,不需要通知ViewModel,ViewModel自己就会获取改变,同样,Model改变,ViewModel不需要通知View,View自己就会知道。

      

 

backBone.js初识的更多相关文章

  1. Backbone.js学习之初识hello-world

    说了好久好久要学习Backbone.js,现在终于下定决心开始学习了.然后呢,就根据我的学习进度在这里做个简单的记录,方便新人,也方便我自己以后回忆. 准备 用bower下载这几个库或框架也是醉了.. ...

  2. 初识backbone.js

    backbone,英文意思是:勇气, 脊骨,但是在程序里面,尤其是在backbone后面加上后缀js之后,它就变成了一个框架,一个js库. backbone.js,不知道作者是以什么样的目的来对其命名 ...

  3. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  4. Backbone.js应用基础

    前言: Backbone.js是一款JavaScript MVC应用框架,强制依赖于一个实用型js库underscore.js,非强制依赖于jquery:其主要组件有模型,视图,集合,路由:与后台的交 ...

  5. 我对Backbone.js的一些认识

    backbone.js已经不是当前最流行的前端框架了,但是对于我而言,依然具有比较好的学习价值.虽然目前来说,react,vue等mvvm框架非常火热,但是感觉自身还不到去使用这种框架的层次.这些技术 ...

  6. Backbone.js学习之Backbone.View(视图)

    Backbone.js为复杂WEB应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视 ...

  7. 前端mvc框架backbone.js入门[转]

    原文地址:http://www.cnblogs.com/zhjh256/p/6083618.html 关于backbone.js的优缺点,这里就不详谈了,网上关于这方面的讨论很多了,而且各种框架之所以 ...

  8. Backbone.js

    Backbone.js是一套JavaScript框架與RESTful JSON的應用程式介面.也是一套大致上符合MVC架構的編程範型.Backbone.js以輕量為特色,只需依賴一套Javascrip ...

  9. 用Backbone.js教程系列的链接

    整理了一下用Backbone.js系列教程链接. Backbone.js入门教程 用Backbone.js创建一个联系人管理系统(一) 用Backbone.js创建一个联系人管理系统(二) 用Back ...

随机推荐

  1. 关于error:Cannot assign to 'self' outside of a method in the init family

    有时候我们重写父类的init方法时不注意将init后面的第一个字母写成了小写,在这个方法里面又调用父类的初始化方法(self = [super init];)时会报错,错误信息如下:error:Can ...

  2. 1、一、Introduction(入门): 0、Introduction to Android(引进到Android)

    一.Introduction(入门) 0.Introduction to Android(引进到Android) Android provides a rich application framewo ...

  3. Java从控制台接受输入字符

    创建一个类,在该类的主方法中创建Scanner扫描起来封装System类的in输入流,然后提示用户输入身份证号码,并输入身份证号码的位数. 代码如下: import java.util.Scanner ...

  4. 8 -- 深入使用Spring -- 2...5 Spring 3.0 新增的注解

    8.2.5 Spring 3.0 新增的注解 @DependsOn @Lazy @DependsOn :用于强制初始化其他Bean.修饰Bean类或方法,可以指定一个字符串数组作为参数,每个数组元素对 ...

  5. 7 -- Spring的基本用法 -- 9...容器中Bean的生命周期

    7.9 容器中Bean的生命周期 Spring可以管理singleton作用域的Bean的生命周期,Spring可以精确地知道该Bean何时被创建,何时被初始化完成.容器何时准备销毁该Bean实例. ...

  6. WPF导航总结

    使用导航的目的是从一个页面进入到另一个页面.无论是预先决定的线性顺序(向导)还是基于层次的用户驱动程序(大部分网站的形式),或者动态生成的路径,主要有3种方法实现:调用Navigate方法,使用Hyp ...

  7. ios开发之--复制到剪切板

    仅做记录: UIPasteboard *pasteboard = [UIPasteboard generalPasteboard]; pasteboard.string = @"你好&quo ...

  8. Objective-C语法之动态类型(isKindOfClass, isMemberOfClass,id)等

    对象在运行时获取其类型的能力称为内省.内省可以有多种方法实现. 判断对象类型 -(BOOL) isKindOfClass: classObj 判断是否是这个类或者这个类的子类的实例/ 判断是否是这个类 ...

  9. 找不同diff-打补丁patch

    Q:为什么要找不同,为什么要打补丁? A: 在Linux应用中,作为DBA,我们知道MySQL跑在Linux系统之上,数据库最重要的追求就是性能,“稳”是重中之重,所以不能动不动就是换系统或是换这换那 ...

  10. 转载nginx+uwsgi+django

    Django的部署可以有很多方式,采用nginx+uwsgi的方式是其中比较常见的一种方式. 在这种方式中,我们的通常做法是,将nginx作为服务器最前端,它将接收WEB的所有请求,统一管理请求.ng ...