如何用代碼實(shí)現(xiàn)JavaScript MVC樣式框架

這篇文章將為大家詳細(xì)講解有關(guān)如何用代碼實(shí)現(xiàn)JavaScript MVC樣式框架，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

Download JavaScript-Mvc.zip - 4.6 KB

• JavaScript Mvc on Github

• Live Demo

介紹

使用過(guò) JavaScript框架（如 AngularJS, Backbone 或者Ember）的人都很熟悉在UI（用戶界面，前端）中mvc的工作機(jī)理。這些框架實(shí)現(xiàn)了MVC，使得在一個(gè)單頁(yè)面中實(shí)現(xiàn)根據(jù)需要變化視圖時(shí)更加輕松，而模型-視圖-控制器（mvc）的核心概念就是：處理傳入請(qǐng)求的控制器、顯示信息的視圖、表示業(yè)務(wù)規(guī)則和數(shù)據(jù)訪問(wèn)的模型。

因此，當(dāng)需要?jiǎng)?chuàng)建這樣一個(gè)需要在單個(gè)頁(yè)面中實(shí)現(xiàn)切換出不同內(nèi)容的應(yīng)用時(shí)，我們通常選擇使用上述框架之一。但是,如果我們僅僅需要一個(gè)在一個(gè)url中實(shí)現(xiàn)視圖切換的框架,而不需要額外捆綁的功能的話，就不必使用象Angular和Ember等復(fù)雜的框架。本文就是嘗試使用簡(jiǎn)單、有效方法來(lái)解決同樣的問(wèn)題。

概念

應(yīng)用中的代碼利用urls中的“#”實(shí)現(xiàn)MVC模式的導(dǎo)航。應(yīng)用以一個(gè)缺省的url開始，基于哈希值的代碼加載應(yīng)用視圖并且將對(duì)象-模型應(yīng)用于視圖模板。

url格式像下面這樣：

http://Domain Name/index.html#/Route Name

視圖內(nèi)容必須以{{Property-Name}}的方式綁定對(duì)象模型的值和屬性。代碼會(huì)查找這個(gè)專門的模板格式并且代替對(duì)象模型中的屬性值。

以ajax的方式異步加載的視圖會(huì)被放置于頁(yè)面的占位符中。視圖占位符可以是任何的元素（理想的情況是div），但是它必須有一個(gè)專門的屬性，代碼根據(jù)這個(gè)專門的屬性來(lái)定位它，這樣同樣有助于代碼的實(shí)現(xiàn)。當(dāng)url改變時(shí)，會(huì)重復(fù)這個(gè)場(chǎng)景，另外一個(gè)視圖被加載。聽起來(lái)很簡(jiǎn)單吧！下面的流程圖解釋了在這個(gè)特定的實(shí)現(xiàn)中的消息跳轉(zhuǎn)。

寫代碼

我們以基本的模塊設(shè)計(jì)模式開始，并且最終用門面設(shè)計(jì)模式的方式將我們的libs曝光于全局范圍內(nèi)。

; (function (w, d, undefined) { //rest of the code })(window, document);

我們需要將視圖元素存儲(chǔ)到一個(gè)變量中，這樣就可以多次使用。

var _viewElement = null; //element that will be used to render the view

我們需要一個(gè)缺省的路由來(lái)應(yīng)對(duì)url中沒(méi)有路由信息的情況，這樣就缺省的視圖就可以被加載而不是展示空白頁(yè)面。

var _defaultRoute = null;

現(xiàn)在我們來(lái)創(chuàng)建我們的主要MVC對(duì)象的構(gòu)造方法。我們會(huì)把路由信息存儲(chǔ)在“_routeMap”中

var jsMvc = function () {      //mapping object for the routes      this._routeMap = {};  }

是時(shí)候創(chuàng)建路由對(duì)象了，我們會(huì)將路由、模板、控制器的信息存儲(chǔ)在這個(gè)對(duì)象中。

var routeObj = function (c, r, t) {      this.controller = c;      this.route = r;      this.template = t;  }

每一個(gè)url會(huì)有一個(gè)專門的路由對(duì)象routeObj.所有的這些對(duì)象都會(huì)被添加到_routeMap對(duì)象中，這樣我們后續(xù)就可以通過(guò)key-value的方式獲取它們。

為了添加路由信息到MVC libs中，我們需要曝光libs中的一個(gè)方法。所以讓我們創(chuàng)建一個(gè)方法，這個(gè)方法可以被各自的控制器用來(lái)添加新路由。

jsMvc.prototype.AddRoute = function (controller, route, template) {      this._routeMap[route] = new routeObj(controller, route, template);  }

方法AddRoute接收3個(gè)參數(shù)：控制器，路由和模板( contoller, route and template)。他們分別是：

controller:控制器的作用就是訪問(wèn)特定的路線。

route:路由的路線。這個(gè)就是url中#后面的部分。

template:這是外部的html文件，它作為這個(gè)路由的視圖被加載?，F(xiàn)在我們的libs需要一個(gè)切入點(diǎn)來(lái)解析url，并且為相關(guān)聯(lián)的html模板頁(yè)面提供服務(wù)。為了完成這個(gè)，我們需要一個(gè)方法。

Initialize方法做如下的事情：

1）獲取視圖相關(guān)的元素的初始化。代碼需要一個(gè)具有view屬性的元素，這樣可以被用來(lái)在HTML頁(yè)面中查找：

2）設(shè)置缺省的路由

3）驗(yàn)證視圖元素是否合理

4）綁定窗口哈希變更事件，當(dāng)url不同哈希值發(fā)生變更時(shí)視圖可以被及時(shí)更新

5）***，啟動(dòng)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 方法中創(chuàng)建了一個(gè)代理方法startMvcDelegate 。當(dāng)哈希值變化時(shí)，這個(gè)代理都會(huì)被調(diào)用。下面就是當(dāng)哈希值變化時(shí)我們做的操作的先后順序：

1）獲取哈希值

2）從哈希中獲取路由值

3）從路由map對(duì)象_routeMap中獲取路由對(duì)象routeObj

4）如果url中沒(méi)有路由信息，需要獲取缺省的路由對(duì)象

5）***，調(diào)用跟這個(gè)路由有關(guān)的控制器并且為這個(gè)視圖元素的視圖提供服務(wù)

上面的所有步驟都被下面的startMvc方法所實(shí)現(xiàn)

//function to start the mvc support  function startMvc() {      var pageHash = w.location.hash.replace('#', ''),          routeName = null,          routeObj = null;                                 routeName = pageHash.replace('/', ''); //get the name of the route from the hash              routeObj = this._routeMap[routeName]; //get the route object             //Set to default route object if no route found      if (!routeObj)          routeObj = _defaultRoute;             loadTemplate(routeObj, _viewElement, pageHash); //fetch and set the view of the route  }

下一步，我們需要使用XML HTTP請(qǐng)求異步加載合適的視圖。為此，我們會(huì)傳遞路由對(duì)象的值和視圖元素給方法loadTemplate。

//Function to load external html data  function loadTemplate(routeObject, view) {      var xmlhttp;      if (window.XMLHttpRequest) {          // code for IE7+, Firefox, Chrome, Opera, Safari          xmlhttp = new XMLHttpRequest();      }      else {          // code for IE6, IE5          xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');      }      xmlhttp.onreadystatechange = function () {          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {              loadView(routeObject, view, xmlhttp.responseText);          }      }      xmlhttp.open('GET', routeObject.template, true);      xmlhttp.send();  }

當(dāng)前只剩加載視圖和將對(duì)象模型與視圖模板綁定了。我們會(huì)創(chuàng)建一個(gè)空的模型對(duì)象，然后傳遞與方法相關(guān)的模型來(lái)喚醒路由控制器。更新后的模型對(duì)象會(huì)與先前已經(jīng)加載的XHR調(diào)用中的HTML模板綁定。

loadView 方法被用于調(diào)用控制器方法，以及準(zhǔn)備模型對(duì)象。

replaceToken方法被用于與HTML模板一起綁定模型

//Function to load the view with the template  function loadView(routeObject, viewElement, viewHtml) {      var model = {};          //get the resultant model from the controller of the current route        routeObject.controller(model);          //bind the model with the view          viewHtml = replaceToken(viewHtml, model);              //load the view into the view element      viewElement.innerHTML = viewHtml;   }     function replaceToken(viewHtml, model) {      var modelProps = Object.getOwnPropertyNames(model),                 modelProps.forEach(function (element, index, array) {          viewHtml = viewHtml.replace('{{' + element + '}}', model[element]);      });      return viewHtml;  }

***，我們將插件曝光于js全局范圍外

//attach the mvc object to the window  w['jsMvc'] = new jsMvc();

現(xiàn)在，是時(shí)候在我們單頁(yè)應(yīng)用中使用這個(gè)MVC插件。在下一個(gè)代碼段中，下面這些會(huì)實(shí)現(xiàn):

1)在web頁(yè)面中引入這個(gè)代碼

2）用控制器添加路由信息和視圖模板信息

3）創(chuàng)建控制器功能

4）***，初始化lib。

除了上面我們需要的鏈接讓我們導(dǎo)航到不同的路徑外，一個(gè)容器元素的視圖屬性包含著視圖模板html。

<!DOCTYPE html> <html> <head>     <title>JavaScript Mvc</title>     <script src="jsMvc.js"></script>     <!--[if lt IE 9]> <script src="jsMvc-ie8.js"></script> <![endif]-->            <style type="text/css">         .NavLinkContainer {              padding: 5px;              background-color: lightyellow;          }             .NavLink {              background-color:black;              color: white;              font-weight:800;              text-decoration:none;              padding:5px;              border-radius:4px;          }              .NavLink:hover {                  background-color:gray;              }      </style> </head> <body>     <h4>Navigation Links</h4>     <div class="NavLinkContainer">         <a class="NavLink" href="index.html#/home">Home</a>                 <a class="NavLink" href="index.html#/contact">Contact</a>              <a class="NavLink" href="index.html#/admin">Admin</a>                 </div>     <br />     <br />     <h4>View</h4>     <div view></div>     <script>         jsMvc.AddRoute(HomeController, &apos;home&apos;, &apos;Views/home.html&apos;);          jsMvc.AddRoute(ContactController, &apos;contact&apos;, &apos;Views/contact.html&apos;);          jsMvc.AddRoute(AdminController, &apos;admin&apos;, &apos;Views/admin.html&apos;);          jsMvc.Initialize();             function HomeController(model) {              model.Message = &apos;Hello World&apos;;          }             function ContactController(model) {              model.FirstName = "John";              model.LastName = "Doe";              model.Phone = &apos;555-123456&apos;;          }             function AdminController(model) {              model.UserName = "John";              model.Password = "MyPassword";          }      </script> </body> </html>

上面的代碼有一段包含一個(gè)為IE的條件注釋。

<!--[if lt IE 9]> <script src="jsMvc-ie8.js"></script> <![endif]-->

如果IE的版本低于9，那么function.bind，Object.getOwnPropertyNames和Array.forEach屬性將不會(huì)被支持。因此我們要通過(guò)判斷瀏覽器是否低于IE9來(lái)反饋代碼是否支持。

其中的內(nèi)容有home.html， contact.html 和 admin.html 請(qǐng)看下面：

home.html:

{{Message}}

contact.html:

{{FirstName}} {{LastName}}  <br /> {{Phone}}

admin.html:

<div style="padding:2px;margin:2px;text-align:left;">     <label for="txtUserName">User Name</label>     <input type="text" id="txtUserName" value="{{UserName}}" /> </div> <div style="padding:2px;margin:2px;text-align:left;">     <label for="txtPassword">Password</label>     <input type="password" id="txtPassword" value="{{Password}}" /> </div>

完整的代碼可以從給定的下載鏈接中得到。

如何運(yùn)行代碼

運(yùn)行該代碼比較簡(jiǎn)單，需要在你喜歡的Web服務(wù)器上創(chuàng)建一個(gè)Web應(yīng)用，下面以IIS為例來(lái)說(shuō)明。

首先在默認(rèn)站點(diǎn)中新增一個(gè)Web應(yīng)用.

然后設(shè)置必填信息：別名，物理路徑，應(yīng)用池，用戶認(rèn)證信息，點(diǎn)擊OK。

***定位到Web應(yīng)用的內(nèi)容目錄，瀏覽你想打開的HTML頁(yè)面即可。

跑在服務(wù)器里是必要的，因?yàn)榇a加載從存儲(chǔ)于外部文件中的視圖，瀏覽器不會(huì)允許我們的代碼在非宿主服務(wù)器環(huán)境下執(zhí)行。當(dāng)然如果你使用Visual Studio那么直接在目標(biāo)html文件上右鍵，選擇‘View In Browser’即可。

瀏覽器支持

大部分的現(xiàn)代瀏覽器都支持本代碼。針對(duì)IE8及以下的瀏覽器，有一份單獨(dú)的代碼來(lái)支持，但很不幸，這份代碼遠(yuǎn)多于100行。因此這代碼不是百分百跨瀏覽器兼容的，所以當(dāng)你決定在項(xiàng)目中使用時(shí)需要對(duì)代碼進(jìn)行微調(diào)。

關(guān)于如何用代碼實(shí)現(xiàn)JavaScript MVC樣式框架就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。