计划按如下顺序完成这篇笔记:
1. 理念。
2. 属性复制和继承。
3. this/call/apply。
4. 闭包/getter/setter。
5. prototype。
6. 面向对象模拟。
7. jQuery基本机制。
8. jQuery选择器。
9. jQuery工具方法。
10. jQuery-在“类”层面扩展。
11. jQuery-在“对象”层面扩展。
12. jQuery-扩展选择器。
13. jQuery UI。
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();
目的达成!