使用过JavaScript框架（如AngularJS, Backbone 或者Ember）的人都很熟悉在UI（用户界面，前端）中mvc的工作机理。这些框架实现了MVC，使得在一个单页面中实现根据需要变化视图时更加轻松，而模型-视图-控制器（mvc）的核心概念就是：处理传入请求的控制器、显示信息的视图、表示业务规则和数据访问的模型。
因此，当需要创建这样一个需要在单个页面中实现切换出不同内容的应用时，我们通常选择使用上述框架之一。但是,如果我们仅仅需要一个在一个url中实现视图切换的框架,而不需要额外捆绑的功能的话，就不必使用象Angular和Ember等复杂的框架。本文就是尝试使用简单、有效方法来解决同样的问题。
概念
应用中的代码利用urls中的“#”实现MVC模式的导航。应用以一个缺省的url开始，基于哈希值的代码加载应用视图并且将对象-模型应用于视图模板。
url格式像下面这样：
Name/index.html#/Route Name
视图内容必须以{{Property-Name}}的方式绑定对象模型的值和属性。代码会查找这个专门的模板格式并且代替对象模型中的属性值。
以ajax的方式异步加载的视图会被放置于页面的占位符中。视图占位符可以是任何的元素（理想的情况是div），但是它必须有一个专门的属性，代码根据这个专门的属性来定位它，这样同样有助于代码的实现。当url改变时，会重复这个场景，另外一个视图被加载。听起来很简单吧！下面的流程图解释了在这个特定的实现中的消息跳转。
写代码
我们以基本的模块设计模式开始，并且最终用门面设计模式的方式将我们的libs曝光于全局范围内。
;(function(w,d,undefined){//restofthecode})(window,document);我们需要将视图元素存储到一个变量中，这样就可以多次使用。
var_viewElement=null;//elementthatwillbeusedtorendertheview我们需要一个缺省的路由来应对url中没有路由信息的情况，这样就缺省的视图就可以被加载而不是展示空白页面。
var_defaultRoute=null;现在我们来创建我们的主要MVC对象的构造方法。我们会把路由信息存储在“_routeMap”中
var jsMvc = function () { //mapping object for the routes this._routeMap = {}; }
是时候创建路由对象了，我们会将路由、模板、控制器的信息存储在这个对象中。
var routeObj = function (c, r, t) { this.controller = c; this.route = r; this.template = t; }
每一个url会有一个专门的路由对象routeObj.所有的这些对象都会被添加到_routeMap对象中，这样我们后续就可以通过key-value的方式获取它们。
为了添加路由信息到MVC libs中，我们需要曝光libs中的一个方法。所以让我们创建一个方法，这个方法可以被各自的控制器用来添加新路由。
jsMvc.prototype.AddRoute = function (controller, route, template) { this._routeMap[route] = new routeObj(controller, route, template); }
方法AddRoute接收3个参数：控制器，路由和模板(contoller, route and template)。他们分别是：
controller:控制器的作用就是访问特定的路线。
route:路由的路线。这个就是url中#后面的部分。
template:这是外部的html文件，它作为这个路由的视图被加载。现在我们的libs需要一个切入点来解析url，并且为相关联的html模板页面提供服务。为了完成这个，我们需要一个方法。
Initialize方法做如下的事情：
1）获取视图相关的元素的初始化。代码需要一个具有view属性的元素，这样可以被用来在HTML页面中查找：
2）设置缺省的路由
3）验证视图元素是否合理
4）绑定窗口哈希变更事件，当url不同哈希值发生变更时视图可以被及时更新
5）最后，启动mvc
//Initialize the Mvc manager object to start functioning jsMvc.prototype.Initialize = function () { var startMvcDelegate = startMvc.bind(this); //get the html element that will be used to render the view _viewElement = d.querySelector('[view]'); if (!_viewElement) return; //do nothing if view element is not found //Set the default route _defaultRoute = this._routeMap[Object.getOwnPropertyNames(this._routeMap)[0]]; //start the Mvc manager w.onhashchange = startMvcDelegate; startMvcDelegate(); }
在上面的代码中，我们从startMvc方法中创建了一个代理方法startMvcDelegate。当哈希值变化时，这个代理都会被调用。下面就是当哈希值变化时我们做的操作的先后顺序：
1）获取哈希值
2）从哈希中获取路由值
3）从路由map对象_routeMap中获取路由对象routeObj
4）如果url中没有路由信息，需要获取缺省的路由对象
5）最后，调用跟这个路由有关的控制器并且为这个视图元素的视图提供服务
上面的所有步骤都被下面的startMvc方法所实现