基于jquery插件开发入门教程

  鉴于最近要使用大量的jquery,所以总有一种捣鼓文字来抒发一下情绪的冲动。

  思前想后就来篇jquery插件开发入门教程吧，毕竟如果不想开发插件，那自己无论用别人的插件多牛逼，最多只是js的使用者，作为程序员也不能算是js的开发者~

  我也是看别人的东西，实现自己的例子来展示。尚不考虑这会成为自己的东西，因为jquery都是老外开发的，我也是看他们的例子，然后反三用而已，并且能巩固我的之前的学习。

   编写插件就是对一系列方法或者函数进行封装，无非就是提高复用性和方便维护。jquery最大优势就是跨多种浏览器，它的主要目的就是提供一种方式来方便、有效的管理文档对象模型dom和浏览器对象模型bom的元素和其中的脚本，此外jquery还提供了一种机制，就是给核心模块增加增加的方法和额外功能。比如jQuery.fn.extend和jQuery.extend就是其中两个方法，通过这种机制我们就可以来开发自己的插件老~提高我们开发的效率~

  真的很想把我写的完整代码发上来，但是前车告诉我这个编辑器的js会识别某些关键字，所有只能另辟蹊径咯~

首先是这个写在我jquery.tanchongshi.js文件下的内容，请忽略我狗血的文件名~但格式标准就是jquery.你的插件名.js

/**基于jquery插件开发入门教程**/
/**为了不和其他库冲突,我使用jquery匿名函数的开发方式
(function($){
    要封装的函数
}
)(jQuery);
这个匿名函数我在我之前的文章 《jquery（自制版）》里面有介绍过
这个函数的意思就是自动执行传jQuery这个参数的函数，这是快速使用函数，
而又不让变量溢出作用域的手法

我在下面写了三种插件方法其中两种的多种格式；
就是基于对象开发jquery.fn.extend();
    基于全局函数（类）开发jaquery.extend();
    还有一种基于选择器的也是基于类先不写了
**/
;(function($){

/**1类级开发只有extend无fn的方式**/

/**1.1：类级开发 extend不带命名空间1
调用方式:$.start();
**/

$.extend({
    start:function(){
        alert("extend不带命名空间类级开发");
    }
});

/**1.2：类级开发 extend之net1带命名空间1
调用方式 $.net.hello();
**/
$.extend({net:{
    hello:function(){
        alert("extend之net1带命名空间");
    }
}});

/**1.3：类级开发 extend之net2带命名空间2
调用方式 $.net.world();
**/
$.extend($.net,{
    world:function(){
        alert("extend之net2带命名空间");
    }
});


/**1.4：类级开发 extend变形无extend带命名空间
调用方式：$.tan.chong();
**/
$.tan={
    chong:function(){
        alert("extend变形无extend带命名空间");
    }
};

/**2对象开发有extend有fn的方式**/

/**2.1对象级别有fn有extend方式
调用方式:$.("通过各种css选择器获取的jquery对象").tanChongShiClick();
**/
$.fn.extend({  
    /**插件一**/
   tanChongShiClick:function(){    
   
       $(this).click(function(){    //监听点击事件
   
            alert($(this).val());  //弹出获取到被点击事件的value
            
        });    
    },  
    /*插件二*/
    mouseOutOrIn:function(){
        $(this).focus(function(){
            alert("这是鼠标移进文本框");
        });
        $(this).blur(function(){
            alert("这是鼠标移出文本框");
        });
    }
});


/**2.2对象级别有fn无extend方式
调用方式:$.("通过各种css选择器获取的jquery对象").ozil();
**/
$.fn.ozil = function(){

$(this).click(function(){
    alert("这是对象级别有fn无extend方式");
})
}

/**3基于fn的对象级别插件的深度开发**/

/**3.1深度开发fn插件：
    （1）插件推荐取名方法：jquery.插件名字.js
    （2）所有的对象方法都应该附加到jQuery.fn对象上面（对象级别编程）
         而所有的全局函数都应该附加到jQuery对象本身上（类级别编程）
         由于我使用的是匿名对象方法，所以我的插件都是直接用$代替jQuery了
    （3）在插件内部，this指向的是当前通过选择器获取的jQuery对象，
         而不像js标准的方法类似document.getElementById()那样获取，内部
         的this指向的是DOM元素
    （4）可以通过this.each来遍历所有的元素，这是一个好方法，可以遍历jQuery对象、数组以及集合
    （5）所有的方法或者函数插件，都应该以分号结尾，否则格式化压缩的时候可
         能会出现问题。为了更加保险些，可以在插件头部添加一个分号【;】,
         一避免他们的不规范代码给插件带来的影响。
    （6）插件应该返回一个jQuery对象，以便保证插件的可链式操作。
    （7）避免在插件内部使用$作为jQuery对象的别名，而应当使用完整的jQuery
         来表示，这样可以避免冲突，不过对于匿名函数编程可以忽略
         **/

/**3.2 this.each实现插件运用在多个元素控件中
调用方式：$("通过各种css选择器获取的jquery对象").fucusOzil();
**/

$.fn.focusOzil1 = function(){
    this.each(function(){
        $(this).focus(function(){
            $(this).val("这是this.each实现的鼠标focus事件");
        }
        );
        $(this).blur(function(){            
            $(this).val("这是this.each实现的鼠标blur事件");
        })
    })
}
 
 /**3.3hover+each**/
 
 $.fn.focusOzil2 = function(){
     this.each(function(){
        $(this).hover(function(){
            $(this).val("这是this.each实现的鼠标hover事件");
        },
        function(){
            $(this).val("");
        }
        );
        /*$(this).blur(function(){            
            $(this).val("这是this.each实现的鼠标blur事件");
        })*/
    })
}
 
 /**3.4 链式操作
 通过类似的$(".tan").addClass.css("color","blue").animate({"width":"50px"},2222);
 类似通过调用方法返回对象的“.”来实施更多操作，碉堡吧！！！
 **/
 
 $.fn.focusOzil3 = function(){
    return this.each(function(){
        $(this).hover(function(){
            $(this).val("这是this.each实现的鼠标hover事件");
        },
        function(){
            $(this).val("");
        }
        );
        /*$(this).blur(function(){            
            $(this).val("这是this.each实现的鼠标blur事件");
        })*/
    })
}
/**很明显我只是在3.2前面加上return 这样神马链式都搞掂了
然后调用方式就是$("通过各种css选择器获取的jquery对象").fucusOzil().你想调用的jQuery方法；
**/
 
/**4开发商业插件
    （1）自定义样式不可少，就是说我们可以让用户自己输入参数来改变样式
         比如最常见的width，height color等。这是为了丰富我们插件的利用价值
    （2）商业开发的框架式基于对象开发的：
         $.fn.YourPlugin = function(options){do what you want to do……}
     (3) 如果用户没有输入参数？那么我们就给一个默认参数吧！
         比如默认对象参数：
         var deafultVal = {
            Value:"your mouse is in",
            HoverColor:'blue'
         }
         对于默认值和用户传进来的值整合，可以用$.extend()；之前我们用
         这个方法扩展类级别插件这是它的其中功能之一，它的功能还有好几个，
         我们就利用$.extend(dest,src1,src2……);
         ，如果存在scr参数，就可以把src合并到dest,并且如果后面参数有重复的
         就会覆盖前面参数存在相同名字的，这样就可以实现用户自定义的值覆盖
         默认的值，如果没有src参数，就是系统默认的值，并成为$的全局变量
         **/
        
         $.fn.tanChongShiLoveOizl = function(options){//options多个参数，用对象传进来
            var defaultVal = {
                Value:'你使用默认的文字老',
                HoverColor:'blue'
            };//定义默认值
            var obj = $.extend(defaultVal,options);//定义默认值和用户传进来的值整合对象
            return this.each(function(){
                var selObj = $(this);//获取当前对象
                var oldValue = selObj.val();//用jQuery方法获取当前对象的Val值
                var oldColor = selObj.css("color");//获取当前对象的字体颜色
                
                selObj.hover(function(){//定义一个hover方法
                    selObj.val(obj.Value);//用jQuery的Text方法对当前对象进行赋值
                    selObj.css("color",obj.HoverColor)//用jQuery的css方法改变value的颜色
                },
                function(){//定义overHover的状态
                    selObj.val(oldValue);
                    selObj.css("color",oldColor);
                }
                );
            });
         }
})(jQuery);

使用页面

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.tanchongshi.js"></script>
<script type="text/javascript">
$(function(){
    /**类级别调用**/
/*$.start();
$.net.hello();
$.net.world();  
$.tan.chong();*/
   /**成员级别调用**/
/*$("#input1").tanChongShiClick();
$("#input1").mouseOutOrIn();
$("#input1").ozil();
$("#input1").focusOzil1()
$("#input1").focusOzil2()
$("#input1").focusOzil3().css("color","green");*///字体绿色没跌缩
$("#input1").tanChongShiLoveOizl({
    Value:"我进入了",
    HoverColor:"red"
});
});
</script>
</head>
<body>
<input type="text" id="input1" style="width:500px;" value="233" />
</body>
</html>