在项目维护的时候，看到通篇的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
时间： 2024-10-06 19:12:36