JavaScript 面向对象 之 一个基于MVC的实现绝对非框架 [原创]

作者：Topcss QQ ：E-mail ：andpai1.0@gmail.com Time ：-03-08

 

刚刚在看JavaEye 新闻月刊- 2009 年月- 总第期时，看到了个居然有JS 基于MVC 实现的框架，由于不能上网( 文档是昨天下午下载的) ，于是决定自己动手写一个JavaScript-MVC 。

 

在这之前我们要先了解MVC 究竟是什么东东！

 

1.M(Model) 模型-- 这里用来保存对象

 

2.V(view) 视图-- 用来显示

 

3.C(controller) 控制-- 用来做核心的逻辑处理

 

我们来写个基于MVC 的计算器吧！

 

先在我们习惯的编辑器中写如下代码

 

 

< html >

< head >

< title > JavaScript 面向对象 之 一个基于MVC 的实现</ title >

< script language ="javascript" type ="text/javascript">

</ script >

</ head >

< body >

</ body >

</ html >

下面我们开始在script 标签内编码：

 

第一步，我们创建一个实体对象( 它属于model 模型层范畴)

var Count = function (){

this .a = 0;

this .b = 0;

}

 

 

第二步，我们创建一个处理类( 它属于controller 控制层范畴)

 

 var Controller = function (){

this .add = function (Count){

return Count.a + Count.b;

};

this .minus = function (Count){

return Count.a - Count.b;

};

this .multiply = function (Count){

return Count.a * Count.b;

};

this .divide = function (Count){

return Count.b == 0 ? 0 : Count.a / Count.b;

}

}

第三步，调用计算的方法( 它属于view 视图层范畴)

var num = new Count();// 得到表单运算的实体

 

num.a = 150;// 当然，这里的值我们可以通过表单输入得到

 

num.b = 20;

 

var con = new Controller();// 得到控制层计算方法的实例

 

var result = con.minus(num);// 调用减法运算，参数为表单实体

 

alert(result);// 打印程序运行结果

不得不承认，在语法上面的确沿用过去我们熟悉的老写法。但从思想的层面上讲，却有了较高的提升。很明显，这么写的好处和JAVA 或者其它语言一样，把代码模块化，让代码结构更清晰，让别人也能轻松的读懂你的代码。

 

JavaScript 由刚开始在我们的项目中出现一些零星的验证到Ajax 应用，现在她已经成为我们在Web 应用程序中必不可缺的语言了。

 

这些年也出了不少不错的JS 框架。我们也都很期待更多的JS 框架的出现。因为，它不仅意味着JS 的重要性，而且会让我们在以后的开发中更加简单的应用JS 技术。

 

不过，话又说回来。这些模式或者框架的出现，也说明JS 的本身也存在着先天的不足。

 

最大的缺憾就是，目前它只能应用于Web 开发，和一些简单桌面开发，而且都需要得到其它应用程序的支持。

 

再者，对于不同的程序( 如: 不同浏览器，就算主流的浏览器[Firefox || IE || All] 也一样) 解析也会不尽相同。这会大大影响我们的开发进度。你可能会想到框架。嗯，不错，一些框架已经帮我们做了部分兼容，但试问，在你的开发中又真正的用到到多少JS 框架技术呢？对于一些普通的学习者来说，他们更不想依赖于框架。

 

众所周知，JS 调试也是一个大问题。目前常用的一些调试工具( 如DeBug) 也不能做到，在我们程序达到一定的量( 如：上千行) 后还能正确的指出错在那里。不易调试的确一个大问题啊！

 

框架的出现，为我们的设计带来了方便，调试工具的出现让我们的调试跟轻松。

 

在这里，我希望大家都来积极参与JS 的学习，讨论和设计中来，并提出一些独创性的观点。让我们的JS 之路越走越远，越走越稳！

 

希望大家跟帖讨论，如你的看法和思路，或者对上面提到的这个模式的评价，或者她对你的启发，或者其它。

 

大家踊跃讨论，跟贴无罪！