老师，能不能给我讲一下这个显示封装的思路

同学你好，

可以参考如下代码注释，进行理解哈。

 $.fn.extend({
        //在jq原型上扩展一个方法，对外可以直接调用showHide
        //方法中有一个参数
        showHide: function(option) {
            //将调用方法的元素进行循环遍历，有可能是多个元素
            return this.each(function() {
                // 将循环的每一个元素赋值给$this变量
                var $this = $(this),
                    // 检测传入的参数option是否是一个对象，如果是的话，和默认的参数default合并成一个对象，再赋值给options参数，也就是下面的参数：
                    // $box.showHide({
                    //     css3: true,
                    //     js: false,
                    //     animation: 'slideUpDown'
                    // });
                    options = $.extend({}, defaults, typeof option === 'object' && option),
                    // 通过data方法获取showHide属性值
                    mode = $this.data('showHide');
 
                //如果开始mode没有值的话，也就是undefined，说明元素之前没有使用data添加过这个属性
                if (!mode) {
                    //使用data方法添加上showHide属性，属性值是调用showHide方法返回出来的一个对象，里面有两个方法
                    // return {
                    //     show: $.proxy(mode.show, this, $elem),
                    //     hide: $.proxy(mode.hide, this, $elem)
                    // };
                    $this.data('showHide', mode = showHide($this, options));
                }
                //如果mode有值，说明已经添加过这个属性了，通过传入的参数也就是mode对象的属性名检测是否是一个函数，如果是的话调用这个方法即可，也就是下面的传参:
                //  $('#btn-hide').on('click', function() {
 
                //     $box.showHide('hide');
 
                // });
 
                if (typeof mode[option] === 'function') {
                    mode[option]();
                }
            });
        }
    });

组件化开发本就是企业级开发思想和流程重点部分，同学一定要多听，多练哈。

如果我的回答帮助了你，欢迎采纳，祝学习愉快~