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

来源：cnblogs　　作者：奔跑的xqf　　时间：2019/10/25 8:46:44　　对本文有异议

记录一下自己的调试历程

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

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

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

原文链接：http://www.cnblogs.com/xqfffffff/p/11731659.html

友情链接：直通硅谷　点职佳　北美留学生论坛

jQuery热门文章

jQuery推荐文章