Java程序员的JavaScript学习笔记(10—— jQuery-在“类”层面扩展)

27 篇文章 0 订阅
16 篇文章 0 订阅
计划按如下顺序完成这篇笔记:
  1. Java程序员的JavaScript学习笔记(1——理念)
  2. Java程序员的JavaScript学习笔记(2——属性复制和继承)
  3. Java程序员的JavaScript学习笔记(3——this/call/apply)
  4. Java程序员的JavaScript学习笔记(4——this/闭包/getter/setter)
  5. Java程序员的JavaScript学习笔记(5——prototype)
  6. Java程序员的JavaScript学习笔记(6——面向对象模拟)
  7. Java程序员的JavaScript学习笔记(7——jQuery基本机制)
  8. Java程序员的JavaScript学习笔记(8——jQuery选择器)
  9. Java程序员的JavaScript学习笔记(9——jQuery工具方法)
  10. Java程序员的JavaScript学习笔记(10——jQuery-在“类”层面扩展)
  11. Java程序员的JavaScript学习笔记(11——jQuery-在“对象”层面扩展)
  12. Java程序员的JavaScript学习笔记(12——jQuery-扩展选择器)
  13. Java程序员的JavaScript学习笔记(13——jQuery UI)
  14. Java程序员的JavaScript学习笔记(14——扩展jQuery UI)

这是笔记的第10篇,我们考虑如何从实用角度,从“类”的角度对家Query进行扩展。

jQuery是一个紧凑的框架,专注解决最核心的问题,没有追求大而全,所有扩展机制对jQuery来说,至关重要。
JavaScript以函数为基础,今天我们试图基于jQuery构建一个针对自己项目的函数库,每个函数实现特定的功能,同时对这些函数进行有效的组织。


作者博客:http://blog.csdn.net/stationxp

作者微博:http://weibo.com/liuhailong2008

转载请取得作者同意


1、目标

通过$调用我们的函数库。函数库按照功用分级组织。效果如下:
$.util.parseDate
$.util.parseDecimal
$.page.event.init

2、方法

上一篇我们了解到,通过jQuery.extend()可以方便地对jQuery进行扩展,甚至能覆盖extend本身。
jQuery.extend()支持以下几种函数签名:
jQuery.extend(obj);
jQuery.extend(isDeep,obj);
jQuery.extend(target,src1,src2,...);
jQuery.extend(isDeep,target,src1,src2,...);
我们可以extend源代码的基础上修改,并覆盖原来的extend,这样修改一个可能被广泛使用的函数,修改了其他人对输入参数的预期,是不合适的,可能会误导其他人,输入了错误的参数,带来错误隐患。

我们重新定义一个方法,如下:
jQuery.extend({
	ns_extend : function(){
		var ns, nss, target, i, src, length ;
		length = arguments.length;
		
		if(length>1){
			ns  = arguments[0]; 
			i = 1;
		} else { 
			i = 0;
		}


		if(!( src = arguments[i] )  ||  !jQuery.isPlainObject( src ) ){
			return ;
		}


		target = this;


		if(ns){
			nss = ns.split('.'); // TODO 这里需要做好多字符过滤处理
			for( var idx = 0; idx < nss.length ; ++idx	){
				ns =  nss[idx];// ns 的语义改变了,原来的语义使命结束,这里用作临时变量
				ns = jQuery.trim(ns);
				if(ns){
					target[ns] = target[ns] || {};
					target = target[ns];
				}
			}
		}
		
		for( ; i < length ;  ++i ){
			src = arguments[i];
			jQuery.extend( target, src );
		}


	}
});


jQuery.ns_extend('pet',{
	miao : function(){
		alert('i am a cat');
	}
});


jQuery.ns_extend('my.fav.pet',{
	wangwang : function(){
		alert('i am a dog');
	}
});


$.pet.miao();


$.my.fav.pet.wangwang();

目的达成!
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值