jQuery 自定义函数写法分享

自定义主要通过两种方式实现
$.extend({aa:function(){}});
$.fn.extend({aa:function(){}});
调用的方法分别是:
$.aa();
$($this).aa();

注意:
创建函数时不要放在 $(function() { }中,调用时候要放在事件里面
$($this).click(function(){$.aa();});

jQuery.extend 函数详解
JQuery的extend扩展方法:
Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。
一、Jquery的扩展方法原型是:   

extend(dest,src1,src2,src3...);
它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:
var newSrc=$.extend({},src1,src2,src3...) // 也就是将"{}"作为dest参数。
这样就可以将src1,src2,src3...进行合并,然后将合并结果返回给newSrc了。如下例:

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

那么合并后的结果

result={name:"Jerry",age:21,sex:"Boy"}

也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。

二、省略dest参数
上述的extend方法原型中的dest参数是可以省略的,如果省略了,则该方法就只能有一个src参数,而且是将该src合并到调用extend方法的对象中去,如:
1、$.extend(src)
该方法就是将src合并到jquery的全局对象中去,如:

$.extend({
hello:function(){alert( ' hello ');}
});
就是将hello方法合并到jquery的全局对象中。
2、$.fn.extend(src)
该方法将src合并到jquery的实例对象中去,如:
复制代码 代码如下:

$.fn.extend({
hello:function(){alert('hello');}
});

就是将hello方法合并到jquery的实例对象中。

下面例举几个常用的扩展实例:

$.extend({net:{}});

这是在jquery全局对象中扩展一个net命名空间。

$.extend($.net,{
hello:function(){alert( ' hello ');}
})

这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。

三、Jquery的extend方法还有一个重载原型:

extend(boolean,dest,src1,src2,src3...)

第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致,什么叫深层拷贝,我们看一个例子:

var result=$.extend( true, {},
{ name: " John ", location: {city: " Boston ",county: " USA "} },
{ last: " Resig ", location: {state: " MA ",county: " China "} } );

我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true,那么合并后的结果就是:
result={name: " John ",last: " Resig ",
location:{city: " Boston ",state: " MA ",county: " China "}}

也就是说它会将src中的嵌套子对象也进行合并,而如果第一个参数boolean为false,我们看看合并的结果是什么,如下:
复制代码 代码如下:

var result=$.extend( false, {},
{ name: "John", location:{city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} }
);
那么合并后的结果就是:
result={name: " John ",last: " Resig ",location:{state: " MA ",county: " China "}}

以上就是$.extend()在项目中经常会使用到的一些细节。

#################################################################################################################

这里简要地进行些写法,主要是简写的说明,见下列代码:

 

 <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript">
    
        
//jQuery插件的写法(需要传入操作对象)
        ;(function($)
        {
            
//PI_TestPlugIn为插件名称,也是插件的操作对象
            //为了不会与其它插件名重复,这里我使用PlugIn的缩写PI_来定义插件对象前缀
            $.fn.PI_TestPlugIn=   
            {
                
//该插件的基本信息
                Info:{
                    Name: 
"TestPlugIn",
                    Ver: 
"1.0.0.0",
                    Corp: 
"Lzhdim",
                    Author: 
"lzhdim",
                    Date: 
"2010-01-01 08:00:00",
                    Copyright: 
"Copyright @ 2000-2010 Lzhdim Technology Software All Rights Reserved",
                    License: 
"GPL"
                },
                
//具有参数的函数对象,这里参数是一个对象,具有属性
                FunctionWithParams:function(paramObj)
                {
                    
//使用参数,是否使用默认值
                    var params = paramObj ? paramObj : new function(){
                                                           param1
= "1";
                                                           param2
= "2";
                                                       };
                    
                                                   
                    
return this.Info.Name + ".FunctionWithParamObject";
                },
                
//具有参数的函数对象,这里参数是一个变量
                FunctionWithParam:function(varparam)
                {
                    
//使用参数,是否使用默认值
                    var param = varparam ? varparam : null;
                                                   
                                                   
                    
return this.Info.Name + ".FunctionWithParam";
                },
                
//不具有参数的函数对象
                FunctionWithOutParam:function()
                {
                    
return  this.Info.Name + ".FunctionWithOutParam";
                }
            };
        })(jQuery);
        
        
        
//jQuery拓展函数的写法(不需要传入操作对象),即API函数
        ;(function($)
        {
            $.extend({
                
//PIF_TestExtendFunction为拓展函数的操作对象
                //为了不会与其它插件名重复,这里我使用PlugIn的缩写PI_来定义插件对象前缀
                PIF_TestExtendFunction:
                {
                    
//该拓展函数的基本信息
                    Info:{
                        Name: 
"TestExtendFunction",
                        Ver: 
"1.0.0.0",
                        Corp: 
"Lzhdim",
                        Author: 
"lzhdim",
                        Date: 
"2010-01-01 08:00:00",
                        Copyright: 
"Copyright @ 2000-2010 Lzhdim Technology Software All Rights Reserved",
                        License: 
"GPL"
                    },
                    
//具有参数的函数对象
                    FunctionWithParams:function(paramObj)
                    {
                        
//使用参数,是否使用默认值
                        var params = paramObj ? paramObj : {
                                                           param1: 
"1",
                                                           param2: 
"2"
                                                       };
                                                   
                                                   
                        
return this.Info.Name + ".FunctionWithParamObect";
                    },
                    
//具有参数的函数对象,这里参数是一个变量
                    FunctionWithParam: function (varparam) {
                        
//使用参数,是否使用默认值
                        var param = varparam ? varparam : null;


                        
return this.Info.Name + ".FunctionWithParam";
                    },
                    
//不具有参数的函数对象
                    FunctionWithOutParam:function()
                    {
                        
return this.Info.Name + ".FunctionWithOutParam";
                    }
                }
            });
        })(jQuery);



        $(
function () 
        {
            
//测试插件
            var params = 
            {
                param1: 
"3",
                param2: 
"4"
            };
            
            alert($(
this).PI_TestPlugIn.FunctionWithParams(params));

            alert($.PIF_TestExtendFunction.FunctionWithOutParam());
        });
        
        
    
</script>

 #########################################################################################

jquery闭包写法:

一般jQuery的代码通常会包含在如下代码之间

Js代码
  1. (function( $ ){   
  2.   
  3.     //code here   
  4.   
  5. })( jQuery );  

 

 这个是啥意思呢?

 

相当于

 

Js代码
  1. //定义一个函数 $为参数名   
  2. foo = function($){}   
  3. //把jQuery参数传递进函数内部 执行这个函数, 这样函数内部就可以使用$这个内部变量代替jQuery变量了   
  4. foo(jQuery);  

这样做的好处是把jQuery传入函数内部,$为函数内的局部变量,不会与其他js程序和框架产生冲突

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值