在 jquery 插件中使用 return on [重复]答案

【问题标题】：use of return on in jquery plugin [duplicate]在 jquery 插件中使用 return on [重复]
【发布时间】：2014-06-13 07:30:22
【问题描述】：

我正在 jquery 中构建一个基本插件。即使没有在插件中使用 return，该插件也可以正常工作，但在 jquery 站点上，他们使用 return 创建插件。所以我只想知道插件中的 return 需要什么。 Fiddle

$.fn.abc= function(options){    
     var settings = $.extend({
    // These are the defaults.
    width: "50px",
    borderLeft: "solid 1px #cecece"
    }, options );

    this.width(150)

    this.find('ul').each(function(i,elem){
        console.log(elem)       
        $(elem).css({width:settings.width})

    })      

}

【问题讨论】：

你不需要返回任何东西，在 jquery 中它们返回对象本身用于链接目的。例如：.stop().css().show()
这真的取决于你的功能的目的。如果您需要对它产生的价值做一些事情，那么您可能想要返回它。如果它没有产生任何价值，或者你不需要任何不返回任何东西的东西也可以。
你真的不需要在实际上不是关于JSFiddle的问题上添加jsfiddle标签，@Tripp

标签： javascript jquery

【解决方案1】：

return 用于链接，你创建的插件不需要返回任何东西，但你可能想创建两个将链接在一起的插件，你没有返回任何东西，

$('div').abc().css("background":"red");

不会工作..

回答你的问题，

var el= this.find('ul').each(function(i,elem){
    console.log(elem)       
    $(elem).css({width:settings.width})

});
return el;

http://jsfiddle.net/Nm93a/2/

这样我可以返回所有元素而不是做

 return this.find('ul').each(function(i,elem){
            console.log(elem)       
            $(elem).css({width:settings.width})

        });

http://jsfiddle.net/Nm93a/1/

这两个代码的工作方式相似，使用 jquery 的优势方法是编写更少的代码

，这些小东西让jquery成为一个轻量级的库

【讨论】：

我知道链接，但我的问题是为什么我们需要对每个函数使用 return 而不是我们可以在函数结束时返回它
两者是相似的，当您返回每个元素时，您编写的代码更少，而不是为返回所有元素编写单独的语句。
编辑了我的代码希望对您有所帮助..

【解决方案2】：

这是使用链接，没有返回你不能做这样的事情：

$('.element').hide().show().css({width:200}).animate({height:100}),

相反，您每次都必须重写选择器

$('.element').hide();
$('.element').show();
$('.element').css({width:200});
$('.element').animate({height:100});

【讨论】：

很好的答案，乔纳斯。我冒昧地将“串联”更改为“链接”，因为这是常用的术语。
没问题，感谢指正
很高兴为您提供帮助。我真的很喜欢你用你的例子来说明这个概念的方式。
但我的问题是为什么我们需要对每个函数使用 return 而不是我们可以在函数结束时返回它
不，你的问题是：“所以我只想知道在插件中需要返回什么。”。无论如何，我想不出每次都返回它或返回一个jQuery元素集合之间有什么大的区别。实际上，由于您的插件最有可能获取元素集合，因此我认为返回集合也是可行的方法。

【解决方案3】：

我假设你的意思是这样的

$.fn.plugin = function() {
    var settings = $.extend({
        width: '50'
    }, options);

    // return statement here?
    return this.find('ul').each(function(i, el){
        console.log(el);
    })
}

如果是这样，通过添加return，您允许链接。它返回传递给方法（可以进一步传递）的 jQuery 对象（带有上下文）。

【讨论】：

【解决方案4】：

return 用于在函数完成时返回一个值...假设我有一个非常基本的 JavaScript 函数：

addNums = function(value1, value2){
  return value1 + value2;
}

然后我要做这样的事情：

alert( addNums(4, 4) );

这将返回8，因为：

return value1 + value2;

【讨论】：