JQuery OOP 及 OOP思想的简易理解

Posted 2020-09-03 老妖仔

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery OOP 及 OOP思想的简易理解相关的知识，希望对你有一定的参考价值。

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

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

 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 }