100 行代码实现的 JavaScript MVC 样式框架

缺乏、安全感 2022-08-07 09:58 88阅读 0赞

使用过 JavaScript框架（如 AngularJS, Backbone 或者Ember）的人都很熟悉在UI（用户界面，前端）中mvc的工作机理。这些框架实现了MVC，使得在一个单页面中实现根据需要变化视图时更加轻松，而模型-视图-控制器（mvc）的核心概念就是：处理传入请求的控制器、显示信息的视图、表示业务规则和数据访问的模型。  
  
  
　　因此，当需要创建这样一个需要在单个页面中实现切换出不同内容的[应用][Link 1]时，我们通常选择使用上述框架之一。但是,如果我们仅仅需要一个在一个url中实现视图切换的框架,而不需要额外捆绑的功能的话，就不必使用象Angular和Ember等复杂的框架。本文就是尝试使用简单、有效方法来解决同样的问题。  
  
  
　概念  
  
  
　　应用中的代码利用urls中的“\#”实现MVC模式的导航。应用以一个缺省的url开始，基于哈希值的代码加载应用视图并且将对象-模型应用于视图模板。  
  
  
　　url格式像下面这样：  
  
  
　　http://Domain Name/index.html\#/Route Name  
  
  
　　视图内容必须以\{ \{Property-Name\}\}的方式绑定对象模型的值和属性。代码会查找这个专门的模板格式并且代替对象模型中的属性值。  
  
  
　　以ajax的方式异步加载的视图会被放置于页面的占位符中。视图占位符可以是任何的元素（理想的情况是div），但是它必须有一个专门的属性，代码根据这个专门的属性来定位它，这样同样有助于代码的实现。当url改变时，会重复这个场景，另外一个视图被加载。听起来很简单吧！下面的流程图解释了在这个特定的实现中的消息跳转。  
  
  
　写代码  
  
  
　　我们以基本的模块设计模式开始，并且最终用门面设计模式的方式将我们的libs曝光于全局范围内。

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

复制代码

我们需要将视图元素存储到一个变量中，这样就可以多次使用。

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

复制代码

我们需要一个缺省的路由来应对url中没有路由信息的情况，这样就缺省的视图就可以被加载而不是展示空白页面。

1.  var \_defaultRoute = null;

复制代码

现在我们来创建我们的主要MVC对象的构造方法。我们会把路由信息存储在“\_routeMap”中

1.  var jsMvc = function () \{  
    
2.      //mapping object for the routes  
    
3.      this.\_routeMap = \{\};  
    
4.  \}

复制代码

是时候创建路由对象了，我们会将路由、模板、控制器的信息存储在这个对象中。

1.  var routeObj = function (c, r, t) \{  
    
2.      this.controller = c;  
    
3.      this.route = r;  
    
4.      this.template = t;  
    
5.  \}

复制代码

每一个url会有一个专门的路由对象routeObj.所有的这些对象都会被添加到\_routeMap对象中，这样我们后续就可以通过key-value的方式获取它们。  
  
  
　　为了添加路由信息到MVC libs中，我们需要曝光libs中的一个方法。所以让我们创建一个方法，这个方法可以被各自的控制器用来添加新路由。

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

复制代码

方法AddRoute接收3个参数：控制器，路由和模板( contoller, route and template)。他们分别是：  
  
  
　　controller:控制器的作用就是访问特定的路线。  
  
  
　　route:路由的路线。这个就是url中\#后面的部分。  
  
  
　　template:这是外部的html文件，它作为这个路由的视图被加载。现在我们的libs需要一个切入点来解析url，并且为相关联的html模板页面提供服务。为了完成这个，我们需要一个方法。  
  
  
　　Initialize方法做如下的事情：  
  
  
　　1）获取视图相关的元素的初始化。代码需要一个具有view属性的元素，这样可以被用来在HTML页面中查找：  
  
  
　　2）设置缺省的路由  
  
  
　　3）验证视图元素是否合理  
  
  
　　4）绑定窗口哈希变更事件，当url不同哈希值发生变更时视图可以被及时更新  
  
  
　　5）最后，启动mvc

1.  //Initialize the Mvc manager object to start functioning  
    
2.  jsMvc.prototype.Initialize = function () \{  
    
3.      var startMvcDelegate = startMvc.bind(this);  
    
4.    
    
5.      //get the html element that will be used to render the view    
    
6.      \_viewElement = d.querySelector('\[view\]');          
    
7.      if (!\_viewElement) return; //do nothing if view element is not found      
    
8.    
    
9.      //Set the default route  
    
10.     \_defaultRoute = this.\_routeMap\[Object.getOwnPropertyNames(this.\_routeMap)\[0\]\];      
    
11.   
    
12.     //start the Mvc manager  
    
13.     w.onhashchange = startMvcDelegate;  
    
14.     startMvcDelegate();  
    
15. \}

复制代码

在上面的代码中，我们从startMvc 方法中创建了一个代理方法startMvcDelegate 。当哈希值变化时，这个代理都会被调用。下面就是当哈希值变化时我们做的操作的先后顺序：  
  
  
　　1）获取哈希值  
  
  
　　2）从哈希中获取路由值  
  
  
　　3）从路由map对象\_routeMap中获取路由对象routeObj   
  
  
　　4）如果url中没有路由信息，需要获取缺省的路由对象  
  
  
　　5）最后，调用跟这个路由有关的控制器并且为这个视图元素的视图提供服务  
  
  
　　上面的所有步骤都被下面的startMvc方法所实现

1.  //function to start the mvc support  
    
2.  function startMvc() \{  
    
3.      var pageHash = w.location.hash.replace('\#', ''),  
    
4.          routeName = null,  
    
5.          routeObj = null;                  
    
6.            
    
7.      routeName = pageHash.replace('/', ''); //get the name of the route from the hash          
    
8.      routeObj = this.\_routeMap\[routeName\]; //get the route object      
    
9.    
    
10.     //Set to default route object if no route found  
    
11.     if (!routeObj)  
    
12.         routeObj = \_defaultRoute;  
    
13.       
    
14.     loadTemplate(routeObj, \_viewElement, pageHash); //fetch and set the view of the route  
    
15. \}

复制代码

下一步，我们需要使用XML HTTP请求异步加载合适的视图。为此，我们会传递路由对象的值和视图元素给方法loadTemplate。

1.  //Function to load external html data  
    
2.  function loadTemplate(routeObject, view) \{  
    
3.      var xmlhttp;  
    
4.      if (window.XMLHttpRequest) \{  
    
5.          // code for IE7+, Firefox, Chrome, Opera, Safari  
    
6.          xmlhttp = new XMLHttpRequest();  
    
7.      \}  
    
8.      else \{  
    
9.          // code for IE6, IE5  
    
10.         xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');  
    
11.     \}  
    
12.     xmlhttp.onreadystatechange = function () \{  
    
13.         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) \{  
    
14.             loadView(routeObject, view, xmlhttp.responseText);  
    
15.         \}  
    
16.     \}  
    
17.     xmlhttp.open('GET', routeObject.template, true);  
    
18.     xmlhttp.send();  
    
19. \}

复制代码

当前只剩加载视图和将对象模型与视图模板绑定了。我们会创建一个空的模型对象，然后传递与方法相关的模型来唤醒路由控制器。更新后的模型对象会与先前已经加载的XHR调用中的HTML模板绑定。  
  
  
　　loadView 方法被用于调用控制器方法，以及准备模型对象。  
  
  
　　replaceToken方法被用于与HTML模板一起绑定模型

1.  //Function to load the view with the template  
    
2.  function loadView(routeObject, viewElement, viewHtml) \{  
    
3.      var model = \{\};   
    
4.    
    
5.      //get the resultant model from the controller of the current route    
    
6.      routeObject.controller(model);   
    
7.    
    
8.      //bind the model with the view      
    
9.      viewHtml = replaceToken(viewHtml, model);   
    
10.       
    
11.     //load the view into the view element  
    
12.     viewElement.innerHTML = viewHtml;   
    
13. \}  
    
14.   
    
15. function replaceToken(viewHtml, model) \{  
    
16.     var modelProps = Object.getOwnPropertyNames(model),  
    
17.           
    
18.     modelProps.forEach(function (element, index, array) \{  
    
19.         viewHtml = viewHtml.replace('\{ \{' + element + '\}\}', model\[element\]);  
    
20.     \});  
    
21.     return viewHtml;  
    
22. \}

复制代码

最后，我们将插件曝光于js全局范围外

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

复制代码

现在，是时候在我们单页应用中使用这个MVC插件。在下一个代码段中，下面这些会实现:  
  
  
　　1)在web页面中引入这个代码  
  
  
　　2）用控制器添加路由信息和视图模板信息  
  
  
　　3）创建控制器功能  
  
  
　　4）最后，初始化lib。  
  
  
　　除了上面我们需要的链接让我们导航到不同的路径外，一个容器元素的视图属性包含着视图模板html。

1.  <!DOCTYPE html>  
    
2.  <html>  
    
3.  <head>  
    
4.      <title>JavaScript Mvc</title>  
    
5.      <script src="jsMvc.js"></script>  
    
6.        
    
7.        
    
8.      <style type="text/css">  
    
9.          .NavLinkContainer \{  
    
10.             padding: 5px;  
    
11.             background-color: lightyellow;  
    
12.         \}  
    
13.   
    
14.         .NavLink \{  
    
15.             background-color:black;  
    
16.             color: white;  
    
17.             font-weight:800;  
    
18.             text-decoration:none;  
    
19.             padding:5px;  
    
20.             border-radius:4px;  
    
21.         \}  
    
22.             .NavLink:hover \{  
    
23.                 background-color:gray;  
    
24.             \}  
    
25.     </style>  
    
26. </head>  
    
27. <body>  
    
28.     <h3>Navigation Links</h3>  
    
29.     <div class="NavLinkContainer">  
    
30.         <a class="NavLink" href="index.html\#/home">Home</a>   
    
31.      
    
32.         <a class="NavLink" href="index.html\#/contact">Contact</a>   
    
33.   
    
34.         <a class="NavLink" href="index.html\#/admin">Admin</a>   
    
35.          
    
36.     </div>  
    
37.     <br />  
    
38.     <br />  
    
39.     <h3>View</h3>  
    
40.     <div view></div>  
    
41.     <script>  
    
42.         jsMvc.AddRoute(HomeController, 'home', 'Views/home.html');  
    
43.         jsMvc.AddRoute(ContactController, 'contact', 'Views/contact.html');  
    
44.         jsMvc.AddRoute(AdminController, 'admin', 'Views/admin.html');  
    
45.         jsMvc.Initialize();  
    
46.   
    
47.         function HomeController(model) \{  
    
48.             model.Message = 'Hello World';  
    
49.         \}  
    
50.   
    
51.         function ContactController(model) \{  
    
52.             model.FirstName = "John";  
    
53.             model.LastName = "Doe";  
    
54.             model.Phone = '555-123456';  
    
55.         \}  
    
56.   
    
57.         function AdminController(model) \{  
    
58.             model.UserName = "John";  
    
59.             model.Password = "MyPassword";  
    
60.         \}  
    
61.     </script>  
    
62. </body>  
    
63. </html>

复制代码

上面的代码有一段包含一个为IE的条件注释。

1.

复制代码

如果IE的版本低于9，那么function.bind，Object.getOwnPropertyNames和Array.forEach属性将不会被支持。因此我们要通过判断浏览器是否低于IE9来反馈代码是否支持。  
  
  
　　其中的内容有home.html， contact.html 和 admin.html 请看下面：  
  
  
　　home.html:

1.  \{ \{Message\}\}

复制代码

contact.html:

1.  \{ \{FirstName\}\} \{ \{LastName\}\}  
    
2.  <br />  
    
3.  \{ \{Phone\}\}

复制代码

admin.html:

1.  <div style="padding:2px;margin:2px;text-align:left;">  
    
2.      <label for="txtUserName">User Name</label>  
    
3.      <input type="text" id="txtUserName" value="\{ \{UserName\}\}" />  
    
4.  </div>  
    
5.  <div style="padding:2px;margin:2px;text-align:left;">  
    
6.      <label for="txtPassword">Password</label>  
    
7.      <input type="password" id="txtPassword" value="\{ \{Password\}\}" />  
    
8.  </div>

复制代码

完整的代码可以从给定的下载链接中得到。  
  
  
　如何运行代码  
  
  
　　运行该代码比较简单，需要在你喜欢的Web服务器上创建一个Web应用，下面以IIS为例来说明。  
  
  
　　首先在默认站点中新增一个Web应用.  
  
  
　　然后设置必填信息：别名，物理路径，应用池，用户认证信息，点击OK。  
  
  
　　最后定位到Web应用的内容目录，浏览你想打开的HTML页面即可。  
  
  
　　跑在服务器里是必要的，因为代码加载从存储于外部文件中的视图，浏览器不会允许我们的代码在非宿主服务器环境下执行。当然如果你使用Visual Studio那么直接在目标html文件上右键，选择‘View In Browser’即可。  
  
  
　浏览器支持  
  
  
　　大部分的现代浏览器都支持本代码。针对IE8及以下的浏览器，有一份单独的代码来支持，但很不幸，这份代码远多于100行。因此这代码不是百分百跨浏览器兼容的，所以当你决定在项目中使用时需要对代码进行微调。  
  
  
　兴趣点  
  
  
　　This example demonstrates这个示例向我们展示了对于非常明确地需求来说，真没必要全部使用js库和框架来实现。Web应用是资源密集型的，最好只使用必要的代码而丢掉其他多余部分。  
  
  
　　目前的代码能做的就这些了。没有诸如Web服务调用，动态事件绑定功能的。很快我会提供支持更多特性的升级版本。

*  [Download JavaScript-Mvc.zip – 4.6 KB][Download JavaScript-Mvc.zip _ 4.6 KB]
 *  [JavaScript Mvc on Github][]
 *  [Live Demo][]

原文地址：[http://www.banghui.org/14292.html][http_www.banghui.org_14292.html]

[Link 1]: http://www.html5cn.org/portal.php?mod=list&catid=20
[Download JavaScript-Mvc.zip _ 4.6 KB]: http://www.banghui.org/go?url=aHR0cCUzQSUyRiUyRnd3dy5jb2RlcHJvamVjdC5jb20lMkZLQiUyRnNjcmlwdGluZyUyRjg2OTQ4OCUyRkphdmFTY3JpcHQtTXZjLnppcA==
[JavaScript Mvc on Github]: http://www.banghui.org/go?url=aHR0cHMlM0ElMkYlMkZnaXRodWIuY29tJTJGTml0aWolMkZKc012YyUyRnRyZWUlMkZtYXN0ZXIlMkZCYXNpYyUyNTIwVmVyc2lvbg==
[Live Demo]: http://www.banghui.org/go?url=aHR0cCUzQSUyRiUyRm5pdGlqLmdpdGh1Yi5pbyUyRkpzTXZjJTJGaW5kZXguaHRtbCUyMyUyRmhvbWU=
[http_www.banghui.org_14292.html]: http://www.banghui.org/14292.html