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的路由好用，文章最后再来探讨这个问题

自己做一套最简单的架构，思想非常简单：

  1. 启动程序
  2. 监听路由
  3. 路由变化，映射到对应的处理逻辑，加载对应的模块
  4. 模块加载完成，修改dom，也就是视图
  5. 页面跳转时，移除上一个模块，加载下一个模块，也就是回到第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的更多相关文章

  1. H5单页面架构：backbone + requirejs + zepto + underscore

    首先,来看看整个项目结构. 跟上一篇angular类似,libs里多了underscore和zepto.三个根目录文件: index.html:唯一的html main.js:requirejs的配置 ...

  2. 浅谈HTML5单页面架构（三）—— 回归本真：自定义路由 + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4650310.html 不过,这一篇,我想进一步探讨一下这两个框架的优缺点,另外,再进一步,抛开这两个框架,回到本真, ...

  3. H5单页面架构：requirejs + angular + angular-route

    说到项目架构,往往要考虑很多方面: 方便.例如使用jquery,必然比没有使用jquery方便很多,所以大部分网站都接入类似的库: 性能优化.包括加载速度.渲染效率: 代码管理.大型项目需要考虑代码的 ...

  4. 浅谈HTML5单页面架构（二）——backbone + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...

  5. 浅谈HTML5单页面架构（一）——requirejs + angular + angular-route

    心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...

  6. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

  7. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  8. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  9. 快速构建H5单页面切换应用

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

随机推荐

  1. mysql 自己定义存储过程和触发器

    mysql 自己定义存储过程和触发器 --存储过程示范 DROP PROCEDURE IF EXISTS PRO_TEST; CREATE PROCEDURE PRO_TEST(IN NUM_IN I ...

  2. Android学习笔记—Windows下NDK开发简单示例

    该示例假设Android开发环境已经搭建完成,NDK也配置成功: 1.在Eclipse上新建Android工程,名称为ndkdemo.修改res\layout\activity_main.xml &l ...

  3. EffectiveC#6--区别值类型数据和引用类型数据

    1. 设计一个类型时,选择struct或者class是件简单的小事情,但是,一但你的类型发生了改变, 对所有使用了该类型的用户进行更新却要付出(比设计时)多得多的工作. 2.值类型:无多态但性能佳. ...

  4. eclipse安装Flash Builder 4后变成中文，怎么解决

    修改eclipse.ini启动参数: -startup plugins/org.eclipse.equinox.launcher_1.2.0.v20110502.jar --launcher.libr ...

  5. Python3.5入门学习记录-列表、元组、字典

    1.列表 python列表的定义使用[] list = [1,2,3,4,5] #创建一个心列表list 获取列表中的值 first = list[0] #list中第一个值 last = list[ ...

  6. select选项改变时获取选中的option的值

    本来天真的以为直接this.value()就能去到select的值,可事实并非那么回事. <script> document.getElementById('select').onchan ...

  7. 使用do...while的方法输入一个月中所有的周日

    do{ var date = Number(prompt('请输入一个月的总天数')); var start = (prompt('请输入一个月的一号是周几')); for(var i=0;i< ...

  8. SPOJ 1811 Longest Common Substring (后缀自动机第一题，求两个串的最长公共子串)

    题目大意: 给出两个长度小于等于25W的字符串,求它们的最长公共子串. 题目链接:http://www.spoj.com/problems/LCS/ 算法讨论: 二分+哈希, 后缀数组, 后缀自动机. ...

  9. （原）ubuntu16中简单的使用google的protobuf

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5804395.html 参考网址: http://www.cnblogs.com/luosongchao ...

  10. css white-space

    以下是对上面几个属性的测试效果如下: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...