BackbOne移动端框架学习（4）：backbone中的 Router

声明：

前言：

　　话说，我是开发hybrid APP，使用Backbone真的好吗？在Hybrid里碰不到路由的问题。

1，History pushState/replaceSate

　  在学习BackbOne之前，我们要先了解下 H5 最新的 API -- pushState，这个功能解决了什么问题？

　　众所周知 Ajax的出现，使得我们的页面变得更加的友好和丰富，但是也同样带来了一些问题，比如 浏览器中前进和后退。而 pushState 的出现，就是解决这一问题的方法。

　　具体用法：

     　　/*
            ajax载入~~
        */
        
        // history处理
        var title = "上海3月开盘项目汇总-" + $(this).text().replace(/\d+$/, "");

        document.title = title;

        if (event && /\d/.test(event.button)) {    
        
            history.pushState({ title: title }, title, location.href.split("?")[0] + "?" + query　　　　　);

　　history.replaceSate的方法，是在页面刚初始化的时候，也要对历史记录进行初始化操作，就使用 replaceSate（）方法。

2，Backbone.Router

　　Router 的意思是 路由，在Backbone是控制 Url。

　　一个简单的代码如下：

        var AppRouter = Backbone.Router.extend({
                
                //设置默认的路由规则
                routes:{
                    "*actions":"defaultRoute" //#actions
                },
                defaultRoute:function(actions){
                    console.log(actions);
                }

        });

        var app_router = new AppRouter;
        Backbone.history.start(); //确保驱动初始化URL路由

　　以上的代码意思是：创建一个路由类，设置其默认路由规则，创建自定义方法，声明一个实例并启动URL路由功能，

　　routes将带参数的URLs映射到路由实例的方法上，简单的说就是为url绑定事件，其中"*actions" 等于 url（http://xx.html?a=1#ss）#右边的字符。

3，Routes映射传参数

        var AppRouter = Backbone.Router.extend({
                
                //设置默认的路由规则
                routes:{
                    "*actions"                :    "defaultRoute",
                    "search/:query/p:page"    :    "search",
                    "/getPost/:id"            :    "getPostId"
                },
                defaultRoute:function(actions){
                    console.log(actions);
                },
                search:function(query,page){
                    console.log(page); //search/软件随想录/p2 
                },
                getPostId:function(id){
                    cosnole.log(id);  //getPost/2 
                }

        });

        var app_router = new AppRouter;
        Backbone.history.start(); //确保驱动初始化URL路由

　　从上面已经可以看出来匹配 # 标签之后内容的方法有两种：

　　　　第一种：用“：”来把 # 后面对应位置作为参数；

　　　　第二种：用“*”，它可以匹配所有的url；

 

4，看完整的例子

　　有两个HTML文件，Router.html 和 router_new.html。

　　Router.html代码如下：

    <a href="router_new.html#actions">testActions</a>
    <a href="router_new.html#search/软件随想录/p2">testActions2</a>
    <a href="router_new.html#getPost/2">getPost2</a>
    <a href="#/posts/120">posts</a>
    <a href="#/dashboard/graph">Load Route/Action View</a> 
    <script type="text/javascript" src="js/zepto_1.1.4.js"></script> 
  <script type="text/javascript" src="js/underscore_1.5.0.js"></script>
  <script type="text/javascript" src="js/backbone.js"></script>

 

　　 router_new.html代码如下：

　　

  <script type="text/javascript" src="js/zepto_1.1.4.js"></script> 
  <script type="text/javascript" src="js/underscore_1.5.0.js"></script>
  <script type="text/javascript" src="js/backbone.js"></script>
  <script type="text/javascript">
    (function($){
    
        var AppRouter = Backbone.Router.extend({
                
                //设置默认的路由规则
                routes:{
                    "*actions"                        :    "defaultRoute",
                    "search/:query/p:page"    :    "search",
                    "/getPost/:id"                    :    "getPostId"
                },
                defaultRoute:function(actions){
                    console.log(actions);
                },
                search:function(query,page){
                    console.log(page); //search/软件随想录/p2 
                },
                getPostId:function(id){
                    cosnole.log(id);  //getPost/2 
                }

        });

        var app_router = new AppRouter;
        Backbone.history.start(); //确保驱动初始化URL路由

    })(Zepto)
        
  </script>

 

　至此，Backbone的Route讲解完毕，其中我也碰到过不明白的地方，比如由 Route.html带动参数传入到router_new.html的时候，应该输出带过的值才对，但是输出的却是完整的路径？