jQuery插件分类、编写及实例

1.jQeury主要有2种类型

1）实例对象方法插件开发能让所有的jQuery实例对象都可以调用的方法。也就是说，只要通过$()工厂获得
的jQuery实例对象，都可以调用我们开发的方法。95%的插件都是这种类型

2）全局函数插件可以将独立的函数添加到jQuery命名空间中了。那么调用的时候就可以使用 $.函数名
称() 或者jQuery.函数名称（）来调用了。可以理解为静态方法。

2. 添加全局函数
我们可以将jQuery理解为类，$是这个类的别名。开发全局函数就是开发这个类的
静态方法。如$.get() ,$.post()。添加新的全局函数，实际上就是扩展jQuery“类”本身，
给jQuery命名空间上添砖加瓦.

加入新添加的全局函数的名称是sayHello,功能是弹出一个hello的对话框.

2.1增加一个全局函数

jQuery.sayHello=function(name){
　　alert("你好,"+name);
}

//调用:

$.sayHello(‘张三‘);


//或者


jQuery.sayHello("李四");



2.2增加多个全局函数
使用jQuery提供的全局函数extend来一次加入多个函数



jQuery.extend({
sayHello:function(name){
         alert("你好"+name);
},
sayBye:function(name){
         alert("再见"+name);
}
}
)
 


上面的代码是往jQuery命名空间中添加了两个函数sayHello和syBye,调用同上


2.3命名空间 


前面的方式有可能与jQuery命名空间中的其它函数产生命名冲突的危险，也有可能
与其它jQuery插件中定义的方法重名，所以我们可以考虑将我们定义的所有的函数封装
到一个对象中去，相当于为我们的函数给了一个命名空间


代码如下:


jQuery.wq={
sayHello:function(name){
         alert("你好"+name);
},
sayBye:function(name){
         alert("再见"+name);
}
}


这种写法可以这样来理解: 首先我们为jQuery添加了一个wq属性，而这个属性本
身是一个对象，后面我们使用JSON来定义了一个对象，这个对象有两个方法。


所以调用就是如下形式:
调用:


$.wq.sayHello("王五");
jQuery.wq.sayBye("赵六");
 


注意:即使页面中包含了jQuery文件，也不应该认为简写形式”$”是始终有效的。
因为”$” 只是一个别名而已，其它的库可以重新定义这个”$” .所以在定义插件的时候，
最好使用jQuery来调用方法，或者重新定义”$”


3. 为jQuery实例对象创建新方法
　　对所有的jQuery实例对象中的方法进行扩展。
3.1一次定义一个方法


jQuery.fn.sayHello=function(){
　　alert("你好!");
}
// 调用:
$("div").sayHello();


3.2一次定义多个方法
前面一次定义一个方法太少，我们能不能一次多定义一些方法？jQuery库提供了
jQuery.fn.extend方法来一次定义多个方法


jQuery.fn.extend({
sayHello:function(){
         alert("Hello");
},
sayBye:function(){
         alert("Bye Bye");
}
});



可以看到extend方法的参数实际上就是一个JSON格式的对象。 
调用的时候可以如下调用:



$(“div”).sayHello() 和 $(“div”).sayBye(); 


4. 插件方法内部的this关键字说明
上 面的写法相当于每一个jQuery实例都可以使用，这跟全局函数没有什么区别。而我们定义的实例方法往往是需要在特定的环境中使用的。所以我们在编写插件 方法的时候，应该考虑对象方法的环境。“this”关键字在任何插件方法内部引用的都是当前的jQuery实例对象。所以可以在this上调用任何 jQuery方法。需要注意的是：我们使用的jQuery选择符可能会选取多个元素，哪么“当前的jQuery实例”有可能是一个元素，多个元素或者零个 元素。我们必须考虑到这种情况。


如果我们使用选择器选中了多个元素，那就可以使用each()方法来迭代每个元素，在each方法内部，再使用this，这个this指的就是每个HTML DOM 元素的引用。


5. 方法连缀
使用jQuery对象方法的时候，基本都能使用连缀的方式。那么我们使用插件的时候就必须为插件方法返回一个jQuery实例对象。


jQuery.fn.extend({
sayHello:function(){
     alert("Hello");
     return this;
},
sayBye:function(){
     alert("Bye Bye");
     return this;
}
});



6. 为插件方法定义默认值 


通过使用jQuery.extend()方法，可以方便提供随时可能被传入的参数覆盖的默认值，此时对方法的调用会大致保持相同.


注意:jQuery.extend方法在API中的两个地方都有，一个在【核心】.【插件机制】中有，并且只有一个参数。一个在【工具】.【数组和对象操作】中。


注意这里我们使用的是后者,形式为: jQuery.extend(target, object1)


它的作用是将后面对象中所有的属性和方法复制到前面对象中，即将object1中的属性和方法复制到target对象中。


所以我们在定义一个插件的时候，可以使用如下方式为插件方法指定默认值：



jQuery.fn.sayHello=function(properties){
var defaults={
     name:"张三",
     age:20
};
jQuery.extend(defaults,properties);
alert("第一个参数:"+defaults.name+" 第二个参数"+defaults.age);
return this;
}



这样一来，我们就可以这样来调用了


$("div").sayHello({
    name:"李四",
    age:30
});



　　


或者:


$("div").sayHello({
    name:"王五"
});



　　


或者:


$("div").sayHello({
    age:25
});



　　


7. 插件开发技巧-闭包
我们在开发插件的过程中，是将代码写在了一个js文件中，那么这个js文件中有可能会定义很多的方法或者 一些变量。那么这些方法或者变量就有可能与别的js文件中的变量或者方法冲突，那么如何将我们定义的js代码“暴露”一部分，隐藏一部分呢？也就是你虽然 定义了，但是在其它地方访问不到，该暴露的暴露，不该暴露的就藏起来，要达到这个目的，就得用到“闭包“


那何为“闭包“？说简单点就是允许使用内部函数，即在函数中定义另外一个函数，而且内部函数可以访问在外部函数中声明的变量和其它内部函数。比如有如下定义:


//定义A函数
function A(){
//定义B函数
var B=function(){
alert("这是B");
}
return B; //将B函数返回
}
var c=A();//此时C就是B函数
c();//其实就是调用B函数



可以看到，内部函数B在包含它的A函数之外执行了，这就形成了闭包。也就是B在外部函数A返回之后被执行了，而当B执行的时候它仍然可以访问A中定义的局部变量和其它内部函数。


利用闭包的特性，我们可以将我们需要暴露的方法暴露出来，比如B，又可以隐藏一些局部变量和函数，比如在A中定义变量和函数，A以外的其它函数是不能访问的，但是B是可以访问的。


其实上面的代码就是先执行A函数，得到结果，这个结果又是一个函数，然后再执行B函数即


var c=A();
c();



　　


既然我们的目的是想让B在A之外执行，那我们可以将代码做如下变通:


var C;
function A(){
var B=function(){
     alert("这是B函数");
}
C=B;//将内部函数赋值给C
}
//让A函数执行，A执行之后就将B赋值给了C
A();
//现在执行C，实际上就是在执行B();
//弹出对话框 "这是B函数" 


能不能让A在定义之后马上就执行呢？我们可以定义一个匿名函数 放到一对括号中,然后
再用一对小括号执行它即可:


var C;
(function(){
var B=function(){
alert("这是B函数");
}
C=B;//将内部函数赋值给C
})()
//现在执行C，实际上就是在执行B(); //弹出对话框 "这是B函数" 


能不能从外面传个参数进去交给函数B呢？改写代码如下:


(function($){
//这里就可以使用$符号了.....
//将B函数添加到JQuery的实例对象函数中
$.fn.B=function(){
     alert("这是B函数");
}
})(jQuery);


这段代码被浏览器加载就会被执行，jQuery作为参数传递进去交给了 $符号，所以内部就能使用$符号了，在代码中，我们使用$.fn为jQuery的实例对象添加了一个方法B，页面上使用:


<script>
$(document).ready(function(){
    $("h1").B();
});
</script>


执行结果
所以常见的jQuery插件都是以下这种形式:
好处就在于代码内部定义的方法外部只有插件能够访问，这样就将一些代码隐藏起来了，该暴露的插件方法暴露在外部了。


(function($){
//插件代码
})(jQuery)



　　



js插件开发的一种方法：



js代码：



<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
(function ($) {
//默认参数 (放在插件外面，避免每次调用插件都调用一次，节省内存)
var defaults = {
color: ‘红色‘
};
//扩展
$.fn.extend({
//插件名称
height: function (options) {
//覆盖默认参数
var opts = $.extend(defaults, options);
//主函数
return this.each(function () {
//激活事件
var obj = $(this);
obj.click(function () {
alert(opts.color);
});
});
}
})
})(jQuery);
$(function () {
$("p").height({ color: ‘black‘ });
});
</script>




转自：http://www.360doc.com/content/14/0307/09/15605563_358431371.shtml
				


				
时间： 2024-09-30 06:01:46 

		


		


	

	
	

		


		
jQuery插件分类、编写及实例的相关文章


								

		

			

                jquery插件分类与编写详细讲解
			

		

		

									

				1. 插件种类 插件其实就是对现有的方法(或者叫函数)做一个封装,方便重用提高开发效率.   jQeury主要有2种类型   1)实例对象方法插件 开发能让所有的jquery实例对象都可以调用的方法.也就是说,只要通过$()工厂获得的jquery实例对象,都可以调用我们开发的方法.95%的插件都是这种类型   2)全局函数插件 可以将独立的函数添加到jQuery命名空间中了.那么调用的时候就可以使用 $.函数名称() 或者jQuery.函数名称()来调用了.可以理解为静态方法.   2. 添加全			

		

	

				

		

			

                jQuery插件的编写相关技术 设计总结和最佳实践
			

		

		

									

				原文:http://www.itzhai.com/jquery-plug-in-the-preparation-of-related-technical-design-summary-and-best-practices.html 1.声明插件名称: 添加一个函数到jQuery.fn(jQuery.prototype)对象,该函数的名称就是你的插件名称: jQuery.fn.myPlugin = function() { // Do your awesome plugin stuff here			

		

	

				

		

			

                jquery 插件的编写
			

		

		

									

				/** * 插件的学习 * 原文地址:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html#home */ ;(function($, window, document,undefined) {     //定义Beautifier的构造函数     var Beautifier = function(ele, opt) {         this.$element = ele,         this.defaults = {			

		

	

				

		

			

                jQuery插件编写及链式编程模型小结
			

		

		

									

				JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQuery插件,然后像使用jQuery那样来操作DOM.  一.jQuery插件开发快速上手 1.jQuery插件模板 关于jQuery插件的编写,我们可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字,其模板如下: (function($){ $.fn.m			

		

	

				

		

			

                jQuery插件编写及链式编程模型
			

		

		

									

				jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQuery插件,然后像使用jQuery那样来操作DOM.  一.jQuery插件开发快速上手 1.jQuery插件模板 关于jQuery插件的编写,我们可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字,其模板如下:			

		

	

				

		

			

                编写优秀jQuery插件的10个技巧
			

		

		

									

				本文和大家分享的主要是jQuery 插件的编写技巧,一起来看看吧,希望对大家 学习jquery有所帮助. 1. 把你的代码全部放在 闭包 里面 这是我用的最多的一条.但是有时候在闭包外面的方法会不能调用. 不过你的插件的代码只为你自己的插件服务,所以不存在这个问题,你可以把所有的代码都放在闭包里面. 而方法可能应该放在Prototype 方法内部. ( function($)  { //code here })( jQuery); 2. 提供插件的默认选项 你的插件应该会有一些选项是可以让开发者			

		

	

				

		

			

                编写自己的jquery插件之基础
			

		

		

									

				1.编写jquery插件要遵循命名规范,通常情况下,jquery插件采用这种模式进行命名:jquery.pluginName.js,压缩版为:jquery.pluginName.min.js 2.编写jquery插件的方式有3种,第一种是通过jquery函数的原型属性来编写插件.第二种是采用jQuery.extend()方法.第三种是使用强大的jQuery UI Widget Factory编写插件.这里我选择用jQuery函数的原型属性来编写. 2.1    jQuery源码中有这样一句代码:			

		

	

				

		

			

                锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]
			

		

		

									

				1.表单验证插件Validation   2.表单插件Form 3.动态事件绑定插件livequery 可以为后来的元素绑定事件 类似于jQuery中的live()方法 4.jQuery UI   5.jQuery Cookie   6.遮罩层插件:thickbox 7.编写jQuery插件 <1>编写插件的目的:给已经有的一些列方法或函数做一个封装,一遍在其他地方使用,方便后期维护和提高开发效率. <2>三种类型的插件 a:封装对象方法的插件 jQuery.fn.extend()			

		

	

				

		

			

                jQuery 插件编程精讲与技巧
			

		

		

									

				适应的读者: 1.有一定的jquery编程基础但是想在技能上有所提升的人 2.前端开发的程序员 3.对编程感兴趣的学生 为什么要学习jquery插件的编写? 为什么要学习jquery插件的编写?相信这是很多人都会有的问题,因为目前市面上的插件众多基本上满足日常的开发需求,但是我认为一下的这几点情况是一定要学会插件基础才能解决的: 1.如果有这样的一种场景:假设如果你使用了一个控件,但是这个控件有缺少了一点点的相关的功能,那么如果你不懂jquery插件编写的话,那么你就只能找其他的控件进行补充,这