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

记录一下自己的调试历程

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

$.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)
        });

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