扩展jQuery插件并更改默认值
Extending jQuery plugin and changing default values
我有一个名为"myPlugin"的插件,它使用了常用的默认值设计模式,该模式可以在初始化时重写。
我不想在初始化时传递覆盖值,而是想将插件扩展为"myPlugin2",并更改默认值,以便在我启动扩展插件时,它已经具有所需的新默认值。
我曾尝试过在扩展插件中添加新方法,但我不知道如何更改默认值。
换句话说,我希望这两行代码能够提供相同的结果。
$("body").myPlugin({'prop1':'prop1 modified','default_func4':function () {console.log('default_func4 modified')}});
$("body").myPlugin2();
如何扩展jQuery插件并更改默认值?
http://jsfiddle.net/L1ng37wL/2/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
(function ($) {
var defaults = {
'prop1' : 'prop1',
'default_func4' : function () {console.log('default_func4');},
'default_func5' : function () {console.log('default_func5');}
};
var methods = {
init: function (options) {
console.log("init");
console.log('defaults',defaults);
console.log('options',options);
var settings = $.extend({}, defaults, options);
console.log('settings',settings);
console.log('The value of "prop1" is '+settings.prop1);
settings.default_func4.call()
},
func1: function () {console.log("func1");},
func2: function () {console.log("func2");}
};
$.fn.myPlugin = function (method) {
// Method calling logic
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist');
}
};
})(jQuery);
(function ($) {
var methods = {
'func1': function () {console.log("myPlugin2: func1");},
'func3': function () {console.log("myPlugin2: func3");}
}
$.fn.myPlugin2 = function (method) {
//HOW DO I CHANGE defaults.prop1 and defaults.default_func5?????
// Method calling logic
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if ((typeof method === 'object' || !method) && methods.init) {
return methods.init.apply(this, arguments);
} else {
try {
return $.fn.myPlugin.apply(this, arguments);
} catch (e) {
$.error(e);
}
}
}
})(jQuery);
$(function(){
$("body").myPlugin({
'prop1':'prop1 modified',
'default_func4':function () {console.log('default_func4 modified')}
});
$("body").myPlugin2();
//$("body").myPlugin2('func1');
//$("body").myPlugin2('func2');
//$("body").myPlugin2('func3');
});
</script>
</head>
<body>
</body>
</html>
对方法参数的双重检查对我来说有点奇怪,但如果我将try块中的单行替换为下面的代码,它会正常工作,同时仍然允许您为对象提供甚至不同的选项。
var args = arguments;
if (typeof method === 'object' || !method) {
// Fill args with the new defaults.
args = {
'prop1': 'prop1 modified',
'default_func4': function () {
console.log('default_func4 modified')
}
};
$.extend(args, method);
args = [args];
}
return $.fn.myPlugin.apply(this, args);
相关文章:
- 如果值为空,如何设置输入的默认值?jQuery
- jquery日期选择器年份范围默认值
- jQuery Datepicker从日期开始设置默认值
- JQuery BlockUI鼠标加载光标没有't在Google Chrome中返回默认值
- 如何为显示jquery滑块值的文本框设置默认值
- 如何为 jquery 自动完成框设置默认值
- 使用Jquery设置页面加载的默认值(我使用的是multiselect插件)
- JQuery检索数据,但如果退出,则获取默认值
- 修改jQuery脚本,让我选择页面入口的选择列表的默认值
- jQuery Mobile - 为什么将默认值绑定到 mobileinit
- 复选框默认值“选中”,使用 jquery 1.9.1 给出未定义的值
- 为什么不将 jQuery UI 日期选择器的默认值设置为匿名函数
- 在文档加载时使用 JQuery 在下拉字段中设置默认值
- 设置 jQuery 滑块的默认值,并在需要时覆盖
- JQuery 日期选取器设置默认值
- 如何在 jquery 中再次启用防止默认值
- 如何在 jquery 表单中加载时设置默认值
- 无法使用 jQuery 更改输入的默认值属性
- 使用 jQuery 设置选项值以外的默认值
- 选项属性更改默认选定值 - jquery