浅谈HTML5单页面架构(三)—— 回归本真:自定义路由 + requirejs + zepto + underscore
本文转载自:http://www.cnblogs.com/kenkofox/p/4650310.html
不过,这一篇,我想进一步探讨一下这两个框架的优缺点,另外,再进一步,抛开这两个框架,回到本真,自己搞个简单的路由一样可以实现单页面。
这个对于刚做前端开发的新同学来说就最好不过了,如果一来到岗位就一大堆angular、backbone、requirejs,看资料都看一两周。其实大家最熟悉的东西还是那个美元$,用美元能解决的问题,就不要麻烦到angular、backbone大爷了。
事先说明,由于我的业务范围窄,不一定能把angular和backbone的功能都用一遍,所以以下的分析可能以偏概全,欢迎大家讨论。
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;
});

至此,整个简单的框架就完成了。
大道至简,我非常喜欢这样简单的架构。希望对新手朋友有所帮助。
最后,关于director的路由,要吐槽一下,这个并没有backbone那些这么好用,它没有内置的缺省参数写法,需要自己理解正则表达式,写复杂的([?*。参照上边router.js的代码。
路由匹配的本质,其实是正则表达式的exec匹配和提取参数。我后续会再整一个简单好用的路由,参考backbone的模式,猛击这里:http://www.cnblogs.com/kenkofox/p/4650824.html
本文代码:https://github.com/kenkozheng/HTML5_research/tree/master/UnderscoreRequireJS
浅谈HTML5单页面架构(三)—— 回归本真:自定义路由 + requirejs + zepto + underscore的更多相关文章
- 浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore
本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...
- AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构
requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...
- 浅谈HTML5单页面架构(一)——requirejs + angular + angular-route
心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...
- H5单页面架构:自定义路由 + requirejs + zepto + underscore
angular优点: 强大的数据双向绑定 View界面层组件化 内置的强大服务(例如表单校验) 路由简单 angular缺点: 引入的js较大,对移动端来说有点吃不消 语法复杂,学习成本高 backb ...
- 浅谈vue单页面seo问题
最近做项目的时候,被要求做seo,由于项目已经开发完毕,且只需首页做seo,所以考虑再三,决定用prerender-spa-plugin结合vue-meta-info来实现首页的seo.如果你的页面是 ...
- 【ASP.NET MVC系列】浅谈表单和HTML辅助方法
[01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作篇)(下) [04]浅谈ASP. ...
- 【ASP.NET MVC系列】浅谈ASP.NET 页面之间传值的几种方式
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
- 浅谈大型web系统架构
动态应用,是相对于网站静态内容而言,是指以c/c++.php.Java.perl..net等服务器端语言开发的网络应用软件,比如论坛.网络相册.交友.BLOG等常见应用.动态应用系统通常与数据库系统. ...
- 浅谈html5网页内嵌视频
更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...
随机推荐
- Struts框架
Struts是最早的Java开源框架之一,它是MVC设计模式的一个优秀实现. Struts定义了通用的Controller(控制器),通过配置文件(通常是 Struts -config.xml) Ec ...
- TSQL Merge On子句和When not matched 语义理解
Merge 的On子句指定Match condition,When子句指定过滤条件,如果Source Table和Targe Table匹配的上,很好理解:如果匹配不上,必须深入理解不匹配的条件,否则 ...
- 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类(一)
本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...
- Visulalization Voronoi in OpenSceneGraph
Visulalization Voronoi in OpenSceneGraph eryar@163.com Abstract. In mathematics a Voronoi diagram is ...
- OpenCascade Primitives BRep-Cylinder
OpenCascade Primitives BRep-Cylinder eryar@163.com Abstract. BRep is short for Boundary Representati ...
- 【记录】JS 生成 URL 二维码
示例代码: <html> <head> <title>example</title> </head> <body> <sc ...
- C算法编程题(五)“E”的变换
前言 上一篇<C算法编程题(四)上三角> 插几句话,说说最近自己的状态,人家都说程序员经常失眠什么的,但是这几个月来,我从没有失眠过,当然是过了分手那段时期.每天的工作很忙,一个任务接一个 ...
- 记录 android 开发的一个 "面试" 问题
前序: 3天前,有幸得到师兄赏识,和他一起去帮一间珠海的本地的IT公司担任面试官,虽说如此,我自己本身就还没毕业,充其量是去见识下世面罢了.当天共面试了13人,这只是上午,下午我闪了.在笔试的部分,我 ...
- ssh整合问题总结--在添加商品模块实现图片(文件)的上传
今天在做毕设(基于SSH的网上商城项目)中碰到了一个文件上传的需求,就是在后台管理员的商品模块中,有一个添加商品,需要将磁盘上的图片上传到tomcat保存图片的指定目录中: 完成这个功能需要两个步,第 ...
- WebGIS中利用AGS JS+eChart实现一些数据展示的探索
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 eChart提供了迁徙图.热点图.夜视图等跟地图能够很好的结 ...