JQuery组件封装之return this.each(function () {});

摘要：这个时候就要说each了，还是之前的，倘若页面上有N个class为div的元素呢，即：this.length>1，这里each就必然要上场了，且每个对象都要返回，所以此段代码无疑是最方便的写法了

组件封装经常看到这么一段代码

$.fn.plugin = function (options) {
        return this.each(function (i,t) {
            new Fun(this, options)
        });
    }
//组件调用
$(".div").plugin({
    str: ""
})
.css({
     "border": "1px dotted red"
})
.addClass('aaa');

为什么要return为什么要each？

自己调试了一番，发现若没有return，打印$(".div").easySlider({}) 因为这个方法没有返回值所以是undefined，经过return返回，打印$(".div").easySlider({}) 返回当前对象，若为undefined自然就不能够进行.css（）或.addClass等方法调用了

这时候可能又纳闷了，直接return this 不就OK了么？

例如：

$.fn.easySlider = function (options) {
        new ShowLink(this, options)
        return this;
}

这个时候就要说each了，还是之前的，倘若页面上有N个class为div的元素呢，即：this.length>1，这里each就必然要上场了，且每个对象都要返回，所以此段代码无疑是最方便的写法了：

return this.each(function () {
            new ShowLink(this, options)
});

再配合上构造函数以及向对象上添加属性和方法，差不多就是整个封装的流程了。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_6130