您的位置：首页 > Web前端 > JavaScript

web 纯 javascript 的MVC 实现的简单实践

2014-03-20 10:32 309 查看

现在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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航