有几点不理解的地方

$.fn.extend({
  showHide:function(option){
   // 这里用each遍历的原因：因为到时候使用这个方法的不只一个对象，而是一堆对象，我们用数组传入，遍历数组绑定方法
   return this.each(function(){
    var $this = $(this),
     // 这里用typeof是为了判断传入的是对象还是字符串，如果是对象则执行后面的语句
     // 这个方法是将defaults和options合并到{}中
     options = $.extend({},defaults,typeof option === 'object' && option),
     mode = $this.data('showHide');//这句话不理解

    // 初始化时mode
    if (!mode) {
     $this.data('showHide',mode = showHide($this,options));
    }
    // 如果mode里面传入的不是对象，而是一个字符串，而且这个字符串是函数名，如'show'，则调用这个动画
    if (typeof mode[option] === 'function') {
     mode[option]();
     console.log('传入的是字符串');
    }
   })
  }
})

关于mode的这几句代码都没能够理解

见信 2019-04-17

源自：实战：电商网站下拉菜单 2-11 将显示隐藏封装成模块--完善

收起

1回答

好帮手慕星星回答被采纳获得+3积分 2019-04-17 17:56:45

同学你好，

1、其实这里主要使用的是data()方法，此方法向被选元素附加数据，或者从被选元素获取数据。

获取数据的时候通过数据名称就可以获取：

这里的意思就是通过data方法获取数据，如果数据不存在，就设置一下数据，下次获取的时候就有了，mode是调用showHide方法返回出来的对象：

2、

这段代码的意思是通过传入的option参数，在mode对象中判断属性值是否是函数，如果是的话就调用这个函数，参数是在html中调用传入的：

匹配mode对象中的show和hide方法。

自己可以再测试理解下，祝学习愉快！

收起回答

见信提问者 #1

后面我又看了看，想了想，应该是我对它的运行时感动有些晕，具体的跟data这块应该没什么关系。 $.fn.extend({ showHide:function(option){ // 这里用each遍历的原因：因为到时候使用这个方法的不只一个对象，而是一堆对象，我们用数组传入，遍历数组绑定方法 return this.each(function(){ var $this = $(this), // 这里用typeof是为了判断传入的是对象还是字符串，如果是对象则执行后面的语句 // 这个方法是将defaults和options合并到{}中 options = $.extend({},defaults,typeof option === 'object' && option), // 获取名为showHide的data mode = $this.data('showHide'); // 因为mode一开始为空，当第一次调用这个函数时，执行里面的代码，后面有值了就不会调用了 if (!mode) { $this.data('showHide',mode = showHide($this,options)); console.log('传入的是对象'); } // 这里是根据传入的函数名执行其函数 if (typeof mode[option] === 'function') { mode[option](); console.log('传入的是字符串'); } }) } }) /*我们写了一个showHide方法在$原形上，每一个jquery对象都有这个方法，更符合模块化的概念。这个方法可以是一个对象调用，也可以是一群对象进行调用。当对这个方法进行调用的时候，如果传入的是一个对象，那么这个对象用来描述使用什么样的动画，如果传入的是一个函数名，则调用的是对应的方法*/ })(jQuery);

2019-04-17 18:51:15
好帮手慕星星回复提问者见信 #2

同学能够自己消化理解这部分代码是很棒的哦，继续加油~

2019-04-17 19:16:10