超级简单实现JavaScript MVC 样式框架

本文给大家分享的是一则翻译过来的，由国外友人写的如何简单有效的实现javascript MVC样式框架，算是一个MVC的入门教程，希望大家能够喜欢。

 

　介绍

　　使用过JavaScript框架（如AngularJS, Backbone 或者Ember）的人都很熟悉在UI（用户界面，前端）中mvc的工作机理。这些框架实现了MVC，使得在一个单页面中实现根据需要变化视图时更加轻松，而模型-视图-控制器（mvc）的核心概念就是：处理传入请求的控制器、显示信息的视图、表示业务规则和数据访问的模型。

　　因此，当需要创建这样一个需要在单个页面中实现切换出不同内容的应用时，我们通常选择使用上述框架之一。但是,如果我们仅仅需要一个在一个url中实现视图切换的框架,而不需要额外捆绑的功能的话，就不必使用象Angular和Ember等复杂的框架。本文就是尝试使用简单、有效方法来解决同样的问题。

　概念

　　应用中的代码利用urls中的“#”实现MVC模式的导航。应用以一个缺省的url开始，基于哈希值的代码加载应用视图并且将对象-模型应用于视图模板。

　　url格式像下面这样：

　　http://Domain 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”中