Javascript 扩展默认值,选项覆盖所有内容
在我的插件中,我想提供完整的css控件。但是必须声明一些初始值。为了让用户自定义这个初始值,我调用了一个$.extend变量,在这个变量中我传递了所有的inilial css 当我试图覆盖该对象的一个或多个部分时,它将覆盖所有内容,而不仅仅是所选内容。为什么? 为了更清楚,我在这里做了一点小提琴: 让我们假设这是我的插件:Javascript 扩展默认值,选项覆盖所有内容,javascript,jquery,plugins,jquery-plugins,options,Javascript,Jquery,Plugins,Jquery Plugins,Options,在我的插件中,我想提供完整的css控件。但是必须声明一些初始值。为了让用户自定义这个初始值,我调用了一个$.extend变量,在这个变量中我传递了所有的inilial css 当我试图覆盖该对象的一个或多个部分时,它将覆盖所有内容,而不仅仅是所选内容。为什么? 为了更清楚,我在这里做了一点小提琴: 让我们假设这是我的插件: $.fn.myPlugin = function( options ) { var defaults = $.extend({ pCSS : {
$.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'
}
});
});
但是,此代码将覆盖所有内容,而不仅仅是颜色
我哪里做错了?删除第一个
extend
并删除pcs
内部对象有助于:
$.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'
});
});