jQuery.extend()

最新推荐文章于 2021-07-16 14:45:59 发布

winfredzen

最新推荐文章于 2021-07-16 14:45:59 发布

阅读量871

点赞数

分类专栏： jQuery 文章标签： jquery

jQuery 专栏收录该内容

11 篇文章

订阅专栏

jQuery.extend()

API 如下：

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

描述：合并两个或更多的对象的内容汇集成到第一个对象。

deep：如果是true，合并成为递归（又叫做深拷贝）。
target：一个对象，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展 jQuery 的命名空间。
object1：一个对象，它包含额外的属性合并到第一个参数
objectN：包含额外的属性合并到第一个参数

当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。

如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。

请记住，目标对象（第一个参数）将被修改，并且将通过$.extend()返回。然而，如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象：

var object = $.extend({}, object1, object2);

在默认情况下，通过$.extend()合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。

<body>

<div id="log"></div>

<script>
var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1
$.extend( object1, object2 );

// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( JSON.stringify( object1 ) );
</script>

</body>

结果为：

{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

然而，如果将 true 作为该函数的第一个参数，那么会在对象上进行递归的合并。

<script>
var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1, recursively
$.extend( true, object1, object2 );

// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( JSON.stringify( object1 ) );
</script>

结果为：

{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

合并 defaults 和 options 对象，并且不修改 defaults 对象。这是常用的插件开发模式。

<script>
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };

// Merge defaults and options, without modifying defaults
var settings = $.extend( {}, defaults, options );

// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" );
$( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" );
$( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>" );
</script>

结果为：

defaults -- {"validate":false,"limit":5,"name":"foo"}
options -- {"validate":true,"name":"bar"}
settings -- {"validate":true,"limit":5,"name":"bar"}

转载自理解jquery的 $.extend()、$ .fn和$.fn.extend()

理解jquery的`$.extend()`、`$.fn`和`$.fn.extend()`

jQuery为开发插件提拱了两个方法，分别是：

jQuery.fn.extend();
jQuery.extend();
jQuery.fn

jQuery.fn = jQuery.prototype = {
　　　init: function( selector, context ) {//….
//……
};

原来 jQuery.fn = jQuery.prototype对prototype肯定不会陌生啦。
虽然 javascript　没有明确的类的概念，但是用类来理解它，会更方便。
jQuery便是一个封装得非常好的类，比如我们用语句　$(“#btn1″) 会生成一个 jQuery类的实例。

jQuery.extend(object)

为jQuery类添加类方法，可以理解为添加静态方法。如：

jQuery.extend({
    min: function(a, b) { return a < b ? a : b; },
    max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); //  2 
jQuery.max(4,5); //  5

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

用一个或多个其他对象来扩展一个对象，返回被扩展的对象

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" }

jQuery.fn.extend(object);

对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：

$.fn.extend({          
    alertWhileClick:function() {            
          $(this).click(function(){                 
                 alert($(this).val());           
           });           
     }       
});       
$("#input1").alertWhileClick(); // 页面上为：

$(“#input1”)　为一个jQuery实例，当它调用成员方法 alertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。

jQuery.extend() 的调用并不会把方法扩展到对象的实例上，引用它的方法也需要通过jQuery类来实现，如jQuery.init()，而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法，这是很重要的，在jQuery.js中到处体现这一点

jQuery.fn.extend = jQuery.prototype.extend

你可以拓展一个对象到jQuery的 prototype里去，这样的话就是插件机制了。

(function( $ ){
    $.fn.tooltip = function( options ) {
    };
    //等价于
    var tooltip = {
        function(options){
        }
    };
    $.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})( jQuery );