WebApp - 浅谈HTML5单页面架构（三）
浅谈HTML5单页面架构（三）
注：小编是一个有轻微处女座情节的人，所以很多内容为了方便阅读和格式美观，我都做成了图片，上传后头条都压缩了图片质量，但是不影响大家阅读，因为可以点击放大，哇哈哈！
前两篇简单讨论了requirejs+angular和requirejs+backbone的架构，这两个架构，估计也是国内最热门的做法。
浅谈HTML5单页面架构（一）——requirejs + angular + angular-route
浅谈HTML5单页面架构（二）——backbone + requirejs + zepto + underscore
不过，这一篇，我想进一步探讨一下这两个框架的优缺点，另外，再进一步，抛开这两个框架，回到本真，自己搞个简单的路由一样可以实现单页面。
这个对于刚做前端开发的新同学来说就最好不过了，如果一来到岗位就一大堆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
这个跟前两篇没什么差别。requirejs引入main.js作为程序入口
第二步，main.js配置requirejs的依赖关系，并启动webapp
director.js没有AMD写法，还是按照shim的方式引入。另外，由于$和_的使用率太高，所以这里直接公开为全局变量。
除此之外，还加了appView变量，目的是方便各个子模块修改界面。
第三步，router.js配置路由
这里使用的路由类库是director(https://github.com/flatiron/director)，相对精简的路由，但其实对于我们这个程序来说，貌似还不够精简。先凑合着吧。
director官网给出的示例也相当简单，就是“路径”对应“函数”，非常清晰而且实用的方式。
来看看我们自己的版本：
这里把director的路由配置修改了一下，原来只能接受<String, Function>这样的key value对，但参考之前backbone篇，更好方式应该是让路由表尽量只有字符串配置，不要写逻辑（函数）。
所以，上述代码中，多了一个routeHandler，目的就是建立闭包，把string（配置）转换为一个闭包函数。
结果，运行效果就是，遇到一个路由，就根据配置加载对应的子模块代码。后续实际执行什么，由子模块自己决定。这样main/router就能彻底跟子模块解耦。
第四步，建立一个模块
tpl.html
controller1.js
我觉得能实现业务逻辑的前提下，越简单的架构就越好，便于传承和维护。
controller就是这个子模块要做的逻辑，appView是整个视图根节点，想怎么玩就怎么玩，这对于不熟悉angular、backbone的同学最爽不过了。
这里重点是利用了requirejs做模块化和依赖加载，并用了underscore的模版库template。
第五步，再做一个模块，加上一些销毁接口
tpl.html
controller2.js
至此，整个简单的框架就完成了。
大道至简，我非常喜欢这样简单的架构。希望对新手朋友有所帮助。
最后，关于director的路由，要吐槽一下，这个并没有backbone那些这么好用，它没有内置的缺省参数写法，需要自己理解正则表达式，写复杂的([?*。参照上边router.js的代码。
路由匹配的本质，其实是正则表达式的exec匹配和提取参数。
本文源码：
Github：https://github.com/kenkozheng/HTML5_research/tree/master/UnderscoreRequireJS