首页 > jquery插件问题。

jquery插件问题。

我看到好多插件的返回格式都是这样的:

return this.each(function (i, el) {
    // do something
    $el = $(el);
    // ...
});

为什么习惯性的以return这种形式返回呢?因为去掉return这个关键词也是可行的。
还是说each返回的是this,这么写可以保证链式写法?


对的,我这几天也在纠结这个问题,现在大概明白是怎么回事了。举个官方的例子吧,比如我这里定义了一个插件:

    (function ($) {
        $(document).ready(function () {
            $.fn.greenify = function () {
                return this.css('color','green');
            };
        })
    })(jQuery)

然后HTML页面上有这么些内容:

<body>
<a>This is label a</a><br/>
<a><b>This is bold!!!</b>This is another label a</a>
</body>

这个插件的作用就是改变jquery对象的字体颜色为绿色,这个不难理解吧(๑•ᴗ•๑)你的问题是为什么要写上return,不写也可以呀?确实不return也可以,假如这里我们把return去掉,然后在chrome里面跑一下,本来是这样的:

切换到console里面,输入:

$('a').greenify();

你看,颜色都变咯:

现在我觉得字体太小了,想改大一点,怎么办呀?试试链式调用.css()呗,于是在console里输入:

$('a').greenify().css('fontSize','40px');

纳尼!!怎么报错啊?

当然报错了,因为你调用greenify以后根本就没有返回什么呀,就返回一个undefined,你用undefined.css()能不报错嘛?

所以这里就是使用return的好处,它让代码返回了一个jQuery对象,这个对象也就是this,它拥有jQuery对象封装好的全部方法,所以你对返回的jquery对象再调用.css()之类的jQuery方法时候,当然就没问题啦(∩_∩)

下面我们加上return,试试看:

你看,这时候就返回了一个jQuery对象,我们可以对这个对象进行一系列操作啦:

看,这样不就成功更改字体大小了嘛~~~~这就是所谓的chainable吧,即可以链式调用。

以上都是我最近几天学习的心得,绕了不少弯路啊T.T如果有写的不对的地方,还请各位大牛批评指正哈(≧▽≦)/

如果觉得我的文章对你有帮助的话,请点赞哦,嘻嘻:D


是的 jquery 插件为了保存jquery 的链式 结构 所以需要用到return this

看看stackflow的说法

【热门文章】
【热门文章】