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

$.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://fly63.com/article/detial/6130