javascript - 请问如何编写一个面向对象的jQuery插件?
PHP中文网
PHP中文网 2017-04-11 13:14:54
0
5
282

我编写的插件代码如下

(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

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

PHP中文网
PHP中文网

认证0级讲师

모든 응답 (5)
PHPzhong

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

    Peter_Zhu

    。。。

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

    再不济js你得熟悉吧。

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

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

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

      伊谢尔伦

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

        刘奇
        /**提示框插件** **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 = "

        "; 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)
          Ty80

          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);
            최신 다운로드
            더>
            웹 효과
            웹사이트 소스 코드
            웹사이트 자료
            프론트엔드 템플릿
            회사 소개 부인 성명 Sitemap
            PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!