Blog

Blog

PHODAL

Backbone router 正则表达式

在使用Backbone的过程中,发现原来还可以在Backbone Router中使用正则表达式。

Backbone Router

Backbone.Router担任了一部分Controller(控制器)的工作,它一般运行在单页应用中,能将特定的URL或锚点规则绑定到一个指定的方法。

在一开始使用Backbone Router的时候,用的是类似于下面的方法来寝化一个Router

Backbone.Router.extend({
  routes: {
    "users": "showUsers"
  },

  showUsers: function() {
    UserController.showUsers();
  }
});

var UserController = {
  showUsers: function() {
    var usersView = new UsersView();
    usersView.render();
    $("#user_list").html(usersView.el);
  }
}

而实际上Backbone Router是可以支持regex的

Backbone Router 正则表达式

官网中给了一个简单的示例

initialize: function(options) {
  this.route("page/:number", "page", function(number){ ... });
  this.route(/^(.*?)\/open$/, "open");
},

open: function(id) { ... }

于是接着就对自己的Router进行了一次重构,之前的Router大致如下所示

define([
    'jquery',
    'underscore',
    'backbone',
    'js/HomeView.js',
    'js/CreateAccountView.js'
],function($, _, Backbone, HomeView, CreateAccountView){

    var AppRouter = Backbone.Router.extend({
        routes: {
            'index': 'homePage',
            'account/create': 'Create'
        }
    });
    window.app = new AppRouter();
    var initialize = function() {
        var router = new AppRouter;

        router.on('route:homePage', function() {
            new HomeView();
        });

        router.on('route:Create', function() {
            var createAccountView = new CreateAccountView();
            createAccountView.render();
        });

        Backbone.history.start();
    };
    return {
      initialize: initialize
    };
});

修改完后的router如下所示:

    define([
        'jquery',
        'underscore',
        'backbone',
        'js/HomeView.js',
        'js/CreateAccountView.js'
    ],function($, _, Backbone, HomeView, CreateAccountView){
        var AppRouter = Backbone.Router.extend({
            index: function(){
                var homeView = new HomeView();
                homeView.initialize();
            },
            createAccount: function(){
                var createAccountView = new CreateAccountView();
                createAccountView.render();
            },
            initialize: function() {
                var router = this,
                    routes = [
                        [ /^.*$/, "index" ],
                        [ ":account/create", "createAccount" ]
                    ];

                _.each(routes, function(route) {
                    router.route.apply(router,route);
                });
                Backbone.history.stop();
                Backbone.history.start();
            }
        });

        window.app = new AppRouter();
        return AppRouter;
    });

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Engineer, Consultant, Writer, Designer

ThoughtWorks 技术专家

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 最新技术分享

标签