JQuery OOP 及 OOP思想的简易理解

在项目维护的时候，看到通篇的function实际上是非常费（痛）劲（苦），个人对于前端也不是特别熟悉，就想着JQuery能否也建立OOP的写法？

目的便于日后代码维护管理，就算不为了自己，日后交接后也能让另一个攻城狮，一目了然的定位错误。

一、oop.html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html dir="ltr" xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" lang="utf-8"><head>
 4  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5  <title>ooptest</title>
 6  <script type="text/javascript" src="jquery.min.js"></script>
 7  <script type="text/javascript" src="oop.js"></script>
 8  </head>
 9  <body>
10  <br><br>
11  <center>
12  访问<a href="http://www.jb51.net">脚本之家</a>
13  </center>
14  <br><br>
15  <div>
16  名字： <input name="Name" id="Name" type="text" value="请输入中文名字" notice="请输入中文名字" >
17  </div>
18  <div></div>
19  区域选择： <select name="RegionId" id="RegionId" >
20  <option value="0" selected="selected">行政区选择</option>
21  <option value="12">浦东新区</option>
22  <option value="42">松江区</option>
23  <option value="41">金山区</option>
24  <option value="40">崇明区</option>
25  <option value="39">青浦区</option>
26  <option value="37">静安区</option>
27  <option value="36">徐汇区</option>
28  <option value="35">长宁区</option>
29  <option value="34">虹口区</option>
30  <option value="33">闸北区</option>
31  <option value="32">宝山区</option>
32  <option value="31">嘉定区</option>
33  <option value="30">闵行区</option>
34  <option value="29">普陀区</option>
35  <option value="28">卢湾区</option>
36  <option value="27">黄浦区</option>
37  <option value="26">杨浦区</option>
38  <option value="43">奉贤区</option>
39  </select>
40  </body>
41  <html>
42  <script type="text/javascript">
43  $(document).ready(function(){
44  //实例化一个jquery的CLASS
45  new oop().init();
46  });
47  </script>

二、建一个oop.js

 1 function oop(){
 2   //定义变量
 3   var aaa = this;
 4   //初始化
 5   this.init = function(){
 6     aaa.addnotice();
 7     aaa.unchange();
 8     return aaa;
 9   }
10   //添加function
11   this.addnotice = function(){
12     $("input[type='text']").each(function(){
13       $(this)
14       .focus(function(){
15         if($(this).val() == $(this).attr('notice')){
16           $(this).val("");
17         }
18       })
19       .blur(function(){
20         if($(this).val() == $(this).attr('notice') || $.trim($(this).val()) == ""){
21           $(this).val($(this).attr('notice'));
22         }
23       });
24     });
25   }
26   //添加function
27   this.cleannotice = function(){
28     $("input[type='text']").each(function(){
29       if($(this).val() == $(this).attr('notice')){
30         $(this).val("");
31       }
32     });
33   }
34   //添加function
35   this.unchange = function(){
36     $(".select").bind('change',function(){
37       if($(this).val() == '0'){
38         alert('noselect');
39       }else{
40         alert($(this).val());
41       }
42     });
43   }
44 }

以上代码内容转自 http://www.jb51.net/article/78487.htm

 

补充内容，以下属于个人经验理解，针对尚不熟悉OOP思想的同学食用

 1 <?php
 2 /**
 3  * 歌手类 
 4  */
 5 Class singer(){
 6    //唱歌
 7    function sing(){
 8         echo "唱歌";
 9     }
10     //跳舞
11     function dance(){
12         echo "跳舞";
13     }    
14 }

Class是类，他是一个抽象概念，（记住一句俗语:物以'类'聚）

换成我们的话意思是：蓝图、原则、原型；

举例：

　　歌手，他是一个类;

　　世界上有无数无数的歌手，但是各有不同;(不同的歌手，各自的属性数值不一，所以造就出不一样的歌手)

　　但他们都有共同的职能（这就是function），例如：唱歌、跳舞等...

 

 

　假设，需要造一名歌手 你要完成他就要实例化，new singer()，这个叫实例化，一名歌手就出来了

　往里面赋值实现方法等等等的操作步骤之后，就使得这名歌手成为了真正的有名有姓能唱擅舞的歌手。

　当然，因为这个类叫歌手，那我需要实例化一个汽车呢？这样就完全分离了

   页面里面就不用实例化歌手类，而是实例化汽车类，new car().name('BMW')；也就是这样了。

　以上是最最简单的理解。

转载请注明
作者:xxxholicl

posted @ 2017-03-07 17:54  老妖仔  阅读(733)  评论(0)  编辑  收藏  举报