When and why would I use Backbone.js Router for routing instead of routing via server-side code? Could someone elaborate on that since it's my first time exposed to do routing on client-side.
什么时候使用主干,为什么使用主干。用于路由而不是通过服务器端代码路由的js路由器?既然这是我第一次在客户端进行路由,谁能详细说明一下呢?
6 个解决方案
#1
16
You've presented a false dichotomy. The reality is that there is probably never going to be a situation when you'll use Backbone's router in place of a server-side solution. That said, there is certainly a growing trend toward using client-side routers in general (not specifically Backbone's) to create one-page apps—e.g., Ember.js. Here are your options:
你提出了一个错误的二分法。现实情况是,您可能永远不会使用主干路由器来代替服务器端解决方案。也就是说,使用客户端路由器来创建一个页面应用程序的趋势在不断增长(不是主干路由器)。,Ember.js。这是你的选择:
Only server-side routes
This is the classic approach that is a big component of frameworks like Rails. It is a mature strategy that draws very bright lines between your models, views, and controllers. It's certainly not going away anytime soon, and for good reason: it's great if you're not developing a one-page app, which most people aren't.
这是典型的方法,它是Rails这样的框架的重要组成部分。这是一种成熟的策略,在模型、视图和控制器之间绘制非常清晰的线条。它肯定不会很快消失,而且有充分的理由:如果你不开发一页的应用程序,那就太棒了,而大多数人都不是。
Only client-side routes
This is what things like Ember offer you. You can write all of your routes on the client-side, and then the client is responsible for updating state, throwing old objects away, etc. This requires a robust JavaScript implementation of models, views, and controllers to work properly. Otherwise you're going to quickly end up with a pile of rotten spaghetti. If you're going to do this, do not use Backbone. Backbone's router works best for simple things like state. There is simply no clean way to use vanilla Backbone to replace a server-side router.
这是像烬一样的东西提供给你。您可以在客户端上编写所有路由,然后客户端负责更新状态、丢弃旧对象等。这需要模型、视图和控制器的健壮JavaScript实现才能正常工作。否则你很快就会得到一堆烂意大利面。如果你要这样做,不要使用主干。主干路由器最适用于简单的事情,比如状态。用普通的主干替换服务器端路由器是不可能的。
Hybrid approach
A hybrid approach is where Backbone's router will shine. You use server-side routes to serve the views/templates, and then you enhance them with Backbone's routes. Here's a few examples of that:
一种混合的方法是主干路由器发光的地方。您使用服务器端路由来服务视图/模板,然后使用主干路由增强它们。这里有几个例子:
- A user profile page that has an inline editor. The route might be:
/users/me#mode=edit
, where/users/me
is a typical route served by the server, and#mode=edit
is a Backbone route that changes the view to an 'edit' mode where the user can edit his profile info. - 具有内联编辑器的用户概要页面。路由可能是:/users/me#mode=edit,其中/users/me是服务器提供的典型路由,而#mode=edit是主干路由,将视图更改为“edit”模式,用户可以在其中编辑个人资料信息。
- A calendar that highlights a date. The route might be:
/calendars/work#date=today
. Here's an example of something you just can't do with a server-side route: highlight a particular cell of the calendar (namely,today
). - 突出日期的日历。路线可能是:/calendar /work#date=today。这里有一个示例,您不能使用服务器端路由:突出日历的特定单元(即今天)。
Unless you're set on writing a one-page app, it's safe to say that you won't benefit too much from using a client-side router. And even if you are writing a one-pager, you probably shouldn't look to Backbone to do it.
除非你打算写一个一页的应用程序,否则你肯定不会从使用客户端路由器中得到太多好处。即使你正在写一个寻呼机,你也不应该去找主干。
#2
4
Benefits
好处
- fast, normally you only need to load one portion of the page
- 快速,通常您只需要加载页面的一部分
- memorable, history is kept page and you can control what goes into history, what's not
- 值得纪念的是,历史被保留着,你可以控制什么进入历史,什么不是
- organized, as you are building a client-side application, it's good to have all the necessary logic at client side, including important component like dispatcher (router)
- 当您构建一个客户端应用程序时,有组织地在客户端拥有所有必要的逻辑,包括像dispatcher(路由器)这样的重要组件,这很好
- easy to do, implementaion is almost same as server side, you specify routes and handlers, then links in the anchor href attr.
- 很容易做到,实现者几乎与服务器端相同,您指定路由和处理程序,然后链接到锚href attr。
exception case
异常情况下
- when you want to do form submission consisting files, it's easier to just use action url to handle multi-part data
- 当您想要提交包含文件的表单时,使用action url来处理多部分数据会更容易
just my 2-cents
只是我2美分
Edit: deleted " as server-side" in memorable line.
编辑:删除“作为服务器端”在令人难忘的行。
#3
2
It's entirely a matter of preference. It's basically another version of asking when to do an AJAX request rather than a full request. You could use Backbone entirely for routing with a single page app and then just have the back-end represent a pure representation of the model through an API. This would be particularly helpful if pursuing an HTML5 -> Mobile type of solution. I'd recommend a more tempered approach to start with depending on the skill set of you and your colleagues.
这完全是一个偏好的问题。它基本上是询问何时执行AJAX请求而不是完整请求的另一个版本。您可以完全使用主干进行单页应用程序的路由,然后让后端通过API表示模型的纯表示。如果采用HTML5 ->移动类型的解决方案,这将特别有用。根据你和你的同事的技能,我推荐一种更温和的方法。
The best first step would normally be to make sure to use something like a Backbone router to represent addressable front end state changes that are aligned with the primary application purpose. If the front end is doing things like displaying a detail view which is created from an AJAX request, then rather than implement that through an event handler attached to some UI element, you should implement it using a hash segment and front end routing which the UI element links to. So for instance the UI element would just be a link to something like /#/item/45
and then the router would pick that up and run the handler attached to the pattern like /#/item/{itemId}
. This better represents the state and opens the door to leveraging browser history and creating links that use the existing front end code in a clean way.
最好的第一步通常是确保使用主干路由器来表示与主要应用程序目的一致的可寻址前端状态更改。如果前端做事情像显示一个细节视图创建从一个AJAX请求,而不是实现,通过一个事件处理程序附加到一些UI元素,你应该使用一个散列部分和实现前端UI元素链接到路由。例如,UI元素只是/#/item/45之类的链接,然后路由器会接收到它并运行连接到/#/item/{itemId}模式的处理程序。这更好地表示了状态,并为利用浏览器历史记录和创建以干净方式使用现有前端代码的链接打开了大门。
After starting with this you can implement routers increasingly as desired.
从这个开始,您可以越来越多地实现路由器。
#4
2
Why I would use it:
为什么我会使用它:
- Cleaner UI application code. Centralized approach to the concerns. This plays big role for the complex UI applications.
- 清洁UI应用程序代码。集中处理关注点。这对于复杂的UI应用程序非常重要。
Next two items are somewhat related to the client side routing (not directly though):
接下来的两项与客户端路由有关(不是直接的):
- Ajax requests don't need to get whole page back (though still could).
- Ajax请求不需要返回整个页面(尽管仍然可以)。
- Ajax requests can use compact format of the data (such as JSON) that makes request processing even faster.
- Ajax请求可以使用数据的紧凑格式(如JSON),这使得请求处理速度更快。
Why I would not use it:
为什么我不使用它:
- SEO becomes a little harder to accomplish. Client-side routes mostly map to the client side functions, not URLs. This means, search engine will see links that don't lead to the different content pages. This, obviously, is not desired. To some extent, you can try to overcome it using site maps.
- SEO变得有点难完成了。客户端路由主要映射到客户端函数,而不是url。这意味着,搜索引擎将看到不会导致不同内容页面的链接。显然,这是不可取的。在某种程度上,您可以尝试使用站点地图来克服它。
- As another overcome to the above problem, website developers sometimes have to support the same URL structure (routing) on both client-side and server-side. This is more efforts for accomplishing the same end-result. This, in my opinion, is a mistake, because such websites were thought as public in the beginning but were designed as private. In the most cases, such applications could have been designed just having Ajax in mind, but not client-side routing.
- 作为另一个解决上述问题的方法,网站开发人员有时必须在客户端和服务器端支持相同的URL结构(路由)。这是为了实现同样的最终结果而付出的更多努力。在我看来,这是一个错误,因为这些网站一开始被认为是公开的,但设计为私密的。在大多数情况下,这样的应用程序可能只是设计了Ajax,而不是客户端路由。
Conclusion:
结论:
That being said, in my opinion, client-side routing makes most sense for rich UI applications that don't need to be crawled (mostly because they are password protected).
也就是说,在我看来,客户端路由对于不需要爬行的丰富UI应用程序是最有意义的(主要是因为它们是受密码保护的)。
e.g. email, chat, enterprise applications, games, other custom applications.
例如电子邮件、聊天、企业应用、游戏、其他自定义应用。
On the other hand, as you may have noticed, websites intended to be crawled don't use client-side routing.
另一方面,正如您可能已经注意到的,希望被爬行的网站不使用客户端路由。
e.g. blogs, public websites, wiki pages, etc.
例如博客、公共网站、维基页面等。
Worth mentioning, you can mix these two approaches in the same application as long as it has different sections falling into different categories mentioned above.
值得一提的是,您可以在同一个应用程序中混合使用这两种方法,只要它的不同部分属于上面提到的不同类别。
#5
1
For a single page application, the browser is not redrawing the whole page every time the time user makes an action and content is instead generated by Javascript and injected into the page. Client-side routes maintain state in the address bar so that a user can return to that state directly, which makes those states bookmarkable, sharable, etc.
对于单个页面应用程序,浏览器不会在每次用户执行操作并由Javascript生成内容并将其注入页面时重新绘制整个页面。客户端路由维护地址栏中的状态,以便用户可以直接返回到该状态,这使得这些状态可书签化、可共享等等。
You still need to do server-side routing. From the Backbone docs:
您仍然需要执行服务器端路由。从骨干文档:
For example, if you have a route of /documents/100, your web server must be able to serve that page, if the browser visits that URL directly.
例如,如果您有/documents/100的路径,那么如果浏览器直接访问该URL,您的web服务器必须能够服务该页面。
#6
1
You will do server and client side routing.
您将执行服务器和客户端路由。
Requests from your client to the server still needs to be routed on the server. From your server's point of view routing is still done for Ajax requests.
客户端到服务器的请求仍然需要在服务器上路由。从服务器的角度来看,路由仍然是针对Ajax请求完成的。
The client side router is used to route #links
to your backbone app. So when someone clicks on a #
link your router will will pick this up and action it - most probably fire an appropriate event.
客户端路由器被用来连接到你的主干应用的#链接,所以当有人点击一个#链接你的路由器将会选择这个和行动它-很可能是火的一个适当的事件。
The the routers are very different and for now I cannot think of any circumstances where you'll use the one instead of the other.
路由器是非常不同的,现在我想不出任何情况下你会使用一个而不是另一个。
#1
16
You've presented a false dichotomy. The reality is that there is probably never going to be a situation when you'll use Backbone's router in place of a server-side solution. That said, there is certainly a growing trend toward using client-side routers in general (not specifically Backbone's) to create one-page apps—e.g., Ember.js. Here are your options:
你提出了一个错误的二分法。现实情况是,您可能永远不会使用主干路由器来代替服务器端解决方案。也就是说,使用客户端路由器来创建一个页面应用程序的趋势在不断增长(不是主干路由器)。,Ember.js。这是你的选择:
Only server-side routes
This is the classic approach that is a big component of frameworks like Rails. It is a mature strategy that draws very bright lines between your models, views, and controllers. It's certainly not going away anytime soon, and for good reason: it's great if you're not developing a one-page app, which most people aren't.
这是典型的方法,它是Rails这样的框架的重要组成部分。这是一种成熟的策略,在模型、视图和控制器之间绘制非常清晰的线条。它肯定不会很快消失,而且有充分的理由:如果你不开发一页的应用程序,那就太棒了,而大多数人都不是。
Only client-side routes
This is what things like Ember offer you. You can write all of your routes on the client-side, and then the client is responsible for updating state, throwing old objects away, etc. This requires a robust JavaScript implementation of models, views, and controllers to work properly. Otherwise you're going to quickly end up with a pile of rotten spaghetti. If you're going to do this, do not use Backbone. Backbone's router works best for simple things like state. There is simply no clean way to use vanilla Backbone to replace a server-side router.
这是像烬一样的东西提供给你。您可以在客户端上编写所有路由,然后客户端负责更新状态、丢弃旧对象等。这需要模型、视图和控制器的健壮JavaScript实现才能正常工作。否则你很快就会得到一堆烂意大利面。如果你要这样做,不要使用主干。主干路由器最适用于简单的事情,比如状态。用普通的主干替换服务器端路由器是不可能的。
Hybrid approach
A hybrid approach is where Backbone's router will shine. You use server-side routes to serve the views/templates, and then you enhance them with Backbone's routes. Here's a few examples of that:
一种混合的方法是主干路由器发光的地方。您使用服务器端路由来服务视图/模板,然后使用主干路由增强它们。这里有几个例子:
- A user profile page that has an inline editor. The route might be:
/users/me#mode=edit
, where/users/me
is a typical route served by the server, and#mode=edit
is a Backbone route that changes the view to an 'edit' mode where the user can edit his profile info. - 具有内联编辑器的用户概要页面。路由可能是:/users/me#mode=edit,其中/users/me是服务器提供的典型路由,而#mode=edit是主干路由,将视图更改为“edit”模式,用户可以在其中编辑个人资料信息。
- A calendar that highlights a date. The route might be:
/calendars/work#date=today
. Here's an example of something you just can't do with a server-side route: highlight a particular cell of the calendar (namely,today
). - 突出日期的日历。路线可能是:/calendar /work#date=today。这里有一个示例,您不能使用服务器端路由:突出日历的特定单元(即今天)。
Unless you're set on writing a one-page app, it's safe to say that you won't benefit too much from using a client-side router. And even if you are writing a one-pager, you probably shouldn't look to Backbone to do it.
除非你打算写一个一页的应用程序,否则你肯定不会从使用客户端路由器中得到太多好处。即使你正在写一个寻呼机,你也不应该去找主干。
#2
4
Benefits
好处
- fast, normally you only need to load one portion of the page
- 快速,通常您只需要加载页面的一部分
- memorable, history is kept page and you can control what goes into history, what's not
- 值得纪念的是,历史被保留着,你可以控制什么进入历史,什么不是
- organized, as you are building a client-side application, it's good to have all the necessary logic at client side, including important component like dispatcher (router)
- 当您构建一个客户端应用程序时,有组织地在客户端拥有所有必要的逻辑,包括像dispatcher(路由器)这样的重要组件,这很好
- easy to do, implementaion is almost same as server side, you specify routes and handlers, then links in the anchor href attr.
- 很容易做到,实现者几乎与服务器端相同,您指定路由和处理程序,然后链接到锚href attr。
exception case
异常情况下
- when you want to do form submission consisting files, it's easier to just use action url to handle multi-part data
- 当您想要提交包含文件的表单时,使用action url来处理多部分数据会更容易
just my 2-cents
只是我2美分
Edit: deleted " as server-side" in memorable line.
编辑:删除“作为服务器端”在令人难忘的行。
#3
2
It's entirely a matter of preference. It's basically another version of asking when to do an AJAX request rather than a full request. You could use Backbone entirely for routing with a single page app and then just have the back-end represent a pure representation of the model through an API. This would be particularly helpful if pursuing an HTML5 -> Mobile type of solution. I'd recommend a more tempered approach to start with depending on the skill set of you and your colleagues.
这完全是一个偏好的问题。它基本上是询问何时执行AJAX请求而不是完整请求的另一个版本。您可以完全使用主干进行单页应用程序的路由,然后让后端通过API表示模型的纯表示。如果采用HTML5 ->移动类型的解决方案,这将特别有用。根据你和你的同事的技能,我推荐一种更温和的方法。
The best first step would normally be to make sure to use something like a Backbone router to represent addressable front end state changes that are aligned with the primary application purpose. If the front end is doing things like displaying a detail view which is created from an AJAX request, then rather than implement that through an event handler attached to some UI element, you should implement it using a hash segment and front end routing which the UI element links to. So for instance the UI element would just be a link to something like /#/item/45
and then the router would pick that up and run the handler attached to the pattern like /#/item/{itemId}
. This better represents the state and opens the door to leveraging browser history and creating links that use the existing front end code in a clean way.
最好的第一步通常是确保使用主干路由器来表示与主要应用程序目的一致的可寻址前端状态更改。如果前端做事情像显示一个细节视图创建从一个AJAX请求,而不是实现,通过一个事件处理程序附加到一些UI元素,你应该使用一个散列部分和实现前端UI元素链接到路由。例如,UI元素只是/#/item/45之类的链接,然后路由器会接收到它并运行连接到/#/item/{itemId}模式的处理程序。这更好地表示了状态,并为利用浏览器历史记录和创建以干净方式使用现有前端代码的链接打开了大门。
After starting with this you can implement routers increasingly as desired.
从这个开始,您可以越来越多地实现路由器。
#4
2
Why I would use it:
为什么我会使用它:
- Cleaner UI application code. Centralized approach to the concerns. This plays big role for the complex UI applications.
- 清洁UI应用程序代码。集中处理关注点。这对于复杂的UI应用程序非常重要。
Next two items are somewhat related to the client side routing (not directly though):
接下来的两项与客户端路由有关(不是直接的):
- Ajax requests don't need to get whole page back (though still could).
- Ajax请求不需要返回整个页面(尽管仍然可以)。
- Ajax requests can use compact format of the data (such as JSON) that makes request processing even faster.
- Ajax请求可以使用数据的紧凑格式(如JSON),这使得请求处理速度更快。
Why I would not use it:
为什么我不使用它:
- SEO becomes a little harder to accomplish. Client-side routes mostly map to the client side functions, not URLs. This means, search engine will see links that don't lead to the different content pages. This, obviously, is not desired. To some extent, you can try to overcome it using site maps.
- SEO变得有点难完成了。客户端路由主要映射到客户端函数,而不是url。这意味着,搜索引擎将看到不会导致不同内容页面的链接。显然,这是不可取的。在某种程度上,您可以尝试使用站点地图来克服它。
- As another overcome to the above problem, website developers sometimes have to support the same URL structure (routing) on both client-side and server-side. This is more efforts for accomplishing the same end-result. This, in my opinion, is a mistake, because such websites were thought as public in the beginning but were designed as private. In the most cases, such applications could have been designed just having Ajax in mind, but not client-side routing.
- 作为另一个解决上述问题的方法,网站开发人员有时必须在客户端和服务器端支持相同的URL结构(路由)。这是为了实现同样的最终结果而付出的更多努力。在我看来,这是一个错误,因为这些网站一开始被认为是公开的,但设计为私密的。在大多数情况下,这样的应用程序可能只是设计了Ajax,而不是客户端路由。
Conclusion:
结论:
That being said, in my opinion, client-side routing makes most sense for rich UI applications that don't need to be crawled (mostly because they are password protected).
也就是说,在我看来,客户端路由对于不需要爬行的丰富UI应用程序是最有意义的(主要是因为它们是受密码保护的)。
e.g. email, chat, enterprise applications, games, other custom applications.
例如电子邮件、聊天、企业应用、游戏、其他自定义应用。
On the other hand, as you may have noticed, websites intended to be crawled don't use client-side routing.
另一方面,正如您可能已经注意到的,希望被爬行的网站不使用客户端路由。
e.g. blogs, public websites, wiki pages, etc.
例如博客、公共网站、维基页面等。
Worth mentioning, you can mix these two approaches in the same application as long as it has different sections falling into different categories mentioned above.
值得一提的是,您可以在同一个应用程序中混合使用这两种方法,只要它的不同部分属于上面提到的不同类别。
#5
1
For a single page application, the browser is not redrawing the whole page every time the time user makes an action and content is instead generated by Javascript and injected into the page. Client-side routes maintain state in the address bar so that a user can return to that state directly, which makes those states bookmarkable, sharable, etc.
对于单个页面应用程序,浏览器不会在每次用户执行操作并由Javascript生成内容并将其注入页面时重新绘制整个页面。客户端路由维护地址栏中的状态,以便用户可以直接返回到该状态,这使得这些状态可书签化、可共享等等。
You still need to do server-side routing. From the Backbone docs:
您仍然需要执行服务器端路由。从骨干文档:
For example, if you have a route of /documents/100, your web server must be able to serve that page, if the browser visits that URL directly.
例如,如果您有/documents/100的路径,那么如果浏览器直接访问该URL,您的web服务器必须能够服务该页面。
#6
1
You will do server and client side routing.
您将执行服务器和客户端路由。
Requests from your client to the server still needs to be routed on the server. From your server's point of view routing is still done for Ajax requests.
客户端到服务器的请求仍然需要在服务器上路由。从服务器的角度来看,路由仍然是针对Ajax请求完成的。
The client side router is used to route #links
to your backbone app. So when someone clicks on a #
link your router will will pick this up and action it - most probably fire an appropriate event.
客户端路由器被用来连接到你的主干应用的#链接,所以当有人点击一个#链接你的路由器将会选择这个和行动它-很可能是火的一个适当的事件。
The the routers are very different and for now I cannot think of any circumstances where you'll use the one instead of the other.
路由器是非常不同的,现在我想不出任何情况下你会使用一个而不是另一个。