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
就会有性能上的问题。同时对于请求的转发，视图模型的显示，也是需要进行深入的考虑。
web 纯 javascript 的MVC 实现的简单实践的更多相关文章
- 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 ...
- JavaScript客户端MVC 框架综述
简介 15 年前,许多人都使用 Perl 和 ColdFusion 之类的工具构建网站.我们经常编写可以在页面顶部查询数据库的脚本,对数据应用必要的转换,以及在同一个脚本底部显示数据.这类架构适合于向 ...
- 2015年10个最佳Web开发JavaScript库
2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...
- Web纯前端“旭日图”实现元素周期表
一.什么是旭日图 旭日图是在Excel 2016中新增的一种图表.有些类似饼图,饼图的优势是可以显示占比.但是饼图只能显示单级数据.旭日图用来表示多层级数据的占比.旭日图以一种分层方式显示,非常适合用 ...
- 使用TT模板+mvc+wcf实现简单查询
今天是除夕,小编的这篇博客是掐着点儿发的,在此,祝各位小伙伴新年快乐,身体健康,万事如意:喜从天降,欣喜若狂:喜气盈门,好事成双:好人好运,金玉满堂:神采飞扬,如愿以偿,财源滚滚来,福如东海长:伴随着 ...
- Web开发——JavaScript基础
参考学习: MDN JavaScript:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ECMAScript 6入门(阮一峰):htt ...
- Web Worker javascript多线程编程（一）
什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...
- Web Worker javascript多线程编程（二）
Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...
- MVC其实很简单(Django框架)
Django框架MVC其实很简单 让我们来研究一个简单的例子,通过该实例,你可以分辨出,通过Web框架来实现的功能与之前的方式有何不同. 下面就是通过使用Django来完成以上功能的例子: 首先,我们 ...
随机推荐
- Confluence 6 配置 LDAP 连接池
当 LDAP 连接池被启用后,LDAP 目录服务器将会维护一个连接池同时当必要的时候指派他们.当一个连接关闭后,这个连接将会放回到连接池中供以后进行使用.这种设置将会有效的提高系统性能. 希望配置 L ...
- Hadoop生产环境搭建（含HA、Federation）
Hadoop生产环境搭建 1. 将安装包hadoop-2.x.x.tar.gz存放到某一目录下,并解压. 2. 修改解压后的目录中的文件夹etc/hadoop下的配置文件(若文件不存在,自己创建.) ...
- python-day52--前端html、css
一.html需掌握的: 1. img标签 属性:src alt title width height 2. a标签 属性:href target 3. ul 标签及li 标签,二者都是块级标签 ul ...
- ZOJ-3329 One Person Game （有环期望问题）
题目大意:有3个骰子,各有k1,k2,k3个面,面值为1~ki.还有一个计数器,初始值为0,统计所有的面值和.每次同时置这三个骰子,如果第一个骰子的朝上的值为a.第二个值为b.第三个值为c,那么将计数 ...
- 用 Spark 为 Elasticsearch 导入搜索数据
越来越健忘了,得记录下自己的操作才行! ES和spark版本: spark-1.6.0-bin-hadoop2.6 Elasticsearch for Apache Hadoop 2.1.2 如果是其 ...
- 文件属性，获取，设置文件属性chown stat函数
转载:http://c.biancheng.net/cpp/html/326.html man 2 stat查看手册 int stat(const char *path, struct stat *b ...
- spring boot 学习(八)定时任务 @Scheduled
SpringBoot 定时任务 @Scheduled 前言 有时候,我们有这样的需求,需要在每天的某个固定时间或者每隔一段时间让应用去执行某一个任务.一般情况下,可以使用多线程来实现这个功能:在 Sp ...
- 桥接、nat、host-only
- Ionic实现自定义返回按键事件
在 Android 和 Window 平台下,有时候我们需要监听返回按键的事件来进行相应的操作,也就是自定义返回按键事件.下面根据一个例子来讲解如何在 ionic 中自定义返回按键事件. 功能需求 首 ...
- scrapy-redis(七)：部署scrapy
一般我们写好scrapy爬虫,如果需要启动的话,需要进入scrapy项目的根目录,然后运行以下命令: scrapy crawl {spidername} 这样我们就可以在终端查看到爬虫信息了.但爬虫运 ...