文件路由器Emberjs——重构你的Router -java教程

在改章节中,我们主要介绍文件路由器的内容,自我感觉有个不错的建议和大家分享下

    原文：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);

文章结束给大家分享下程序员的一些笑话语录： 那是习惯决定的，一直保持一个习惯是不好的！IE6的用户不习惯多标签，但是最终肯定还是得转到多标签的浏览器。历史（软件UI）的进步（改善）不是以个人意志（习惯）为转移的！