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();

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

相关阅读

相关文章

相关问答

相关文档