老师这个插件使用单例 传进去的值是如何更新的呢?

老师这个插件使用单例 传进去的值是如何更新的呢?

$.fn.extend({

        showHide: function (option) {

            return this.each(function () {

                var $this = $(this),

                    options = $.extend({}, defaults, typeof option === 'object' && option),

                    mode = $this.data('showHide');


                if (!mode) {

                    $this.data('showHide', mode = showHide($this, options));

                }


                if (typeof mode[option] === 'function') {

                    mode[option]();

                }

            });

        }

    });


正在回答

登陆购买课程后可参与讨论,去登陆

1回答

你好,可以参考下面解释:

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

如果还有疑问可以继续问题。

祝学习愉快!

  • 0DYT0 提问者 #1
    老师还是不太清除诶 // $box.showHide({ // css3: true, // js: false, // animation: 'slideUpDown' // }); 通过each 第一个值是css3:true,这时候mode获得到,第二个值 js: false,如何更新呢 还是直接是对象一次全部添加到options呢 ,那为什么还要使用each呢,可能会传多个对象进来吗 老师是这样吗?
    2019-04-08 20:10:54
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师