请问如何编写一个面向对象的jQuery插件?

Question

我编写的插件代码如下

(function (window, document, Math) {
    var MyPlugin = function(ele,options){
        this.element = ele;
        this.defaults = {
            'anime' : true,
            'callback' : {
                'after' : '',
                'before' : ''
            }
        };
        this.opts = $.extend({},this.defaults,options);
    }
    MyPlugin.prototype = {
        Start:function(){
            console.log('start');
            return true;
        }
    }
})(window, document, Math);

我使用

var MP = new Myplugin();

会一直提示

ReferenceError: Can't find variable: Myplugin

怎么办,是我哪里写错了吗..

Answer 1

没有把Myplugin暴露出去，可以在闭包的最后面加上window.Myplugin = Myplugin

Answer 2

。。。

想编写jquery插件你至少得百度一下jquery插件编写规则吧

再不济js你得熟悉吧。

你上面的代码，在匿名函数中定义的MyPlugin，外部肯定拿不到MyPlugin，你的MyPlugin要通过jquery的extend合并或者挂载到jquery.fn吧

我给你个简单的示例代码你看一下吧。

https://github.com/lscho/popu...

Answer 3

收藏已久的jQuery插件开发教程
好用请好评！

Answer 4

/**提示框插件**
 **config: msg(显示提示消息 String),
 **bgcolor(提示框背景颜色 String),
 **fade(是否自动隐藏boolean),
 **second(自动隐藏时间int),
 **togglespeed(提示框显示隐藏过渡时间)
 **时间单位 : 秒
 **可用接口 : destroy**/
;(function($) {
    var Mesgbox = function(ele, opt) {
        this.$element = ele,
            this.defaults = {
                msg: "msg",
                bgcolor: "#AAD7FF",
                fade: true,
                second: 3,
                togglespeed: 0.2
            },
            this.setting = $.extend({}, this.defaults, opt),
            this.creatMsgbox = function() {
                var boxClass = "infos_box";
                var boxDesc = "infos_desc";
                var defaultBoxCss = {
                    "position": "fixed",
                    "display": "none",
                    "bottom": "5%",
                    "width": "80%",
                    "z-index": "50",
                    "left": "50%",
                    "margin-left": "-40%",
                    "padding": "0px",
                    "box-sizing": "border-box",
                    "background": "#AAD7FF",
                    "border-radius": "10px",
                    "-webkit-border-radius": "10px"
                };
                var defaultDescCss = {
                    "width": "100%",
                    "position": "relative",
                    "text-align": "center",
                    "vertical-align": "middle",
                    "font-size": "0.4rem",
                    "font-weight": "600",
                    "color": "#000000",
                    "display": "block",
                    "padding-top":"1vh",
                    "padding-bottom":"1vh"

                };
                var msgs = " ";
                var box = {};
                msgs = "<div class='" + boxClass + "'><p class='" + boxDesc + "'></p></div>";
                box.boxClass = boxClass;
                box.boxDesc = boxDesc;
                box.msgs = msgs;
                box.defaultBoxCss = defaultBoxCss;
                box.defaultDescCss = defaultDescCss;
                return box;
            }
    }
    Mesgbox.prototype = {
        init: function() {
            var t;
            var msgbox;
            var $this = this;
            msgbox = this.creatMsgbox();
            if (!this.$element.has("." + msgbox.boxClass).length) {
                this.$element.append(msgbox.msgs);
            }
            $("." + msgbox.boxDesc).css(msgbox.defaultDescCss).text(this.setting.msg);
            $("." + msgbox.boxClass).css(msgbox.defaultBoxCss).css({
                "background": $this.setting.bgcolor
            }).fadeIn("" + $this.setting.togglespeed * 1000 + "", function() {
                if ($this.setting.fade) {
                    clearTimeout(t);
                    t = setTimeout(function() {
                        $(".infos_box").fadeOut("" + $this.setting.togglespeed * 1000 + "");
                    }, $this.setting.second * 1000);
                }
            });
            var obj = $("." + msgbox.boxClass);
            return obj;
        },
        destroy: function(opt) {
            if ($(opt).length) {
                $(opt).remove();
            } else {
                $.error("Dom " + opt + " is not exist");
            }
        }
    }
    $.fn.msgbox = function(options) {
        var box = new Mesgbox(this, options); //实例化
        if (box[options]) {
            return box[options].apply(this, Array.prototype.slice.call(this, arguments));
        } else if (typeof options === 'object' || !options) {
            return box.init();
        } else {
            $.error("Method " + options + " is not exist on jQuery.msgbox");
        }
    }
})(jQuery)

Answer 5

1、拼写错误：var MP = new Myplugin() 应该是 var MP = new MyPlugin();
2、没有传入jQuery;
3、在匿名函数中定义的构造函数需要挂载到window或者自己的命名空间中。

(function (window, document, Math, $) {
    var MyPlugin = function(ele,options){
        this.element = ele;
        this.defaults = {
            'anime' : true,
            'callback' : {
                'after' : '',
                'before' : ''
            }
        };
        this.opts = $.extend({},this.defaults,options);
        console.log( this.opts.anime );
    }
    MyPlugin.prototype = {
        Start:function(){
            console.log('start');
            return true;
        }
    }
    window.MyPlugin = MyPlugin;
})(window, document, Math, jQuery);