2007-11-26

javascript中MVC模式开发

关键字: MVC

        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. }  
评论
发表评论

您还没有登录，请登录后发表评论

dikar
搜索本博客
存档
最新评论