记录一下自己的调试历程
组件封装经常看到这么一段代码
- $.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)
- });
再配合上构造函数以及向对象上添加属性和方法,差不多就是整个封装的流程了。