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

再配合上構造函數以及向對象上添加屬性和方法，差很少就是整個封裝的流程了。