JQuery OOP 及 OOP思想的简易理解

Posted 老妖仔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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


以上是关于JQuery OOP 及 OOP思想的简易理解的主要内容,如果未能解决你的问题,请参考以下文章

OOP编程思想

OOP编程思想

简单理解OOP——面向对象编程

理解面向过程(OPP)面向对象(OOP)面向切面(AOP)

OOP 思想 和 设计原则 及24种设计模式

PHP的面向对象编程思想