jQuery에서 Extension()과 jQuery.fn.extend()의 차이점에 대한 자세한 설명-JS 튜토리얼-php.cn

jQuery에서 Extension()과 jQuery.fn.extend()의 차이점에 대한 자세한 설명

青灯夜游

풀어 주다： 2020-11-26 17:59:10

앞으로

3069명이 탐색했습니다.

jQuery에서 Extension()과 jQuery.fn.extend()의 차이점에 대한 자세한 설명

관련 권장사항: "jQuery 비디오 튜토리얼"

1. jQuery extend() 및 jQuery.fn.extend()

jQuery 에 대해 알아보세요. 매뉴얼, extend 메소드는 jQuery와 jQuery.fn이라는 두 개의 다른 객체에 마운트되지만 jQuery의 내부 코드는 동일하지만 기능은 다릅니다

공식 설명:

jQuery.extend(): 두 개 이상의 개체 내용을 첫 번째 개체로 병합합니다. (두 개 이상의 개체 내용을 첫 번째 개체로 병합합니다.) ;

jQuery.fn.extend(): 새로운 jQuery 인스턴스 메소드를 확장하기 위해 객체의 내용을 jQuery 프로토타입에 병합합니다.)

2. 이해하기

jQuery.extend() 먼저 jQuery를 클래스로 살펴보겠습니다. 이것이 이해하기 더 쉽습니다. jQuery.extend()는 확장된 jQuery 클래스입니다.

jQuery 클래스를 먹고 마시고 달리고 점프할 수 있는 인간으로 간주한다고 가정해 보겠습니다. 이제 jQuery.extend 메서드를 사용하여 이 클래스를 talk() 스킬로 확장합니다. 이 경우, 당신이 남자든, 여자든, xx사람...등이든 이 스킬(방법)을 계승할 수 있습니다.

는 다음과 같이 작성할 수 있습니다.

JQuery.extend({
    speak:function(){
         alert("how are you!");
    }
});

로그인 후 복사

호출 메소드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery.extend()与jQuery.fn.extend()区别</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript">
        (function($){
               $.extend({
                   speak:function(){
                       alert("how are you!");
                   }
               });
        })(jQuery);    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $.speak();
        })    </script>
</head>
<body>
 
</body>
</html>

로그인 후 복사

$.speak)가 jQuery 클래스 자체의 메소드(객체)가 되었음을 알 수 있으며, 이제 "말"할 수 있습니다. "예.

하지만 이 능력은 인류 전체를 대표하는 jQuery 클래스 자체에서만 사용할 수 있습니다. 개인적으로 사용하고 싶다면 Zhang San Li Si Wang Wu Ma Liu, 작은 풀뿌리들이 모든 인류를 대표 할 수 있습니까?

따라서 이 확장은 클래스 자체

에만 관련된 소위 정적 메서드이기도 합니다. 특정 인스턴스화된 개체와는 아무 관련이 없습니다.

jQuery.fn.extend() 이해하기 말 그대로 이 확장은 jQuery.fn의 메소드입니다. jQuery.fn이란 무엇입니까?

jQuery.fn = jQuery.prototype = {
      init:funtion(selector,context){            //.....  
     }
}

로그인 후 복사

그래서 jQuery.fn.extend는 jQuery 객체(프로토타입)의 메소드를 확장한 것입니다!

대상이 무엇인가요? $("#abc"), $(p)

와 같은 클래스의 인스턴스화입니다. 즉, jQuery.fn.extend 확장 메소드를 jQuery 객체에 사용해야 합니다! 이를 사용하려면 Zhang San, Li Si, Wang Wu 및 Liu와 같은 인스턴스화된 개체여야 합니다.

직접 말하면 다음과 같이 사용해야 합니다(xyz()가 확장 방법이라고 가정):

$('selector') 4. 둘 사이의 차이점 요약:

4.1. 둘의 호출 방법이 다릅니다:

jQuery.extend(),一般由传入的全局函数来调用，主要是用来拓展个全局函数，如$.init()，$.ajax();

jQuery.fn.extend(),一般由具体的实例对象来调用，可以用来拓展个选择器，例如$.fn.each();

4.2、两者的主要功能作用不同：

jQuery.extend(object); 为扩展jQuery类本身，为自身添加新的方法。

jQuery.fn.extend(object);给jQuery对象添加方法

4.3、大部分插件都是用jQuery.fn.extend()

5、JQuery的extend扩展方法：

5.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了。如下例：

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
那么合并后的结果：  result={name:"Jerry",age:21,sex:"Boy"}

로그인 후 복사

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

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

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

로그인 후 복사

就是将hello方法合并到jquery的全局对象中。

　　5.2.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命名空间中去。

　　5.2.3、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，那么合并后的结果就是：

var 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"}  });

로그인 후 복사

那么合并后的结果就是:

var result={
      name:"John",last:"Resig",location:{state:"MA",county:"China"}
}

로그인 후 복사

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

更多编程相关知识，请访问：编程视频课程！！

위 내용은 jQuery에서 Extension()과 jQuery.fn.extend()의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!