插件不传参数报错
来源：1-12 几个实用的插件介绍-3
倚松听花语
2017-09-02 21:20:52
老师，关于插件不传参数的时候会报错这个问题。
我的想法是添加这部分代码，但是没有什么效果。实在想不出来答案是什么，还请老师告知。
-----添加代码------------------------------------
else if ($.type(method) === null){
return methods.init.apply(this,arguments);
}
---------------------------------------------------
改完后是以下这个样子。
$.fn[namespace] = function (method){
if(methods[method]) {
return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
}else if ($.type(method) === 'object'){
return methods.init.apply(this,arguments);
}else if ($.type(method) === null){
return methods.init.apply(this,arguments);
}else {
$.error('method' + method + ' does not exist!');
}
};
5回答
-
一路电光带火花
2017-09-07
你可以看下这个代码，这个是可以实现的。
(function ($){
$.fn.extend({
"highLight": function (options) {
var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
this.each(function () { //这里的this 就是 jQuery对象
//遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom
//根据参数来设置 dom的样式
$this.css({
backgroundColor: opts.background,
color: opts.foreground
});
});
}
});
//默认参数
var defaluts = {
foreground: 'red',
background: 'yellow'
};
})(window.jQuery);
0 -
倚松听花语
提问者
2017-09-06
不明白。。。
0 -
正在想名字呢
2017-09-04
好像是可以设置一个默认值，调用的时候与默认值一样，就不用传值了~
0 -
倚松听花语
提问者
2017-09-03
在课程【1-13 如何编写一款插件】里，视频老师让我们自己思考一个问题（14:10左右），就是在使用插件时，怎样做到不传参数也能正常使用插件。我想问的就是这个问题的答案。
也就是说， $('p').colorful('init'); 这样使用插件没问题，而$('p').colorful(); 这样使用插件是会出错的。
我想要 $('p').colorful(); 也可以有和 $('p').colorful('init'); 一样的效果。该怎么修改插件的内容？
---HTML部分-------------------------------------------------------------------------------------
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
jakdjlkajdfkljadflkjdlkfjlkdjfklsdajflkasdjflkjasdlkfjdsklaksdjflkjs,
akdjflkajsdlkfjdslakjflaskdjflkasdjflkasdjflkasdjlkfjadslkfjalsdkjflsdj,
kajdflkajsdlkfjaslkdjflsdkjflkdsjflkasdjflkadsjflksdjlkfjdaslkfjds
</p>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="jquery.colorful.js"></script>
<script>
$(function(){
$('p').colorful('init');
// $('p').colorful(); //如果什么都不传，会报错
</script>
</body>
</html>
----插件部分（jquery.colorful.js）-------------------------------------------------------------------------------
// 框架：立即执行函数
(function($){
//设置命名空间：对外暴露的就是这个方法，方便修改名字
var namespace = 'colorful'; //比如直接在这里把名字改为color也可以用了
//定义一个方法，这个方法是一个对象，里面就包含一个方法
var methods = {
init:function(options)
{
//关键1
//通过extend扩展参数，把用户传过来的参数覆盖默认参数
//先把用户设置的参数覆盖默认参数，然后在覆盖到空对象里。通过这种方式把参数申明过来。
options = $.extend({},$.fn[namespace].defaults,options);
//判断参数的值
if(options.font){
this.css('color',options.color);
}
if(options.background){
this.css('background-color',options.color);
}
//关键2
//通过return this,返回jQuery对象本身，实现链式语法
return this;
}
}
//通过命名空间调用方法
//这部分代码比较通用，别的插件也可以直接拿去用
$.fn[namespace] = function (method){
if(methods[method]) {
return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
}else if ($.type(method) === 'object'){
return methods.init.apply(this,arguments);
}else {
$.error('method' + method + ' does not exist!');
}
};
//以下声明默认配置项放到最后，因为$.fn[namespace]还没有定义的话，会报错的
//声明默认配置项：全部变量，方便通过全局修改默认值
$.fn[namespace].defaults = {
color:'red', //默认红色
background:false, //是否修改背景色
font:true //是否修改文字颜色 注意这个不需要用分号
}
// $.fn.colorful.defaults.color = 'xxxx'; //这样就可以修改默认值，不用动插件的代码
})(jQuery);
0 -
一路电光带火花
2017-09-03
看不懂你想问的是啥，或者你可以上传完整代码，我们你也可以运行看看啊~
0
相似问题