本文給大家分享的是一則翻譯過來的，由國外友人寫的如何簡單有效的實現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”中