//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请求异步加载合适的视图。为此，我们会传递路由对象的值和视图元素给方法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(); }
当前只剩加载视图和将对象模型与视图模板绑定了。我们会创建一个空的模型对象，然后传递与方法相关的模型来唤醒路由控制器。更新后的模型对象会与先前已经加载的XHR调用中的HTML模板绑定。
loadView方法被用于调用控制器方法，以及准备模型对象。
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();
现在，是时候在我们单页应用中使用这个MVC插件。在下一个代码段中，下面这些会实现:
1)在web页面中引入这个代码
2）用控制器添加路由信息和视图模板信息
3）创建控制器功能
4）最后，初始化lib。
除了上面我们需要的链接让我们导航到不同的路径外，一个容器元素的视图属性包含着视图模板html。
<!DOCTYPE html> <html> <head> <title>JavaScript Mvc</title> <script src="https://www.jb51.net/jsMvc.js"></script> <!--[if lt IE 9]> <script src="https://www.jb51.net/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> <h3>Navigation Links</h3> <div> <a href="index.html#/home">Home</a> <a href="index.html#/contact">Contact</a> <a href="index.html#/admin">Admin</a> </div> <br /> <br /> <h3>View</h3> <div view></div> <script> jsMvc.AddRoute(HomeController, 'home', 'Views/home.html'); jsMvc.AddRoute(ContactController, 'contact', 'Views/contact.html'); jsMvc.AddRoute(AdminController, 'admin', 'Views/admin.html'); jsMvc.Initialize(); function HomeController(model) { model.Message = 'Hello World'; } function ContactController(model) { model.FirstName = "John"; model.LastName = "Doe"; model.Phone = '555-123456'; } function AdminController(model) { model.UserName = "John"; model.Password = "MyPassword"; } </script> </body> </html>
上面的代码有一段包含一个为IE的条件注释。
<!--[if lt IE 9]> <script src="https://www.jb51.net/jsMvc-ie8.js"></script> <![endif]-->