基于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>