为什么老师说 delay 是 options 的 没有听懂 ?

为什么老师说 delay 是 options 的 没有听懂 ?

(function ($) {
    'use strict'

    function Dropdown(elem, options) {
        this.$elem = $(elem);
        this.options = options;
        this.$layer = this.$elem.find('.dropdown-layer');
        this.activeClass = options.active + '-active';
        this.$layer.showHide(options);
        var self = this;

        if (options.event === 'click') {
            this.$elem.on('click', function (e) {
                self.show();
                e.stopPropagation();
            });
            $(document).on('click', $.proxy(this.hide, this));

        } else {
            this.$elem.hover($.proxy(this.show, this), $.proxy(this.hide, this));
        }
    };

    Dropdown.DEFAULTS = {
        event: "hover",
        css3: true,
        js: true,
        animation: 'fade',
        delay: 1000,
        active: 'dropdown'
    };



    //作业部分代码修改
    // this.$elem.addClass(this.activeClass);
    //     this.$layer.showHide('show');
    Dropdown.prototype.show = function () {
        var self = this;
        if (this.options.delay) {
            this.timer = setTimeout(function () {
                _show();
            }, this.options.delay);
        } else {
            _show();
        }

        function _show() {
            self.$elem.addClass(self.activeClass);
            self.$layer.showHide('show');
        }

    }

    Dropdown.prototype.hide = function () {
        if (this.options.delay) {
            clearTimeout(this.timer);

        }
        this.$elem.removeClass(this.activeClass);
        this.$layer.showHide('hide');
    };

    // var dropdown = new Dropdown();
    // var dropdown2 = new Dropdown();
    // var dropdown3 = new Dropdown();
    // dropdown.show();
    // dropdown.hide();






    // function dropdown(elem, options) {
    //     var $elem = $(elem),
    //         $layer = $elem.find('.dropdown-layer'),
    //         activeClass = $elem.data('active') + '-active';
    //     // $layer.showHide({
    //     //     css3: true,
    //     //     js: true,
    //     //     animation: 'slideUpDown'

    //     // });  //在这里传参,不方便,易于出错,应该在调用时传参。

    //     $layer.showHide(options);
    //     $elem.hover(function() {
    //         $elem.addClass(activeClass);
    //         $layer.showHide('show');
    //     }, function() {
    //         $elem.removeClass(activeClass);
    //         $layer.showHide('hide');
    //     });

    // }

    // var defaults = {
    //     css3: true,
    //     js: true,
    //     animation: 'slideUpDown'
    // };


    $.fn.extend({
        dropdown: function (option) {
            return this.each(function () {
                var options = $.extend({}, Dropdown.DEFAULTS, $(this).data(), option);
                new Dropdown(this, options);
            });
        }
    });


})(jQuery);

不懂 this.options = options; 这行代码  

为什么这么写了 下面这些代码就能生效  delay 就定义了 

Dropdown.prototype.show = function () {
        var self = this;
        if (this.options.delay) {
            this.timer = setTimeout(function () {
                _show();
            }, this.options.delay);
        } else {
            _show();
        }
        self.$elem.addClass(self.activeClass);
        self.$layer.showHide('show');
        function _show() {
            self.$elem.addClass(self.activeClass);
            self.$layer.showHide('show');
        }

    };

    Dropdown.prototype.hide = function () {
        if (this.options.delay) {
            clearTimeout(this.timer);
        };
        this.$elem.removeClass(this.activeClass);
        this.$layer.showHide('hide');
    };


正在回答

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

1回答

同学你好,this.options = options;写这句可以理解为:把options绑定到实例化对象上。

可以打印看下:

http://img1.sycdn.imooc.com//climg/5e0d98250916ed7111750311.jpg

控制台:

http://img1.sycdn.imooc.com//climg/5e0d983909d22f1f13800333.jpg

如果不写的话,那么控制台打印结果如下:

http://img1.sycdn.imooc.com//climg/5e0d986e095558ad12470352.jpg

没有options是读取不到delay,不能实现效果。

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

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

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

在线咨询

领取优惠

免费试听

领取大纲

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