Marionette牵线木偶，Backbone是脊骨的意思，Marionette是基于Backbone做扩展库，可以理解为把脊骨骨架绑线扯着变成牵线木偶动起来哈哈，使backbone更易使用呵呵！

构建或者扩展了很多新的东西，如：Application,Region,ItemView,CollectionView,CompositeView,LayoutView,AppRoute,Controller等等，把很多重复性的工作变成配置，程序入口引入了集中处理器Application，貌似Marionette的module不怎么好用，还不如用requireJS来得直观。

一、文件目录

比较清晰，bower_components里面存放jQuery,underscore等等依赖js库及js框架，不用管它；css文件也不用理它。

一，主程序(/index.html-> js/main.js-> js/app.js ->js/routers/index.js & js/controllers/index.js)

/index.html

  1. <!doctype html>
  2. <html lang="en" data-framework="marionettejs">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Backbone.Marionette & Requirejs • TodoMVC</title>
  6.         <link rel="stylesheet" href="bower_components/todomvc-common/base.css">
  7.         <link rel="stylesheet" href="css/custom.css">
  8.     </head>
  9.     <body>
  10.         <section id="todoapp">
  11.             <header id="header">
  12.             </header>
  13.             <section id="main">
  14.             </section>
  15.             <footer id="footer">
  16.             </footer>
  17.         </section>
  18.         <footer id="info">
  19.             <p>Double-click to edit a todo</p>
  20.             <p>Created by <a href="http://github.com/jsoverson">Jarrod Overson</a></p>
  21.         </footer>
  22.         <script src="bower_components/todomvc-common/base.js"></script>
  23.         <script data-main="js/main" src="bower_components/requirejs/require.js"></script><!--requireJS开始加载js/main.js文件-->
  24.     </body>

js/main.js

  1. require.config({//requireJS配置
  2.     paths: {//路径配置
  3.         underscore: '../bower_components/underscore/underscore',
  4.         backbone: '../bower_components/backbone/backbone',
  5.         marionette: '../bower_components/backbone.marionette/lib/backbone.marionette',
  6.         jquery: '../bower_components/jquery/jquery',
  7.         localStorage: '../bower_components/backbone.localStorage/backbone.localStorage',
  8.         tpl: 'lib/tpl'
  9.     },
  10.     shim: {//非AMD规范库如backbone等库的配置,deps是依赖库,The shim config allows us to configure dependencies for scripts that do not call define() to register a module即下面的库不是通过define()来注册成为模块的
  11.         underscore: {
  12.             exports: '_'
  13.         },
  14.         backbone: {
  15.             exports: 'Backbone',
  16.             deps: ['jquery', 'underscore']
  17.         },
  18.         marionette: {
  19.             exports: 'Backbone.Marionette',
  20.             deps: ['backbone']
  21.         }
  22.     },
  23.     deps: ['jquery', 'underscore']
  24. });
  25.  
  26. require([
  27.     'app',
  28.     'backbone',
  29.     'routers/index',
  30.     'controllers/index'
  31. ], function (app, Backbone, Router, Controller) {　　//requireJS标准写法
  32.     'use strict';
  33.  
  34.     app.start();//应用启动－〉app.js
  35.  
  36.     new Router({ controller: Controller });//指定了Controller（controllers/index）的Marionette.AppRouter（routers/index；监视url传值触发相应的事件
  37.  
  38.     Backbone.history.start();//当你的所有路由创建并且设置完毕后，调用Backbone.history.start()来开始记录url的hash change，如果是html5还可以记录pushState等
  39. });

js/app.js

  1. /*global define */
  2.  
  3. define([
  4.     'marionette',
  5.     'collections/TodoList',
  6.     'views/Header',
  7.     'views/TodoListCompositeView',
  8.     'views/Footer'
  9. ], function (Marionette, TodoList, Header, TodoListCompositeView, Footer) {//requireJS标准写法，其实就是用function里的变量去表示相应的库/模块的返回值（注意：根据requireJS规范，每个模块应该要有返回值,如app.js最后用了return window.app=app;）
  10.     'use strict';
  11.  
  12.     var app = new Marionette.Application();
  13.     //创建APP, Marionette官方描述为：the hub of your composite
  14. //application. It organizes, initializes and coordinates the various pieces of your app.
  15.     var todoList = new TodoList();//collections/TodoList,　collections就是model集
  16.  
  17.     var viewOptions = {
  18.         collection: todoList
  19.     };
  20.  
  21.     var header = new Header(viewOptions);
  22.     var main = new TodoListCompositeView(viewOptions);
  23.     var footer = new Footer(viewOptions);//这三个view都是绑定collections/TodoList这个collection
  24.  
  25.     app.addRegions({//给app增加region，region是分区处理更加灵活
  26.         header: '#header',
  27.         main: '#main',
  28.         footer: '#footer'
  29.     });
  30.  
  31.     app.addInitializer(function () {//添加事件到Marionette的初始器　app启动时会被马上执行
  32.         //show 三个region
  33.         app.header.show(header);
  34.         app.main.show(main);
  35.         app.footer.show(footer);
  36.  
  37.         todoList.fetch();//collection todoList获取localstorage的数据
  38.     });
  39.  
  40.     app.listenTo(todoList, 'all', function () {//监听collection todoList　所有事件包括todoList.fetch();
  41.         app.main.$el.toggle(todoList.length > 0);//main view执行toggle 函数
  42.         app.footer.$el.toggle(todoList.length > 0);//footer view执行toggle 函数
  43.     });
  44.  
  45.     app.vent.on('todoList:filter', function (filter) {//vent是用于定义供实例外部引用的函数，可以看见在controller里面trigger此函数
  46.         footer.updateFilterSelection(filter);//执行footer view里面的函数
  47.  
  48.         document.getElementById('todoapp').className = 'filter-' + (filter === '' ? 'all' : filter);//纯js
  49.     });
  50.  
  51.     app.vent.on('todoList:clear:completed', function () {//vent是用于定义供实例外部引用的函数，可以看见在footer view里面trigger此函数
  52.         todoList.getCompleted().forEach(function (todo) {
  53.             todo.destroy();
  54.         });
  55.     });
  56.  
  57.     return window.app = app;//把app绑到window全局对象并返回
  58. });

js/routers/index.js

  1. /*global define */
  2. define([
  3.     'marionette'
  4. ], function (Marionette) {
  5.     'use strict';
  6.  
  7.     return Marionette.AppRouter.extend({
  8.         appRoutes: {
  9.             '*filter': 'setFilter'//*splat表示可以匹配任意数量的URL形式，如路由：file/*path -> file/a/b/c.txt，传递值为/a/b/c.txt;题外的如 :param将匹配斜杠/之间单一的一个URL变量，如路由：search/:query/p:page -> #search/obama/p2，传值为"obama"和"2"
  10.         }
  11.     });
  12. });

js/controllers/index.js

  1. /*global define */
  2. define([
  3.     'app'
  4. ], function (app) {
  5.     'use strict';
  6.  
  7.     return {
  8.         setFilter: function (param) {
  9.             app.vent.trigger('todoList:filter', param && param.trim() || '');//根据URL中的传的值param触发app.js中定义的vent（todoList:filter）的函数
  10.         }
  11.     };
  12. });

TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之一的更多相关文章

  1. TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之三 Views

    这个版本的TodoMVC中的视图组织划分比较细,更加易于理解,这也得益于Marionette为我们带来了丰富的视图选择,原生的backbone只有views,而Marionette则有itemview ...

  2. TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之二 数据处理

    当我们使用jQuery时大部分时间是聚焦于Dom节点的处理,给Dom节点绑定事件等等:前端mvc框架backbone则如何呢? M-Model,Collection等,是聚焦于数据的处理,它把与后台数 ...

  3. Orleans例子源码

    这是Orleans系列文章中的一篇.首篇文章在此 我共享以下我现在写教程的简单的Orleans例子源码. 这个代码已经是我为了写word改动过了的.不过大体内容是通用的. 我写博客总体想法是:去除所有 ...

  4. Shiro官方快速入门10min例子源码解析框架2-Session

    Shiro自身维护了一套session管理组件,它可以独立使用,并不单纯依赖WEB/Servlet/EJB容器等环境,使得它的session可以任何应用中使用. 2-Session)主要介绍在quic ...

  5. java中的==、equals()、hashCode()源码分析（转载）

    在java编程或者面试中经常会遇到 == .equals()的比较.自己看了看源码,结合实际的编程总结一下. 1. ==  java中的==是比较两个对象在JVM中的地址.比较好理解.看下面的代码: ...

  6. Vue3中的响应式对象Reactive源码分析

    Vue3中的响应式对象Reactive源码分析 ReactiveEffect.js 中的 trackEffects函数 及 ReactiveEffect类 在Ref随笔中已经介绍,在本文中不做赘述 本 ...

  7. Java并发包中Semaphore的工作原理、源码分析及使用示例

    1. 信号量Semaphore的介绍 我们以一个停车场运作为例来说明信号量的作用.假设停车场只有三个车位,一开始三个车位都是空的.这时如果同时来了三辆车,看门人允许其中它们进入进入,然后放下车拦.以后 ...

  8. MNIST 例程源码分析 TensorFlow 从入门到精通

    按照上节步骤, TensorFlow 默认安装在 /usr/lib/python/site-packages/tensorflow/ (也有可能是 /usr/local/lib……)下,查看目录结构: ...

  9. 详解SpringMVC中Controller的方法中参数的工作原理[附带源码分析]

    目录 前言 现象 源码分析 HandlerMethodArgumentResolver与HandlerMethodReturnValueHandler接口介绍 HandlerMethodArgumen ...

随机推荐

  1. <<< web里面Servlet高级应用的基础介绍

    Servlet中的页面跳转?两种方式,实现跳转:内部跳转(请求转发).外部跳转(重定向)内部跳转(请求转发)特点:在服务器内部完成页面之间的跳转:请求只有一次:浏览器地址不会改变.request.ge ...

  2. jquery ripples水波纹效果( 涟漪效果)

    这个效果是我从bootstrap-material-design上面分离下来的,bootstrap-material-design的一些组件样式我不太不喜欢,但是非常喜欢这个水波纹效果,所以就有了这篇 ...

  3. 使用IExport进行图片输出出现File creation error

    使用IExport进行图片输出(.JPG)时,出现如下异常File creation error.   在ESRI.ArcGIS.Output.ExportJPEGClass.FinishExport ...

  4. Java学习笔记12

    循环 打印一个字符串(例如: "Welcome to Java!") 100次,就需要吧下面的输出语句重复写100遍,这是相当繁琐的: System.out.println(&qu ...

  5. 浅谈Android中layout_weight

    引言 在开发android过程中,我们经常需要对界面进行按比例进行布局,我们一般都会使用layout_属性来进行设置.今天这篇文章我们就来简单介绍下layout_weight的使用和布局原理.随着做项 ...

  6. 深入理解javascript原型和闭包（1）——一切都是对象

    “一切都是对象”这句话的重点在于如何去理解“对象”这个概念. ——当然,也不是所有的都是对象,值类型就不是对象. 首先咱们还是先看看javascript中一个常用的函数——typeof().typeo ...

  7. 生成彩条的MATLAB代码

    clc;close all;clear %read image % RGBimga = imread('bmpinput_1080p.bmp'); RGBimga = imread('bmpinput ...

  8. UI设计

    微软压平的瓷砖设计符合最直接的信息接受方式,但不符合人类的审美观念. 换句话说,除了平,还有艺术,人类的脑力活动从不会平的像个白板,它是九曲十八弯的脉冲波动. 人类几千年的的审美史上,从没有出现过这种 ...

  9. MFC之进度条CProgressCtrl

    一.成员函数简介 1.create()针对不是通过资源文件上拖拉进度条控件生成的进度条,需要用此函数创建一个. 2.SetRange()设置进度条的起始值和终止值. 3.SetPos()设置进度条的当 ...

  10. shell 脚本之获取命令输出字符串以及函数参数传递

    在ubuntu 14.04之后,所有的U盘挂载也分用户之分,最近很多操作也和U盘有关,所以就研究了一上午shell脚本函数以及字符串操作的方法. 字符串操作: 获取他的命令输出比较简单,打个简单的比方 ...