jquery.extend 與 jquery.fn.extend的區別和使用

$.extend()方法在JQuery中有兩個用法，第一種是擴展方法，第二種是用jquery實現的繼承方式

1> 擴展方法
jQuery.extend
對jQuery對象的擴展，可以理解為靜態方法，是全局的，不需要實例jQuery就可以使用。

JAVASCRIPT:

jQuery.extend({
  

    min: function(a, b) {  return a < b ? a : b; },


    max: function(a, b) { return a > b ? a : b; }


 });

2> jQuery實現的繼承方式

jQuery.extend([deep], target, object1, [objectN])

返回值:Object

把2個對象合並得到新的target,deep是可選的（遞歸合並）

合並 settings 和 options，修改並返回 settings。

jQuery 代碼:

var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options);

結果:

settings == { validate: true, limit: 5, name: "bar" }

描述:

合並 defaults 和 options, 不修改 defaults。

jQuery 代碼:

var empty = {}; var defaults = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; var settings = jQuery.extend(empty, defaults, options);

結果:

settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

jQuery.fn.extend

對jQuery元素的擴展，只能用在jQuery元素上，可以理解為普通方法。定義插件時需要返回this，以支持jQuery的鏈式操作。

JAVASCRIPT:

1. <!--
2.     jQuery. fn. extend ( {
3.       red: function ( ) {
4.          return $ ( this ). css ( 'color', '#ff0000' );
5.        }
6.      } );
7.  
8.     $ ( '#test' ). red ( );
9.    //-->