探究javascript mvc(一)-优快云博客

本文链接：https://blog.youkuaiyun.com/simon_woo_coding/article/details/40303823

本文探讨了在JavaScript中实现MVC设计模式的过程，并通过一个简单的控件实例展示了如何使用HTML, CSS和jQuery来构建一个功能性的应用。文章强调了代码组织的重要性，以及MVC模式在提高代码可维护性和扩展性方面的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.背景

在这个暑假，我做了一个使用HTML5,CSS3和JS完成的应用，它可以在PC端和各个移动端运行。应用中的动态效果主要是靠JS实现，由于对JS的不熟悉，造成了一系列问题。最主要的问题在于代码的组织。随着代码越写越多，代码显得非常杂乱无章，对于后期的维护和添加新的功能非常不利。于是我求助与公司的技术总监，他告诉我应该学会组织自己的代码，可以使用MVC的设计模式。于是我在网上找了一些了的例子，其中有一篇博文（http://alexatnet.com/articles/model-view-controller-mvc-javascript）描述的非常好，但是这篇博文中存在一些弊端。我将以此博文为起点，谈下我对javascript MVC的认识。

2.实现目标

我以一个如何实现小的javascript控件为例子。控件包括一个列表和两个按钮（增加和删除），列表显示条目，可以通过增加按钮增加条目，也可以通过删除按钮删除条目。

3.简单的实现方式

html文件

<!doctype html>
<html>
   <!--head-->
   <head>
       <meta charset="utf-8">
       <title>List</title>
       <link rel="stylesheet" href="main.css">
    </head>
   <!--body-->
   <body>
       <div id='container'>
        <div id='content_container'>
          <ul id='items'>
           <li class='item'>Python</li>
           <li class='item'>PHP</li>
           <li class='item'>Javascript</li>
           <li class='item'>HTML5</li>
         </ul>
        </div>
         <div id='btn_container'>
           <button class = 'btn' id='btn_add'>+</button>
           <button class = 'btn' id='btn_del'>-</button>
         </div>
       </div>
   </body>
   <script src="lib/jquery.js" type="text/javascript" charset="utf-8"></script>
  <script>
      $(document).ready(function() {
          $('#btn_add').bind('click',function(){
              console.log('add button click!');
              var value = prompt('input the value:', ''); 
              if(value)
                $('#items').append("<li class='item'>"+value+"</li>");
          });

          $('#btn_del').bind('click',function(){
            console.log('delete button click!');
            if($('.item').length){
              var del = confirm('you want delete it?')
              if(del)$('.item:last').remove();
            };
          });
      });
  </script>
</html>

css文件

*{margin: 0px;padding: 0px;}
body { background-color: #E7EBF2; font-family:arial; font-size:13px }
#container{
	width: 330px;
	margin:0 auto;
	min-height: 200px;
	border:solid 1px #B4BBCD;
	overflow: hidden;
}
#content_container{
	width:250px;
	min-height: 100px;
	margin:20px 10px 20px 10px;
	float:left;
	border:solid 1px #B4BBCD;
}
#btn_container{
	width:40px;
	margin-top: 25px;
	float: left;
}
.btn{
	width:30px;
	height:30px;
	margin:5px;
	float: left;
}
.item{
	list-style: none;
	margin:5px 4px 4px 5px;
	font-size: 20px;
}

效果