超级简单实现JavaScript MVC 样式框架


Posted in Javascript onMarch 24, 2015

 介绍

使用过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改变时,会重复这个场景,另外一个视图被加载。听起来很简单吧!下面的流程图解释了在这个特定的实现中的消息跳转。

超级简单实现JavaScript MVC 样式框架

 写代码

我们以基本的模块设计模式开始,并且最终用门面设计模式的方式将我们的libs曝光于全局范围内。

;(function(w,d,undefined){//restofthecode})(window,document);

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

var_viewElement=null;//elementthatwillbeusedtorendertheview

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

var_defaultRoute=null;

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

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

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

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

每一个url会有一个专门的路由对象routeObj.所有的这些对象都会被添加到_routeMap对象中,这样我们后续就可以通过key-value的方式获取它们。

为了添加路由信息到MVC libs中,我们需要曝光libs中的一个方法。所以让我们创建一个方法,这个方法可以被各自的控制器用来添加新路由。

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

方法AddRoute接收3个参数:控制器,路由和模板(contoller, route and template)。他们分别是:

controller:控制器的作用就是访问特定的路线。

route:路由的路线。这个就是url中#后面的部分。

template:这是外部的html文件,它作为这个路由的视图被加载。现在我们的libs需要一个切入点来解析url,并且为相关联的html模板页面提供服务。为了完成这个,我们需要一个方法。

Initialize方法做如下的事情:

1)获取视图相关的元素的初始化。代码需要一个具有view属性的元素,这样可以被用来在HTML页面中查找:

2)设置缺省的路由

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

4)绑定窗口哈希变更事件,当url不同哈希值发生变更时视图可以被及时更新

5)最后,启动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方法中创建了一个代理方法startMvcDelegate。当哈希值变化时,这个代理都会被调用。下面就是当哈希值变化时我们做的操作的先后顺序:

1)获取哈希值

2)从哈希中获取路由值

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

4)如果url中没有路由信息,需要获取缺省的路由对象

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

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

//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="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>
  <h3>Navigation Links</h3>
  <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 />
  <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="jsMvc-ie8.js"></script> <![endif]-->

如果IE的版本低于9,那么function.bind,Object.getOwnPropertyNames和Array.forEach属性将不会被支持。因此我们要通过判断浏览器是否低于IE9来反馈代码是否支持。

其中的内容有home.html, contact.html 和 admin.html 请看下面:

home.html:

{{Message}}

超级简单实现JavaScript MVC 样式框架

contact.html:

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

超级简单实现JavaScript MVC 样式框架

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>

超级简单实现JavaScript MVC 样式框架

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

 如何运行代码

运行该代码比较简单,需要在你喜欢的Web服务器上创建一个Web应用,下面以IIS为例来说明。

首先在默认站点中新增一个Web应用.

超级简单实现JavaScript MVC 样式框架

然后设置必填信息:别名,物理路径,应用池,用户认证信息,点击OK。

超级简单实现JavaScript MVC 样式框架

最后定位到Web应用的内容目录,浏览你想打开的HTML页面即可。

超级简单实现JavaScript MVC 样式框架

跑在服务器里是必要的,因为代码加载从存储于外部文件中的视图,浏览器不会允许我们的代码在非宿主服务器环境下执行。当然如果你使用Visual Studio那么直接在目标html文件上右键,选择‘View In Browser'即可。

 浏览器支持

大部分的现代浏览器都支持本代码。针对IE8及以下的浏览器,有一份单独的代码来支持,但很不幸,这份代码远多于100行。因此这代码不是百分百跨浏览器兼容的,所以当你决定在项目中使用时需要对代码进行微调。

 兴趣点

This example demonstrates这个示例向我们展示了对于非常明确地需求来说,真没必要全部使用js库和框架来实现。Web应用是资源密集型的,最好只使用必要的代码而丢掉其他多余部分。

目前的代码能做的就这些了。没有诸如Web服务调用,动态事件绑定功能的。很快我会提供支持更多特性的升级版本。

  • Download JavaScript-Mvc.zip - 4.6 KB

  • JavaScript Mvc on Github

  • Live Demo

    原文地址:http://www.codeproject.com/Articles/869488/JavaScript-MVC-Style-Framework-in-Less-Than-Lines

以上所述就是本文的全部内容了,希望能对大家熟练掌握javascript有所帮助。

Javascript 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
用javascript获取textarea中的光标位置
May 06 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
JavaScript实现显示和隐藏图片
Apr 29 Javascript
vue3获取当前路由地址
Feb 18 Vue.js
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 #Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 #Javascript
JavaScript实现找质数代码分享
Mar 24 #Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 #Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 #Javascript
JSONP之我见
Mar 24 #Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 #Javascript
You might like
php网页后退不再出现过期
2007/03/08 PHP
介绍一些PHP判断变量的函数
2012/04/24 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
动态控制Table的js代码
2007/03/07 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
bootstrap table实现合并单元格效果
2018/12/24 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
详解Python的Django框架中的通用视图
2015/05/04 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
银行竞聘报告范文
2014/11/06 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
自主招生英文自荐信
2015/03/25 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python