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

<!doctype html>

<html lang="en" data-framework="marionettejs">

    <head>

        <meta charset="utf-8">

        <title>Backbone.Marionette & Requirejs • TodoMVC</title>

        <link rel="stylesheet" href="bower_components/todomvc-common/base.css">

        <link rel="stylesheet" href="css/custom.css">

    </head>

    <body>

        <section id="todoapp">

            <header id="header">

            </header>

            <section id="main">

            </section>

            <footer id="footer">

            </footer>

        </section>

        <footer id="info">

            <p>Double-click to edit a todo</p>

            <p>Created by <a href="http://github.com/jsoverson">Jarrod Overson</a></p>

        </footer>

        <script src="bower_components/todomvc-common/base.js"></script>

        <script data-main="js/main" src="bower_components/requirejs/require.js"></script><!--requireJS开始加载js/main.js文件-->

    </body>

js/main.js

require.config({//requireJS配置

    paths: {//路径配置

        underscore: '../bower_components/underscore/underscore',

        backbone: '../bower_components/backbone/backbone',

        marionette: '../bower_components/backbone.marionette/lib/backbone.marionette',

        jquery: '../bower_components/jquery/jquery',

        localStorage: '../bower_components/backbone.localStorage/backbone.localStorage',

        tpl: 'lib/tpl'

    },

    shim: {//非AMD规范库如backbone等库的配置,deps是依赖库,The shim config allows us to configure dependencies for scripts that do not call define() to register a module即下面的库不是通过define()来注册成为模块的

        underscore: {

            exports: '_'

        },

        backbone: {

            exports: 'Backbone',

            deps: ['jquery', 'underscore']

        },

        marionette: {

            exports: 'Backbone.Marionette',

            deps: ['backbone']

        }

    },

    deps: ['jquery', 'underscore']

});

require([

    'app',

    'backbone',

    'routers/index',

    'controllers/index'

], function (app, Backbone, Router, Controller) {　　//requireJS标准写法

    'use strict';

    app.start();//应用启动－〉app.js

    new Router({ controller: Controller });//指定了Controller（controllers/index）的Marionette.AppRouter（routers/index；监视url传值触发相应的事件

    Backbone.history.start();//当你的所有路由创建并且设置完毕后，调用Backbone.history.start()来开始记录url的hash change，如果是html5还可以记录pushState等

});

js/app.js

/*global define */

define([

    'marionette',

    'collections/TodoList',

    'views/Header',

    'views/TodoListCompositeView',

    'views/Footer'

], function (Marionette, TodoList, Header, TodoListCompositeView, Footer) {//requireJS标准写法，其实就是用function里的变量去表示相应的库/模块的返回值（注意：根据requireJS规范，每个模块应该要有返回值,如app.js最后用了return window.app=app;）

    'use strict';

    var app = new Marionette.Application();

    //创建APP, Marionette官方描述为：the hub of your composite

//application. It organizes, initializes and coordinates the various pieces of your app.

    var todoList = new TodoList();//collections/TodoList,　collections就是model集

    var viewOptions = {

        collection: todoList

    };

    var header = new Header(viewOptions);

    var main = new TodoListCompositeView(viewOptions);

    var footer = new Footer(viewOptions);//这三个view都是绑定collections/TodoList这个collection

    app.addRegions({//给app增加region，region是分区处理更加灵活

        header: '#header',

        main: '#main',

        footer: '#footer'

    });

    app.addInitializer(function () {//添加事件到Marionette的初始器　app启动时会被马上执行

        //show 三个region

        app.header.show(header);

        app.main.show(main);

        app.footer.show(footer);

        todoList.fetch();//collection todoList获取localstorage的数据

    });

    app.listenTo(todoList, 'all', function () {//监听collection todoList　所有事件包括todoList.fetch();

        app.main.$el.toggle(todoList.length > 0);//main view执行toggle 函数

        app.footer.$el.toggle(todoList.length > 0);//footer view执行toggle 函数

    });

    app.vent.on('todoList:filter', function (filter) {//vent是用于定义供实例外部引用的函数，可以看见在controller里面trigger此函数

        footer.updateFilterSelection(filter);//执行footer view里面的函数

        document.getElementById('todoapp').className = 'filter-' + (filter === '' ? 'all' : filter);//纯js

    });

    app.vent.on('todoList:clear:completed', function () {//vent是用于定义供实例外部引用的函数，可以看见在footer view里面trigger此函数

        todoList.getCompleted().forEach(function (todo) {

            todo.destroy();

        });

    });

    return window.app = app;//把app绑到window全局对象并返回

});

js/routers/index.js

/*global define */

define([

    'marionette'

], function (Marionette) {

    'use strict';

    return Marionette.AppRouter.extend({

        appRoutes: {

            '*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"

        }

    });

});

js/controllers/index.js

/*global define */

define([

    'app'

], function (app) {

    'use strict';

    return {

        setFilter: function (param) {

            app.vent.trigger('todoList:filter', param && param.trim() || '');//根据URL中的传的值param触发app.js中定义的vent（todoList:filter）的函数

        }

    };

});

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. BZOJ4650: [Noi2016]优秀的拆分

    考场上没秒的话多拿5分并不划算的样子. 思想其实很简单嘛. 要统计答案,求以每个位置开始和结束的AA串数量就好了.那么枚举AA中A的长度L,每L个字符设一个关键点,这样AA一定经过相邻的两个关键点.计 ...

  2. [转载]用 grub2 启动 clover.iso 来启动 OS X

    这个帖子只用来解决特定问题,是楼主这两天辛苦的结晶,如果你遇到了跟我差不多的情形,你就可以尝试这个解决方案. 特定情景:1.不管你的机器支不支持 UEFI ,反正你现在是用传统 BISO + MBR ...

  3. 【转载】Java反射: 数组

    原创链接:http://czj4451.iteye.com/blog/1479486 java.lang.reflect.Array Java反射机制通过Array类来处理数组,结合java.lang ...

  4. Windows的基本内容

    1, 进程间通信:是指进程间进行信息交换 低级方式:信号量通信(可以交换的信息量少的时候) 高级通信方式(3种):1.共享存储器系统(剪贴板) 2.消息传递系统(进程间的数据交换以消息(message ...

  5. linux REDHAT6.4下安装ArcGIS Server 10.1

    1 安装环境 因为Linux的发行版本比较多,我们在使用的时候请严格按照官网给的给出的版本,在官网上给出的是经过严格测试的,如果采用其他的,即便安装上了,在后续的运作中出现问题,这个可就麻烦了,官网对 ...

  6. android 性能优化-电量篇

    消耗电量的几个主要原因.功能:1.大数据量的网络传输(网络)2.不停的网络切换(网络)3.解析大量的数据(CPU) 关于网络方面的优化: .网络请求之前,检查网络连接.没有网络连接不进行请求 .判断网 ...

  7. Description Resource Path Location Type Java compiler level does not match the version of the instal

    解决办法 在项目上右键Properties->Project Facets,在打开的Project Facets页面中的Java下拉列表中,选择相应版本. 有可能是java1.6 改成java6 ...

  8. jsp动作元素之forward指令

    forward指令用于将页面响应转发到另外的页面.既可以转发到静态的HTML页面,也可以转发到动态的JSP页面,或者转发到容器中的Servlet. forward指令格式如下: <jsp:for ...

  9. JavaScript正则表达式详解（二）JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  10. thinkphp一对多HAS_MANY

    关联关系通常我们所说的关联关系包括下面三种:一对一关联 :ONE_TO_ONE,包括HAS_ONE 和 BELONGS_TO 一对多关联 :ONE_TO_MANY,包括HAS_MANY 和 BELON ...