TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之一
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例子源码分析之一的更多相关文章
- TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之三 Views
这个版本的TodoMVC中的视图组织划分比较细,更加易于理解,这也得益于Marionette为我们带来了丰富的视图选择,原生的backbone只有views,而Marionette则有itemview ...
- TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之二 数据处理
当我们使用jQuery时大部分时间是聚焦于Dom节点的处理,给Dom节点绑定事件等等:前端mvc框架backbone则如何呢? M-Model,Collection等,是聚焦于数据的处理,它把与后台数 ...
- Orleans例子源码
这是Orleans系列文章中的一篇.首篇文章在此 我共享以下我现在写教程的简单的Orleans例子源码. 这个代码已经是我为了写word改动过了的.不过大体内容是通用的. 我写博客总体想法是:去除所有 ...
- Shiro官方快速入门10min例子源码解析框架2-Session
Shiro自身维护了一套session管理组件,它可以独立使用,并不单纯依赖WEB/Servlet/EJB容器等环境,使得它的session可以任何应用中使用. 2-Session)主要介绍在quic ...
- java中的==、equals()、hashCode()源码分析（转载）
在java编程或者面试中经常会遇到 == .equals()的比较.自己看了看源码,结合实际的编程总结一下. 1. == java中的==是比较两个对象在JVM中的地址.比较好理解.看下面的代码: ...
- Vue3中的响应式对象Reactive源码分析
Vue3中的响应式对象Reactive源码分析 ReactiveEffect.js 中的 trackEffects函数 及 ReactiveEffect类 在Ref随笔中已经介绍,在本文中不做赘述 本 ...
- Java并发包中Semaphore的工作原理、源码分析及使用示例
1. 信号量Semaphore的介绍 我们以一个停车场运作为例来说明信号量的作用.假设停车场只有三个车位,一开始三个车位都是空的.这时如果同时来了三辆车,看门人允许其中它们进入进入,然后放下车拦.以后 ...
- MNIST 例程源码分析 TensorFlow 从入门到精通
按照上节步骤, TensorFlow 默认安装在 /usr/lib/python/site-packages/tensorflow/ (也有可能是 /usr/local/lib……)下,查看目录结构: ...
- 详解SpringMVC中Controller的方法中参数的工作原理[附带源码分析]
目录 前言 现象 源码分析 HandlerMethodArgumentResolver与HandlerMethodReturnValueHandler接口介绍 HandlerMethodArgumen ...
随机推荐
- request 获取服务根目录地址
这是常用的request获取服务地址的常用方式. 源请求服务地址:http://localhost/api-server/1/forum/thread/hot_topic?sex=1 String p ...
- sqlserver text/ntext 字段读取
sqlserver ntext 字段在读取时返回值 net.sourceforge.jtds.jdbc.ClobImpl@555bc78f 需要在连接数据库的URL后边加上";useLOBs ...
- ubuntu/var/log/下各个日志文件
ubuntu/var/log/下各个日志文件 本文简单介绍ubuntu/var/log/下各个日志文件,方便出现错误的时候查询相应的log /var/log/alternatives.log-更新 ...
- 布局之按钮的图片分辨率--Android Studio
在布局页面,想把取消按钮和确认钮大小一致,刚开始想法是错的,不用在控制层设置,也不用在布局层压缩图片,有两个方法法: 1.直接用美图秀秀“尺寸”功能,修改成另一按钮一样的分辨率. 2.设置按钮相同高度 ...
- [Python] 利用Django进行Web开发系列（一）
1 写在前面 在没有接触互联网这个行业的时候,我就一直很好奇网站是怎么构建的.现在虽然从事互联网相关的工作,但是也一直没有接触过Web开发之类的东西,但是兴趣终归还是要有的,而且是需要自己动手去实践的 ...
- JavaScript -- 小试牛刀
//var a = parseInt(window.prompt("请输入一个数字!","")); //switch(a) { // case 1 : // c ...
- poj 1141
简单的dp 忘了\n,调了半天(目测不是第一次了) 直接贴代码: #include<cstdio> #include<cstring> using namespace std; ...
- zTree学习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- c/c++字符串定义及使用的对比
c/c++中使用字符串的频率还是比较高的,下面就字符串的不同定义及其使用方法做一些对比 字符串一般有以下三种定义方法: 1.char *p="hello"; 2.char str[ ...
- 日志解析LogParse启动参数配置
-task task_stat1001to1010.yaml -log log4j_stat1001to1010.xml 用绝对路径