一、单页面应用

  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. 6 Django系列之关于models的sql语句日常用法总结

    preface Django提供了强大的ORM,我们可以通过ORM快速的写出我们想要对数据做什么样操作的代码.下面就说说我在日常工作中的用法: 外键关联精确查询 应用场景:表A host字段关联到了表 ...

  2. windows7 安装IIS没有default web site 解决方法

    因当时是第一次在Windows 7上使用IIS,不小心把default web site删除了,后来无论怎么重装IIS都不行,最后想到能不能直接把别人安装好后的IIS相关文件夹拷过来使用,用宿舍一哥们 ...

  3. go jwt OAuth2.0

    https://blog.csdn.net/wangshubo1989/article/details/77980316 https://blog.csdn.net/wangshubo1989/art ...

  4. 项目管理PMP输入输出ITTO联系记忆

    综述九大领域 项目管理的输入输出非常难记,原因在于理解起来也经不去推敲,故整理一个联想记忆版本,通过联想把输入输出都串起来达到记忆的目的,既然是联想,里面的内容逻辑只是为了好记,并无正确与否,请大家原 ...

  5. 实战c++中的string系列--不要使用memset初始化string(一定别这么干)

    參考链接: http://www.cppblog.com/qinqing1984/archive/2009/08/07/92479.html 百度百科第一次这么给力: void *memset(voi ...

  6. Eclipse cdt解决github导入的项目无法打开声明的bug (cannot open declaration)

    概述: 我利用eclipse 的git插件clone github上的远程项目(C++)到本地时遇到一个问题:clone下来的项目没有C++特性,无法使用open declaration等操作,下面是 ...

  7. Docker background

    什么是 Docker? Docker 提供了一个可以运行你的应用程序的封套(envelope),或者说容器.它原本是 dotCloud 启动的一个业余项目,并在前些时候开源了.它吸引了大量的关注和讨论 ...

  8. 执行上下文、this

    1.js中的执行上下文或者执行环境:execution context,简称EC; 2. console.log(a);//undefined var a=200; fn('lili'); funct ...

  9. iOS autoLayout总结

    本文转自 http://ruikq.github.io/ios/autolayout/uiscrollview/2015/01/27/iOS-autolayout%E6%80%BB%E7%BB%93. ...

  10. MongoDB开篇

    1.安装MongoDB  官方下载地址  https://www.mongodb.com/download-center#community 这个文件下载的有些奇怪,这个zip的文件下载下来和百度出来 ...