现在javascript是越来越火了，好多javascript框架随之产生，大大简化了我们的开发，一般的开发模式大家是比较喜欢MVC 的model controller view 这种模式

方便了我们的业务逻辑是数据显示，数据模型的分离，提高了系统的可维护性，经常看到一些服务器端的MVC 框架，今天就Web 端使用javascript设计MVC 进行

一些尝试，需要的知识：

1. javascript OOP 编程（简单的）

2. javascript 动态生成对象（这次使用eval）

3. window.location.hash(获取用户的请求（基于事件的机制）)

基本的原理还是比较简单的，具体如下：

就是使用window.location.hash 获取用户的请求一般的格式给#******

后面就是用户对应的请求比较方便的是当这个改变的时候是基于事件的，这样我们就可以方式的解析请求，并动态生成对应的请求对象（包括业务逻辑）

为了捕捉改变在body 中添加以下事件：

<body onhashchange="func()">

//window.onhashchange = func;  这是另外一种注册方式
//window.addEventListener("hashchange", func, false);这是同样也是另外一种注册方式
function func()
{
var hasn=window.location.hash;
var controllername=hasn.substr(1);
var obstring="new "+controllername+"("+'"dalong"'+","+'"login"'+")";
try {
var createob=eval(obstring);
}
catch(e)
{
alert(e);
return null;
}
alert(createob.print());
}

对应的模型代码如下：

function appcontrol(controller,action)
{
this.controller=controller;
this.action=action;
}
appcontrol.prototype.print=function()
{
alert(this.action);
}

比较简单是基于构造函数与原型的方式进行的。

这样当用户的请求时*******index.html#appcontrol时我们就知道了我们的请求时那个controller 从而动态的创建请求的controller

这里我使用的是eval 的方式，同时是进行测试所以设计的比较简单。

以上设计中我们使用了window.location.hash 的事件机制作为MVC 的router 进行用户请求的处理，从而达到请求的转发处理。

以上只是进行简单的原理分析与简单的测试，设计较好运行的MVC 框架还是需要考虑很多东西的，比如上面的设计中使用window.location.hash

就会有性能上的问题。同时对于请求的转发，视图模型的显示，也是需要进行深入的考虑。

web 纯 javascript 的MVC 实现的简单实践的更多相关文章

  1. Node.js: What is the best "full stack web framework" (with scaffolding, MVC, ORM, etc.) based on Node.js / server-side JavaScript? - Quora

    Node.js: What is the best "full stack web framework" (with scaffolding, MVC, ORM, etc.) ba ...

  2. JavaScript客户端MVC 框架综述

    简介 15 年前,许多人都使用 Perl 和 ColdFusion 之类的工具构建网站.我们经常编写可以在页面顶部查询数据库的脚本,对数据应用必要的转换,以及在同一个脚本底部显示数据.这类架构适合于向 ...

  3. 2015年10个最佳Web开发JavaScript库

    2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...

  4. Web纯前端“旭日图”实现元素周期表

    一.什么是旭日图 旭日图是在Excel 2016中新增的一种图表.有些类似饼图,饼图的优势是可以显示占比.但是饼图只能显示单级数据.旭日图用来表示多层级数据的占比.旭日图以一种分层方式显示,非常适合用 ...

  5. 使用TT模板+mvc+wcf实现简单查询

    今天是除夕,小编的这篇博客是掐着点儿发的,在此,祝各位小伙伴新年快乐,身体健康,万事如意:喜从天降,欣喜若狂:喜气盈门,好事成双:好人好运,金玉满堂:神采飞扬,如愿以偿,财源滚滚来,福如东海长:伴随着 ...

  6. Web开发——JavaScript基础

    参考学习: MDN JavaScript:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ECMAScript 6入门(阮一峰):htt ...

  7. Web Worker javascript多线程编程（一）

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  8. Web Worker javascript多线程编程（二）

    Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...

  9. MVC其实很简单(Django框架)

    Django框架MVC其实很简单 让我们来研究一个简单的例子,通过该实例,你可以分辨出,通过Web框架来实现的功能与之前的方式有何不同. 下面就是通过使用Django来完成以上功能的例子: 首先,我们 ...

随机推荐

  1. Java开发常用Util工具类-StringUtil、CastUtil、CollectionUtil、ArrayUtil、PropsUtil

    字符串工具类 StringUtil.java package com.***.util; /** * StringUtil * @description: 字符串工具类 **/ public clas ...

  2. IDEA设置类、方法注释模板

    类注释模板 File -> Other Setting -> Default Setting打开默认设置 Editor -> File and Code Templates -> ...

  3. OAF点击事件对页面组件的Required属性不验证

    在实际的需求中,OAF页面上很多字段设置了Required=YES,但是我们在点击某些按钮的时候,并不希望浏览器对其进行验证,可以通过设置 Disable Server Side Validation ...

  4. BZOJ3544 [ONTAK2010]Creative Accounting

    看不懂题,就不能写的稍微像人话点吗我去... 题目就是要找一段区间使得Σai mod m的值最大. 于是嘛...前缀和一下再贪心就好了. 先求出前i个数的前缀和s,然后用s更新解. 还有可能就是前面的 ...

  5. Flash Player离线安装包下载指南

    在机房里装软件,没网是正常现象,有些老师要装Firefox/Chrome浏览器要有Flash,网上搜来搜去都是在线安装包一日在V2EX闲逛时发现了一位大神给出了Flash的离线安装包下载方式,在此立个 ...

  6. LA3905

    题意: 给出n颗流星,第i颗在第T秒时飞到(xi+ai*t,yi+bi*t),给出一个矩形,问在某一时刻这个矩形中的流星数目最多有多少 题解: 首先计算出每一颗流星经过时间 然后左端点移动,计算出少了 ...

  7. 51nod1837

    题解: 数论,经过一些大佬的证明,只有1和2这两种可能性 然后再分开来判断即可 注意1的时候为0 代码: #include<bits/stdc++.h> using namespace s ...

  8. Flask初级（一）创建及运行flash

    和前面的django差不多,选个类型,定义个目录. 选个模板解释器,定义一个模板文件夹名称. Create就创建成功了. 运行一下.会显示 Hello World! 最好给它换个运行环境,建个虚拟环境 ...

  9. xitong

    回复 YAJE3 :http://msdn.anjieart.net/和http://msdn.ez58.net/files/windows%20vista同样是MSDN网站 msdnitellyou ...

  10. WIN-8“内置管理员无法激活此应用”问题

    解决办法:在运行中输入:“gpedit.msc”,就会启动组策略编辑器,依次展开“计算机配置”里面的“Windows设置”,然后是“安全设置”,再就是“本地策略”里面的“安全选项”,在右边查找一项策略 ...