JavaScript MVC风格框架的超级简单实现

时间：2021-09-09 来源：互联网编辑：宝哥软件园浏览：次

介绍

使用过JavaScript框架的人(比如AngularJS、Backbone或者Ember)都很熟悉mvc在UI中的工作机制。这些框架实现了mvc，这使得在单个页面中根据需要更改视图变得更加容易。模型-视图-控制器(MVC)的核心概念是：用于处理传入请求的控制器、用于显示信息的视图以及用于表示业务规则和数据访问的模型。

因此，当我们需要创建这样一个需要在单个页面中切换出不同内容的应用程序时，我们通常会选择使用上述框架之一。然而，如果我们只需要一个框架来切换url中的视图，并且不需要额外的捆绑函数，我们就不需要使用像Angular和Ember这样复杂的框架。本文试图用简单有效的方法来解决同样的问题。

概念

应用程序中的代码使用URL中的“#”来实现MVC模式的导航。应用程序以默认url开始，基于哈希的代码加载应用程序视图并将对象模型应用于视图模板。

url格式如下所示：

http://域名/索引. html #/路由名

视图内容必须以{{Property-Name}}的方式绑定到对象模型的值和属性。代码将找到这种特殊的模板格式，并替换对象模型中的属性值。

ajax中异步加载的视图放在页面的占位符中。视图占位符可以是任何元素(理想情况下是div)，但它必须有一个特殊属性，代码根据这个特殊属性定位它，这也有助于代码的实现。当url改变时，场景会重复，并加载另一个视图。听起来很简单！下面的流程图解释了这个特定实现中的消息跳转。

写代码

我们从基本的模块设计模式开始，最后用外观设计模式在全球范围内公开了我们的libs。

；(函数(w，d，undefined){//restofthecode})(窗口，文档)；我们需要将视图元素存储在一个变量中，以便它们可以被多次使用。

var _ viewElement=null//elementthawlbeusettorendreview我们需要一个默认路由来处理url中没有路由信息的情况，这样就可以加载默认视图，而不是显示空白页。

var _ defaultRoute=null现在让我们创建主MVC对象的构造方法。我们将路由信息存储在“_routeMap”中

var jsMvc=function(){//这个路由的映射对象。_ Routemap={ }；}是时候创建路由对象了。我们将在这个对象中存储路由、模板和控制器的信息。

var routeObj=function (c，r，t){ this . controller=c；this . route=r；this . template=t；}每个url都将有一个特殊的路由对象routeObj。所有这些对象都将被添加到_routeMap对象中，这样我们以后就可以通过键值来获取它们。

为了给MVC libs添加路由信息，我们需要在libs中公开一个方法。因此，让我们创建一个方法，供各个控制器用来添加新的路由。

jsMvc.prototype.AddRoute=函数(控制器、路由、模板){ this。_routeMap[route]=new routeObj(控制器、路由、模板)；AddRoute方法接收三个参数：contoller、Route和template。它们是：

控制器：控制器的作用是访问特定的路由。

路线：路线的路线。这是url中#之后的部分。

Template:这是一个外部html文件，作为此路由的视图加载。现在，我们的libs需要一个切入点来解析url，并为相关的html模板页面提供服务。要做到这一点，我们需要一种方法。

初始化方法执行以下操作：

1)获取视图相关元素的初始化。代码需要具有视图属性的元素，该属性可用于在HTML页面中查找：

2)设置默认路线

3)验证视图元素是否合理

4)绑定窗口哈希变更事件，当全球资源定位器(统一资源定位符)不同哈希值发生变更时视图可以被及时更新

5)最后，启动手动音量调节

//初始化手动音量调节管理器对象以启动functioningjsmvc。原型。initialize=function(){ var startMvcDelegate=startmvc。绑定(这个)；//获取将用于呈现view _ viewElement=d . queryselector('[view]')的超文本标记语言元素；if(！_viewElement)返回；//如果找不到视图元素，什么也不做//设置默认路由_默认路由=这个._ route map[对象。GetownPropertyNames(这_ route map)[0]]；//启动手动音量调节管理器w . on hashchange=startMvCDelegate；startMvcDelegate()；}在上面的代码中，我们从startMvc方法中创建了一个代理方法startMvcDelegate。当哈希值变化时，这个代理都会被调用。下面就是当哈希值变化时我们做的操作的先后顺序：

1)获取哈希值

2)从哈希中获取路由值

3)从路由地图对象_routeMap中获取路由对象routeObj

4)如果全球资源定位器(统一资源定位符)中没有路由信息，需要获取缺省的路由对象

5)最后，调用跟这个路由有关的控制器并且为这个视图元素的视图提供服务

上面的所有步骤都被下面的startMvc方法所实现

//函数来启动MVC支持函数StartMVC(){ var page hash=w . location。哈希。替换(' # '，')，routeName=null，routeObj=nullroutiname=页面哈希。替换('/'，' ')；//从hash routeObj=this中获取路由的名称_路线图[路线名称]；//获取路由对象//如果找不到路由，则设置为默认路由对象如果(!routeObj)routeObj=_默认路由；loadTemplate(routeObj，_viewElement，页面哈希)；//获取并设置路线视图}下一步，我们需要使用XML HTTP请求异步加载合适的视图。为此，我们会传递路由对象的值和视图元素给方法loadTemplate。

//加载外部超文本标记语言数据函数的函数loadTemplate(routeObject，view){ var xmlhttp；如果(窗口XMLHttpRequest){//IE7，火狐、Chrome、Opera、Safari的代码xmlhttp=new XMlhttprequest()；} else {//IE6的代码，IE5 xmlhttp=新的ActiveX对象('微软.XMLHTTP’)；} xmlhttp。onreadystatechange=function(){ if(xmlhttp。readystate==4 xmlhttp。status==200){ LoadView(RouterObject，View，xmlhttp。response text)；} } xmlhttp.open('GET '，routeObject.template，true)；xmlhttp。send()；}当前只剩加载视图和将对象模型与视图模板绑定了。我们会创建一个空的模型对象，然后传递与方法相关的模型来唤醒路由控制器。更新后的模型对象会与先前已经加载的XHR调用中的超文本标记语言模板绑定。

loadView方法被用于调用控制器方法，以及准备模型对象。

replaceToken方法被用于与超文本标记语言模板一起绑定模型

//用模板函数loadView加载视图的函数(routeObject，viewElement，ViewHTML){ var model={ }；//从当前路由routeObject.controller(模型)的控制器获取结果模型；//用视图视图Html=替换标记(视图Html，模型)绑定模型；//将视图加载到视图元素viewElement。innerHTML=viewHTML}函数replaceToken(viewHtml，model){ var model props=object。getowntpropertynames(模型)，模型道具。foreach(函数(元素、索引、数组){ view html=view html。替换(' { ' element ' } } '，model[element])；});返回视图html}最后，我们将插件曝光于射流研究…全局范围外

//将手动音量调节对象附加到window w[' JSMVc ']=new JSMVc()；现在，是时候在我们单页应用中使用这个手动音量调节插件。在下一个代码段中，下面这些会实现：

1)在网页面中引入这个代码

2)用控制器添加路由信息和视图模板信息

3)创建控制器功能

4)最后，初始化lib。

除了上面我们需要的链接让我们导航到不同的路径外，一个容器元素的视图属性包含着视图模板html。

！DOCTYPE html html head title JAVAScript Mvc/title script src=' Http : JSMvc。js '/脚本！-[如果lt IE 9]脚本src=' http : jsmvc-ie8。js /脚本！[endif] -样式类型="文本/CSS ".NavLinkContainer { padding: 5px背景-颜色：浅黄色；} .nav link {底色：黑色；颜色：白色；字体粗细：800；文本装饰：无；padding:5px边界半径：4 px} .NavLink : Hover {背景色：灰色；}/style/head body h3Navigation link/H3 div class=' NavLink container ' a class=' NavLink ' href=' index。html #/home ' home/a class=' NavLink ' href=' index。html #/contact ' contact/a class=' NavLink ' href=' index。html #/admin ' admin/a/div br/br/h3View/H3 div view/div脚本jsMvc .添加路由(主控制器，“主”、“视图/主”)。html ')；jsMvc .添加路由(联系人控制器，“联系人”，“视图/联系人”。html ')；jsMvc .添加路由(AdminController，' admin '，' view/admin。html ')；jsMvc .初始化();函数HomeController(模型){模型.消息='你好世界；}函数ContactController(模型){模型.名字='约翰；模特。姓氏=' Doe模特。电话=' 555-123456 ';}函数AdminController(模型){模型.用户名='约翰；模特。密码="我的密码";}/脚本/正文/html上面的代码有一段包含一个为工业管理学(工业工程)的条件注释。

！-[如果lt IE 9]脚本src=' http : jsmvc-ie8。js /脚本！[endif] -如果工业管理学(工业工程)的版本低于9,那么函数。绑定，对象。获取属性名和Array.forEach属性将不会被支持。因此我们要通过判断浏览器是否低于IE9来反馈代码是否支持。

其中的内容有contact.htmlhome.html和admin.html请看下面：

home.html:

{ {消息} }

contact.html:

{ {名字} } { {姓氏} } br/{ }电话} }

admin.html:

div style=' padd :2 pxmargin 33602 px ' text-align : left；'标签为='txtUserName '用户名/标签输入类型='text' id='txtUserName '值=' { { UserName } } '//div div style=' padd :2 px；边距：2外文本-向左对齐：标签为='txtPassword '密码/标签输入类型='password' id='txtPassword '值=' { { Password } } '//div(9503 . 163.com)

完整的代码可以从给定的下载链接中得到。

如何运行代码

运行该代码比较简单，需要在你喜欢的网服务器上创建一个网应用，下面以（同移民检查员移民检查)为例来说明。

首先在默认站点中新增一个网应用。