`

javascript中MVC模式开发

    博客分类:
  • AJAX
阅读更多

        MVC这个概念本不首先在软件工程这个领域提出,不过他在软件工程领域却发展壮大,JAVA WEB开发中比较流行的就是MVC开发框架,比如实现MVC框架比较好的STRUTS、WEBWORK等,还有SPRING中的MVC。

 这里我想说点关于JAVASCRIPT中MVC模式的应用,当然也许你已经很早就在使用了,只是没这个概念的东西罢了。

在有JS(以下都把javascript简称为js)参与的网页开发中,当然现在的许多应用几乎所有都包含js,我们也可以实现分层的思想来开发我们的网页应用部分。

首先来分析下有js参与的网页应用中MVC的角色。

这里M表示模型可以说就是网页中的HTML元素。

这里V表示视图可以说是网页中元素的显示模式,当然这个样式我们可以用CSS来控制。

这里C表示的控制逻辑可以说是网页中元素的响应。

其实用户在打开一个网站的时候最先关注的是网站的全貌,之后才是关注网站的功能,当你看清楚了整个网站你才可能开始关注他所提供的功能,而这个全貌我们仅用M就可以单独的显示出来,当然出于效果的美观我们可以考虑M+V。之后用户才实际考虑功能性,比如交互方面,这里才用到了C,偶尔可能会用到V。分析完了这个过程,那么我说下关于js的MVC开发。

我见过很多大的网站的页面3个方面的内容全部包含在一个网页中,不能说这样不好,至少很多的网站都是这样,我有个建议:

比如说你的页面中只包含HTML元素,至于事件处理,显示样式都不要包含在页面中。这样看你的源代码仅仅是单独的HTML页面,没有其他杂项,如果修改我想也很容易。那么事件处理和显示样式当然就是要分别包含在一个js文件中了,当然大家都想得到,显示样式用一个CSS文件来完成,这样你在改网站的显示样式只需要改一个CSS文件就可以了,好了在说下事件处理程序的关联,前面我说到过用户首先关心的是显示全貌其次是功能的交互,所以事件完全可以在页面全部加载完了再关联,因此好的事件关联应该是用WINDOW.onload来定义的。这样三个层次划分的很明确,如果你要修改任何一个层次都可以在单独的文件中,不需要在复杂的页面完成三份工作了。

举个例子,你的样式文件为test.css          你的事件处理文件为test.js          页面为test.html

xml 代码
  1. test.html   
  2. <html>  
  3. <head>  
  4. <script src="test.js" type="text/javascript"></script>  
  5. <link href="test.css"  rel="Stylesheet" type="text/css" />  
  6. </head>  
  7. <body>  
  8. <form>  
  9. <input type="button" id="button" name="test" value="test">  
  10. 测试<input id="filed" name="field" calue="default">  
  11. </form>  
  12. </body>  
  13. </html>  
  14.   
  15. test.js   
  16. window.onload=function()   
  17. {   
  18. document.getElementById("button").onclick=function()   
  19. {   
  20. alert(this.value);   
  21. }   
  22. document.getElementById("field").onblue=function()   
  23. {   
  24. functionField();   
  25. }   
  26. }   
  27.   
  28. function functionField()   
  29. {   
  30. alert("this id a field function");   
  31. }  
分享到:
评论

相关推荐

    jsp中的 mvc模式开发 实例

    总结,MVC模式在JSP开发中扮演着关键角色,它帮助我们实现清晰的代码结构,提高代码的可读性和可维护性。这个实例提供了从基础到实践的MVC应用开发经验,对于理解JSP和MVC模式的结合运用非常有帮助。通过深入研究和...

    Extjs4.0 mvc模式开发

    在本工程中,我们将深入探讨ExtJS 4.0的MVC模式,以及如何通过controller、view、model和store来构建应用。 **1. MVC模式** MVC模式是一种软件设计模式,将应用程序分为三个主要组件:模型(Model)、视图(View)...

    mvc 模式开发小案例

    **MVC模式详解** MVC(Model-View-Controller)是一种经典的软件设计模式,尤其在Web应用程序开发中广泛应用。此模式将应用逻辑分为三个主要组件,以实现良好的代码...这将有助于你在未来开发中更有效地应用MVC模式。

    MVC模式开发的blog系统

    在本项目中,我们讨论的是一个基于MVC模式开发的Blog系统,对于初学者来说,这是一个很好的实践案例。 **1. Model(模型)** 模型是应用的核心部分,它负责处理数据和业务逻辑。在这个Blog系统中,模型可能包括`...

    构建自己的MVC框架:JavaScript中的MVC模式详解与实践

    在现代Web开发中,MVC(Model-View-Controller)模式是一种流行的设计模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller),以实现关注点分离。本文将详细介绍MVC模式的工作...

    MVC模式开发案例

    **MVC模式开发案例** 在Java Web开发中,MVC(Model-View-Controller)模式是一种广泛应用的设计模式,它将应用程序的逻辑分为三个主要部分,从而实现代码的解耦和模块化。本案例旨在深入理解并实践MVC模式,涵盖如...

    mvc模式的javascript验证框架

    **标题解析:**“mvc模式的javascript验证框架” 在软件开发中,MVC(Model-View-Controller)模式是一种常用的设计模式,它将应用程序的数据模型、用户界面和控制逻辑分离,提高了代码的可维护性和可扩展性。在这...

    基于JavaScript MVC模式的Wiki设计与实现.pdf

    本文主要介绍了基于JavaScript MVC模式的Wiki设计与实现,讨论了MVC模式的优点、Wiki系统的设计与实现,并对JavaScript在Wiki系统中的应用进行了深入分析。 知识点: 1. Wiki系统是一种超文本实现的技术,用以实现...

    MVC模式开发的留言小程序

    **MVC模式开发的留言小程序** MVC(Model-View-Controller)模式是一种软件设计模式,广泛应用于Web应用开发中,旨在分离业务逻辑、数据处理和用户界面展示。在这个基于MVC模式的留言小程序中,我们可以看到这种...

    MVC模式在WEB开发中的应用

    ### MVC模式在WEB开发中的应用 #### 一、引言 随着互联网技术的快速发展,特别是Web 2.0时代的到来,Web应用变得越来越重要。这一时期不仅见证了Flash技术和JavaScript等传统技术的新应用,而且Web应用的用户体验...

    MVC模式jsp网上书店系统

    MVC(Model-View-Controller)模式是一种广泛应用在Web开发中的软件设计模式,它将应用程序分为三个核心部分:模型(Model)、视图(View)和控制器(Controller)。这种分离使得代码结构清晰,易于维护和扩展。 1....

    mvc模式开发的健康管理系统

    本项目“mvc模式开发的健康管理系统”是一个学习实践JEEE(Java Enterprise Edition)时创建的实例,它包含了文件上传下载、验证码生成、Java脚本执行以及用户管理功能。虽然存在一些缺陷,但这个项目对于初学者理解...

    JSP小项目MVC模式资源

    在这个JSP小项目中,我们能看到MVC模式如何在实际开发中被应用。 1. **Model(模型)**:模型是应用的核心部分,负责处理业务逻辑和数据管理。在JSP中,模型通常由JavaBeans(也称为实体类)构成,它们封装了数据并...

    JSP MVC 模式开发的BBS论坛

    这个项目是基于纯MVC模式开发的BBS论坛,充分展示了JSP在构建动态网站中的应用。 **MVC模式详解** 1. **模型(Model)**:模型是应用的核心,负责管理业务数据和业务逻辑。在BBS论坛中,模型可能包含用户信息、...

    小议MVC模式开发

    **小议MVC模式开发** MVC(Model-View-Controller)模式是软件工程中的一种设计模式,广泛应用于Web应用程序的开发中,特别是在Java、.NET等框架中。该模式将应用程序分为三个主要部分,旨在实现业务逻辑与用户界面...

    MvcApplication4 mvc模式开发项目的例子

    总的来说,MvcApplication4是一个全面展示ASP.NET MVC开发流程的实例,涵盖了从模型设计、视图创建、控制器编写到数据库交互的全过程,是学习和实践MVC模式的理想起点。通过这个项目,开发者可以深入了解Web应用的...

    MVC模式图

    在实际开发中,视图层可能包括但不限于以下几种类型: - 网页界面:HTML、CSS和JavaScript等技术构建的用户界面。 - 图形用户界面(GUI):如桌面应用程序中的窗口和控件。 - 控制台界面:通过命令行显示数据的界面。 ...

Global site tag (gtag.js) - Google Analytics