H5单页面架构：自定义路由 + requirejs + zepto + underscore
angular优点：
- 强大的数据双向绑定
- View界面层组件化
- 内置的强大服务（例如表单校验）
- 路由简单
angular缺点：
- 引入的js较大，对移动端来说有点吃不消
- 语法复杂，学习成本高
backbone优点：
- 引入的js较小
- 清晰MVC分层
- Model层事件机制
- 路由简单而且便于扩展
backbone缺点：
- MVC有点死板，有时候觉得累赘
- 没有双向绑定，界面修改只能靠自己
- view切换时，没有足够便捷的事件通知（要自己监听route）
其实，这两个框架都非常优秀，但是，在实际业务中，不一定百试百灵，因为有一些移动端的单页面web，业务就很简单，只是路由分别切换到几个子模块，每个子模块基本都是拉一次数据，展示给用户，很少用户交互从而修改数据，改变视图的功能。
对于这种情况，使用angular未免有点杀鸡用牛刀的感觉，而backbone虽然小巧了不少，但是模型的功能也是浪费的。
所以，在这里，我想探讨一下，能否抛开这两个框架，只索取我们基本所需，建立一个更简单的架构呢？
经验看来，一些类库是必不可少的：
- requirejs：模块划分
- zepto：移动端的jquery
- underscore：便捷的基础方法，包括模版template、each、map等等
- 路由库：这里先使用director.js，然而这玩意并没有backbone和angular的路由好用，文章最后再来探讨这个问题
自己做一套最简单的架构，思想非常简单：
- 启动程序
- 监听路由
- 路由变化，映射到对应的处理逻辑，加载对应的模块
- 模块加载完成，修改dom，也就是视图
- 页面跳转时，移除上一个模块，加载下一个模块，也就是回到第3点
简单的思路，让架构非常简洁明了，新团队成员来到能够轻松上手，而angular和backbone的架构，少说得2、3天才能融入一个已有项目中去。
接下来，我们具体看看怎么做。
第一步，还是index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Underscore & Director & Requirejs</title>
</head> <body>
<div id="container"></div>
<script data-baseurl="./" data-main="main.js" src="libs/require.js" id="main"></script>
</body>
</html>
这个跟前两篇没什么差别。requirejs引入main.js作为程序入口
第二步，main.js配置requirejs的依赖关系，并启动webapp
(function (win) {
//配置baseUrl
var baseUrl = document.getElementById('main').getAttribute('data-baseurl');
/*
* 文件依赖
*/
var config = {
baseUrl: baseUrl, //依赖相对路径
paths: { //如果某个前缀的依赖不是按照baseUrl拼接这么简单，就需要在这里指出
director: 'libs/director',
zepto: 'libs/zepto.min',
underscore: 'libs/underscore',
text: 'libs/text' //用于requirejs导入html类型的依赖
},
shim: { //引入没有使用requirejs模块写法的类库。
underscore: {
exports: '_'
},
zepto: {
exports: '$'
},
director: {
exports: 'Router'
}
}
};
require.config(config);
require(['zepto', 'router', 'underscore'], function($, router, _){
win.appView = $('#container'); //用于各个模块控制视图变化
win.$ = $; //暴露必要的全局变量，没必要拘泥于requirejs的强制模块化
win._ = _;
router.init(); //开始监控url变化
});
})(window);
director.js没有AMD写法，还是按照shim的方式引入。另外，由于$和_的使用率太高，所以这里直接公开为全局变量。
除此之外，还加了appView变量，目的是方便各个子模块修改界面。
第三步，router.js配置路由
这里使用的路由类库是director(https://github.com/flatiron/director)，相对精简的路由，但其实对于我们这个程序来说，貌似还不够精简。先凑合着吧。
director官网给出的示例也相当简单，就是“路径”对应“函数”，非常清晰而且实用的方式。
var author = function () { console.log("author"); };
var books = function () { console.log("books"); };
var viewBook = function (bookId) {
console.log("viewBook: bookId is populated: " + bookId);
};
var routes = {
'/author': author,
'/books': [books, function() {
console.log("An inline route handler.");
}],
'/books/view/:bookId': viewBook
};
var router = Router(routes);
router.init();
来看看我们自己的版本：
define(['director', 'underscore'], function (Router, _) {
//先设置一个路由信息表，可以由html直出，纯字符串配置
var routes = {
'module1': 'module1/controller1.js',
'module2/:name': 'module2/controller2.js' //director内置了普通必选参数的写法，这种路由，必须用路径“#module2/kenko”才能匹配，无法缺省
// 'module2/?([^\/]*)/?([^\/]*)': 'module2/controller2.js' //可缺省参数的写法，其实就是正则表达式,括号内部分会被抽取出来变成参数值。backbone做得比较好，把这个语法简化了
// “ /?([^\/]*) ” 这样的一段表示一个可选参数，接受非斜杠/的任意字符
};
var currentController = null;
//用于把字符串转化为一个函数，而这个也是路由的处理核心
var routeHandler = function (config) {
return function () {
var url = config;
var params = arguments;
require([url], function (controller) {
if(currentController && currentController !== controller){
currentController.onRouteChange && currentController.onRouteChange();
}
currentController = controller;
controller.apply(null, params);
});
}
};
for (var key in routes) {
routes[key] = routeHandler(routes[key]);
}
return Router(routes);
});
这里把director的路由配置修改了一下，原来只能接受<String, Function>这样的key value对，但参考之前backbone篇，更好方式应该是让路由表尽量只有字符串配置，不要写逻辑（函数）。
所以，上述代码中，多了一个routeHandler，目的就是建立闭包，把string（配置）转换为一个闭包函数。
结果，运行效果就是，遇到一个路由，就根据配置加载对应的子模块代码。后续实际执行什么，由子模块自己决定。这样main/router就能彻底跟子模块解耦。
第四步，建立一个模块
tpl.html
<div>
Here is module 1. My name: <%=name %><br>
<a href="#module2/fromModule1">turn to module 2</a>
</div>
controller1.js
define(['text!module1/tpl.html'], function (tpl) {
var controller = function () {
appView.html(_.template(tpl, {name: 'kenko'}));
};
return controller;
});
我觉得能实现业务逻辑的前提下，越简单的架构就越好，便于传承和维护。
controller就是这个子模块要做的逻辑，appView是整个视图根节点，想怎么玩就怎么玩，这对于不熟悉angular、backbone的同学最爽不过了。
这里重点是利用了requirejs做模块化和依赖加载，并用了underscore的模版库template。
第五步，再做一个模块，加上一些销毁接口
tpl.html
<div>
Here is module 2. My name: <%=name %><br>
<button>click me!</button>
<a href="#module1">turn to module 1</a>
</div>
controller2.js
define(['text!module2/tpl.html'], function (tpl) {
var controller = function (name) {
appView.html(_.template(tpl, {name: name?name:'vivi'}));
$('button').on('click', function clickHandler() {
alert('hello');
});
controller.onRouteChange = function () {
console.log('change'); //可以做一些销毁工作，例如取消事件绑定
$('button').off('click'); //解除所有click事件监听
};
};
return controller;
});
至此，整个简单的框架就完成了。
H5单页面架构：自定义路由 + requirejs + zepto + underscore的更多相关文章
- H5单页面架构：backbone + requirejs + zepto + underscore
首先,来看看整个项目结构. 跟上一篇angular类似,libs里多了underscore和zepto.三个根目录文件: index.html:唯一的html main.js:requirejs的配置 ...
- 浅谈HTML5单页面架构（三）—— 回归本真：自定义路由 + requirejs + zepto + underscore
本文转载自:http://www.cnblogs.com/kenkofox/p/4650310.html 不过,这一篇,我想进一步探讨一下这两个框架的优缺点,另外,再进一步,抛开这两个框架,回到本真, ...
- H5单页面架构：requirejs + angular + angular-route
说到项目架构,往往要考虑很多方面: 方便.例如使用jquery,必然比没有使用jquery方便很多,所以大部分网站都接入类似的库: 性能优化.包括加载速度.渲染效率: 代码管理.大型项目需要考虑代码的 ...
- 浅谈HTML5单页面架构（二）——backbone + requirejs + zepto + underscore
本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...
- 浅谈HTML5单页面架构（一）——requirejs + angular + angular-route
心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...
- AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构
requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...
- H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
- 快速构建H5单页面切换骨架
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- 快速构建H5单页面切换应用
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
随机推荐
- python实现二叉树和它的七种遍历
介绍: 树是数据结构中很重要的一种,基本的用途是用来提高查找效率,对于要反复查找的情况效果更佳,如二叉排序树.FP-树. 另外能够用来提高编码效率,如哈弗曼树. 代码: 用python实现树的构造和几 ...
- （3）选择元素——（6）属性选择器（Attribute selectors）
Attribute selectors are a particularly helpful subset of CSS selectors. They allow us to specify an ...
- Linux下安装软件的错误
1. make configure GEN configure/bin/sh: 1: autoconf: not foundmake: *** [configure] Error 127 解决:sud ...
- JQuery hover(over,out) 使用笔记
转载自:http://www.douban.com/note/202404884/ JQuery hover(over,out) 使用笔记 JavaScript 下.onmouseover() 和 o ...
- android——使用自带录屏工具进行屏幕录像
在做开源项目的时候,想传一个gif效果图上去.但是,要有连贯的动画效果.所以,就想到先录制视频,然后视频转gif.但是,用第三录屏软件总是不完美. 那么,怎么办呢? android4.4 提供了自带录 ...
- 关于position和float的用法！
我要说的是这部分的切图, 先说一下为什么要用到position 看我的截图, 应该知道这块的组成是有两部分, 但中间那个绿圈中, 组成的两个部分有重叠的, 这时候, 可能会想用float, 但floa ...
- ORA-14450
ORA-14450 attempt to access a transactional temp table already in use Cause: An attempt was made to ...
- oracle 经典语句集合
1.一列转多行 方法一: select a.id, substr(','||a.name||',',instr(','||a.name,',',1,b.rn)+1, instr(a.name| ...
- Xcode 常用快捷键及代码自动排版 二
Xcode常用快捷键,网上找的总结一下,特别是格式化代码 隐藏xcode command+h退出xcode command+q关闭窗口 command+w关闭所有窗口 command+option+w ...
- textView富文本点击事件
NSDictionary * attDic = [NSDictionary dictionaryWithObjectsAndKeys:RGBCOLOR(31, 132, 204),NSForegrou ...