Jquery中(function($){...})(jQuery),$(function(){}),$.extend(object)和$.fn.extend(object)

居飞扬
2023-12-01

1.(function($){...})(jQuery)、(function(arg){})(param)、(function(){})()------函数的自执行

    都是是匿名函数,function($){...}参数为$、function(arg){...}参数为arg,function(){...}无参。
    调用匿名函数时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,(相当于函数自执行,即定义了一个匿名函数,然后又调用该函数,该函数的实参为jQuery。)
    (function($){...})(jQuery)(之所以只在形参使用$,是为了不与其他库冲突,所以实参用jQuery),其实就等于var fn = function($){....};fn(jQuery),不过要注意的是fn是不存在的,那个函数直接定义,然后就运行了。
     简单理解是(function($){...})(jQuery)用来 定义 一些需要预先定义好的函数,
    这种匿名函数写法的最大好处是形成闭包,使得在(function($) {…})(jQuery)内部定义的函数和变量只能在此范围内有效

 2.$(function(){…}); jQuery(function($) {…}); $(document).ready(function(){…})------DOM对象加载完后执行

    作用都一样,都是用来在DOM加载完成之后 运行\执行 那些预行定义好的函数.  


    总结:

    $(function(){ })用于存放操作DOM对象的代码执行其中代码时DOM对象已存在。不可用于存放开发插件的代码,因 为jQuery对象没有得到传递,外部通过jQuery.method也调用不了其中的方法(函数)。
    (function($){ })(jQuery);用于存放开发插件的代码执行其中代码时DOM不一定存在,所以直接自动执行DOM操作的代码 请小心使用。



jQuery为开发插件提供了两个方法:$.fn.extend(object)和$.extend(object):

3.$.extend(object):

$.xxx=function(options){}用于为jQuery类添加一个方法xxx,而 $.extend(object)用于为jQeury类添加多个方法,效果都是一样的,是为了扩展 jQuery类本身 ,为该类添加一些新的方法(静态方法),使用jQuery本身就可调用该方法,为jQuery类添加的方法都是全局函数。如:

//为jquery添加多个方法
$.extend({
 add:function(a,b){return a+b;},
  minus:function(a,b){return a-b;}
});  
$.add(3,4);//7
$.minus(5,2)//3

//为Jquery添加一个方法
$.getData = function (options) {
        var opts = $.extend(true, {}, $.fn.loadMore.defaults, options);
        $.ajax({
            url: opts.url,
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "{groupNumber:" + opts.groupNumber + "}",
            success: function (data, textStatus, xhr) {
                if (data.d) {
                    // We need to convert JSON string to object, then
                    // iterate thru the JSON object array.
                    $.each($.parseJSON(data.d), function () {
                        $("#result").append('<li id="">' +
                            this.Id + ' - ' + '<strong>' +
                            this.Name + '</strong>' + ' — ' + '<span class="page_message">' +
                            this.Comment + '</span></li>');
                    });
                    $('.animation_image').hide();
                    options.groupNumber++;
                    options.loading = false;
                }
            },
            error: function (xmlHttpRequest, textStatus, errorThrown) {
                options.loading = true;
                console.log(errorThrown.toString());
            }
        });
    };

    也可用于定义命名空间:虽然在jQuery命名空间中,我们禁止使用javascript函数名和变量名,但仍然不可避免某些函数名或变量名将与其他jQuery插件冲突,因此我们习惯将一些方法封装到另一个自定义的命名空间:

$.myPlugin={
    foo:function(){alert('This is a test')},
    bar:function(){alert('This is another test')}
}
$.myPlugin.foo();
$.myPlugin.bar();

$.extend函数除了给jQuery类添加新方法外, 还有2个重载原型:
1)Jquery的扩展方法原型:$.extend(dest,src1,src2,src3...);

含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。
 如果想要得到合并的结果却又不想修改dest的结构,可以如下使用: var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数,这样就可以将src1,src2,src3...进行合并,然后将合并结果返回给newSrc了
 eg:var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}) ,合并后结果:result={name:"Jerry",age:21,sex:"Boy"},
 即后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。


2)$.extend(boolean,dest,src1,src2,src3...)或$.extend(boolean,{},src1,src2,src3...):

作用也是将将src1,src2,src3...合并到dest中,返回值为合并后的dest,第一个参数表示是否进行深度递归合并:即如果第一个参数为true,且多个对象的某个同名属性也都是对象,则该“属性对象”的属性也进行合并(后面覆盖前面相同属性的值),
如果第一个参数为false,且多个对象的某个同名属性也都是对象,则只取最后一个同名属性中的属性的值:如
var result=$.extend( true,  {},  
    { name: "John", location: {city: "Boston",county:"USA"} },  
    { last: "Resig", location: {state: "MA",county:"China"} } );
结果为:result={name:"John",last:"Resig",location:{city:"Boston",state:"MA",county:"China"}}
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"}}


4.$.fn.extend(object) :$.fn = jQuery.prototype
$.fn.xxx用于添加单个方法xxx,而$.fn.extend 用于添加多个方法,效果都是一样的。为 jQuery对象 添加方法,扩展jQuery对象,即为jQuery类添加一些“成员函数”, 只有jQuery类的实例对象才可以调用这些“成员函数”,如:

 $.fn.extend({
            alertWhileClick: function () {
                $(this).click(function() {
                    alert($(this).val())
                })
            },
            inputblur: function () {
                $(this).blur(function () {
                    alert($(this).val())
                })
            }
        })       
    //$(“#input1″).alertWhileClick(); 
      $(“#input1″).inputblur();
    //$(“#input1″) 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容
用于 开发对象级别的插件

// 创建一个闭包
(function($){
    // 插件的定义
    $.fn.hilight = function(options){
    // build main options before element iteration
    var opts = $.extend({},$.fn.hilight.defaults.options);
    // iteration and reformar each matched element
    return this.each(function(){
       $this = $(this);
    // build element specific options
       var o = $.meta ? $.extend({}, opts, $this.data()) : opts;   
        $this.css({     
         backgroundColor: o.background,     
         color: o.foreground     
       });     
       var markup = $this.html();     
       // call our format function     
       markup = $.fn.hilight.format(markup);     
       $this.html(markup);     
     });     
   };     
   // 私有函数:debugging     
   function debug($obj) {     
     if (window.console && window.console.log)     
       window.console.log('hilight selection count: ' + $obj.size());     
   };     
   // 定义暴露format函数     
   $.fn.hilight.format = function(txt) {     
     return '<strong>' + txt + '</strong>';     
   };     
   // 插件的defaults     
   $.fn.hilight.defaults = {     
     foreground: 'red',     
     background: 'yellow'     
   };
    })
    }
 // 闭包结束
 })(jQuery);    
//使用该插件:$.fn.hilight.defaults.foreground = "blue"; $("myDiv").hilight(); 
  




 类似资料: