JQuery扩展的实现方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>jQuery扩展总结</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="http://www.miniui.com/scripts/jquery-1.6.2.min.js"></script>
		<script type="text/javascript">
			/*
				为测试添加的控制台输出方法,想要查看信息,请按F12
			*/
			function log(info){
				console.log(info);
			}
			/*
				jQuery插件的开发包括两种:
				一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,
				另一种是对象级别的插件开发,即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。

				1、类级别的插件开发
				类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展:
			*/
			//1.1定义一个全局函数
			jQuery.foo = function() {
				log('添加一个新的全局函数');
			}
			//定义多个全局函数
			jQuery.bar = function() {
				log('再增加一个全局函数');
			}
			//1.2使用extend定义全局函数
			jQuery.extend({
				foo1:function() {
					log('extend 定义全局函数1');
				},
				bar1:function() {
					log('extend 定义全局函数2');
				}
			});
			//1.3 使用命名空间定义函数
			jQuery.plugin = {
				foo2:function() {
					log('使用namespace定义函数');
				}
			}

			$(function(){
				$.foo();
				$.bar();
				$.foo1();
				$.bar1();
				$.plugin.foo2();
			});

			/*
				2、对象级别的插件开发
				对象级别的插件开发需要如下的两种形式:
			*/
			//形式一
			(function($){
				$.fn.extend({
					foo3:function() {
					log('对象级别插件extend方式1');
					},
					bar3:function() {
					log('对象级别插件extend方式2');
					}
				})
			})(jQuery);

			//形式二
			(function($){
				$.fn.foo4 = function() {
				log('对象级别插件fn方式');
				}
			})(jQuery);

			//接收参数来控制插件的行为
			(function($){
				$.fn.bar4 = function(options) {
				var defaults = {aaa:'1',bbb:'2'};
				var opts = $.extend(defaults, options);
				log('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb);
				}
			})(jQuery);

			//提供公有方法访问插件的配置项值
			(function($){
				$.fn.foo5 = function(options) {    
				var opts = $.extend({}, $.fn.foo5.defaults, options);
				log('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb);
				}
				$.fn.foo5.defaults = {aaa:'1',bbb:'2'};
			})(jQuery);

			//提供公有方法来访问插件中其他的方法
			(function($){
				$.fn.bar5 = function(options) {
					$.fn.bar5.log(options);
				}
				$.fn.bar5.log = function(params) {
					log(params);
				}
			})(jQuery);

			$(function(){
				$('#test').foo3();
				$('#test').bar3();
				$('#test').foo4();
				$('#test').bar4();
				$('#test').bar4({aaa:'3'});
				$('#test').bar4({aaa:'3',bbb:'4'});
				$('#test').foo5();
				$('#test').foo5({aaa:'5',bbb:'6'});
				$('#test').bar5('aaaa');
			});
		</script>
	</head>
	<body>
		<div id="test"></div>
	</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值