扩展默认值，选项覆盖一切答案

【问题标题】：extend default, options override everything扩展默认值，选项覆盖一切
【发布时间】：2014-06-25 15:09:36
【问题描述】：

在我的插件中，我想提供完整的 CSS 控件。但是必须声明一些初始值。为了让用户自定义这个初始值，我调用了一个 $.extend 变量，我在其中传递了所有初始 css。

当我尝试覆盖该对象的一个或多个部分时，它将覆盖所有内容，而不仅仅是所选内容。为什么？

为了更清楚，我在http://jsfiddle.net/Hfk79/ 做了一点小改动：

假设这是我的插件：

$.fn.myPlugin = function( options ) {
    var defaults = $.extend({
        pCSS : {
            color: 'red',
            margin: '1em'
        }
    }, options );

    var settings = $.extend( true, {}, defaults, options );

    return this.click(function() {
        $( this ).css( settings.pCSS );
    });
}

用户现在可以覆盖默认选项。让我们假设我是一个讨厌红色并且只希望它是蓝色的用户，并且我对其他属性感觉很好。我会调用传递此选项的函数：

$( document ).ready(function() {
    $( '.plugin' ).myPlugin({
        pCSS: {
            color: 'blue'
        }
    });
});

但是此代码将覆盖所有内容，而不仅仅是颜色！

我哪里做错了？

【问题讨论】：

标签： javascript jquery plugins jquery-plugins options

【解决方案1】：

删除第一个 extend 并删除 pCSS 内部对象有助于：

$.fn.myPlugin = function (options) {
    var defaults = {
        color: 'red',
        margin: '1em'
    };

    var settings = $.extend(true, defaults, options);

    return this.click(function () {
        $(this).css(settings.pCSS);
    });
}

$(document).ready(function () {
    $('.plugin').myPlugin({
        color: 'blue'
    });
});

DEMO

【讨论】：