jQuery自定义组件编写

/*
 * 自定义的组件demo
 * date: 2018-08-13
 * content: 
 *  1. 下拉组件
 *  2. 弹框组件
 */

;(function($, window, document, undefined) {
    // 下拉组件框架
    var DropDown = function(element) { // 定义DropDown对象
        this.$element = $(element); // 对象的属性 $element
        $('body').find('div.dropdown').remove(); // 移除已经存在的对象，防止出现多个
        this.$div = $('<div class="dropdown"></div>');
    }

    // 加入属性
    DropDown.prototype.html = function(html) { // 方法1： html 参数： html
        this.$div.empty();

        //css
        var x = this.$element.offset().left; // 组件的位置与传入的元素有关
        var y = this.$element.offset().top;
        var height = this.$element.outerHeight();
        this.$div.css({
            'position': 'absolute',
            'left': x,
            'top': y + height,
            'z-index': '999',
            'display': 'none',
            'background-color': '#fff',
            'box-shadow': '-1px 1px 4px rgba(0,0,0,0.15)',
            'padding': '3px 0',
            'border': '1px solid #CACACA'
        });
        this.$div.append(html);
        $('body').append(this.$div);
    }

    DropDown.prototype.open = function() {
        this.$div.show();
    }

    DropDown.prototype.close = function() {
        this.$div.hide();
    }

    DropDown.prototype.getInnerElement = function() {
        return this.$div;
    }

    $.fn.dropdown = function(option, object) {
        var args = Array.prototype.slice.call(arguments, 1); // arguments为系统默认的函数的参数集
        var returnValue = this;
        this.each(function() {
            var $this = $(this),
                data = $this.data('self.dropdown');
            //  option = typeof option === 'object' && option;

            if (!data) 
                $this.data('self.dropdown', (data = new DropDown(this)));

            if (option === 'html')
                returnValue = data[option].apply(data, args) || returnValue; // apply的第二个参数为参数数组，call的第二个参数为具体的参数，可以有多个
            else if (typeof option === 'string') 
                returnValue = data[option].apply(data, args) || returnValue;

        });
        return returnValue;
    };
})(jQuery, window, document);

// 调用
$(ele).dropdown('html', '<label>fuck</label>');
$(ele).dropdown('open');
$(ele).dropdown('close');
$(ele).dropdown('getInnerElement');

参考：
参考1