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

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

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

 

posted on   荣锋亮  阅读(337)  评论(0编辑  收藏  举报

编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示