Emberjs——重构你的Router

原文：http://livsey.org/blog/2012/10/09/breaking-up-your-routes-in-ember-dot-js/

关于Ember.js Router

路由器是Ember.js的一个核心功能，但很容易变得庞大。将整个应用的路由器放在一个文件里，那是很让人崩溃的事。庆幸的是，这是一个很容易解决的问题。

假设我们有一个应用，包括几个不同的版块--博客，成员，文件上传。应用程序代码放在一个名为“init.js”文件里：

  /***** init.js *****/

  // ...

  App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
      home: Ember.Route.extend({
        route: "/"
      }),
      blog: Ember.Route.extend({
        route: "/blog",
        posts: Ember.Route.extend({
          route: "/"
        }),
        post: Ember.Route.extend({
          route: "/:id",
        })
      }),
      members: Ember.Route.extend({
        route: "/members",
        list: Ember.Route.extend({
          route: "/"
        }),
        member: Ember.Route.extend({
          route: "/:id"
        })
      }),
      files: Ember.Route.extend({
        route: "/files",
        list: Ember.Route.extend({
          route: "/"
        }),
        file: Ember.Route.extend({
          route: "/:id"
        })
      })
    })
  })

  // ...

现在看起来不错，但实际上，这里面省略了很多东西：outlet连接管理，URL序列化、反序列化，响应动作的状态控制句柄等等……

重构这一切相当简单。上面使用Ember.Route.extend定义路由时，可以给它一个名字，然后移到它自己的文件里，从而将整个router分割。

  /***** routes/homepage.js *****/

  App.HomePageRoutes = Ember.Route.extend({
    route: "/"
  });

  /***** routes/blog.js *****/

  App.BlogRoutes = Ember.Route.extend({
    route: "/blog",
    posts: Ember.Route.extend({
      route: "/"
    }),
    post: Ember.Route.extend({
      route: "/:id",
    })
  });

  …………

同样的方法分割所有路由到独立文件。现在主路由器的定义变成这样了：

  /***** init.js *****/

  App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
      home: App.HomePageRoutes,
      blog: App.BlogRoutes,
      members: App.MembersRoutes,
      files: App.FilesRoutes
    })
  })

一切变得简洁！

 

补充：该例子仅用于讲解，并非是最合适的路由结构。更优的结构如下：

  /***** init.js *****/

  App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
      home: App.HomePageRoutes.extend({
        route: "/"
      }),
      blog: App.BlogRoutes.extend({
        route: "/blog"
      }),
      members: App.MembersRoutes.extend({
        route: "/members"
      }),
      files: App.FilesRoutes.extend({
        route: "/files"
      }),
    })
  })

 

最后提示：如果将所有分块放在同一个文件，还可以通过一个即时函数来处理，避免产生多余变量：

  /***** init.js *****/

  (function(app){

    var routes = {
      HomePageRoutes : Ember.Route.extend({
    route: "/"
      }),
      BlogRoutes : Ember.Route.extend({
    route: "/blog"
      })
      MembersRoutes : Ember.Route.extend({
    route: "/members"
      })
      FilesRoutes : Ember.Route.extend({
    route: "/files"
      })
    };

    var Router = Ember.Router.extend({
      root: Ember.Route.extend({
    home: routes.HomePageRoutes,
    blog: routes.BlogRoutes,
    members: routes.MembersRoutes,
    files: routes.FilesRoutes
      })
    });

    app.Router = Router;

  })
  
  })(window.App);