Javascript jQuery插件与方法&；全局回调_Javascript_Jquery_Json_Jquery Plugins_Callback

Javascript jQuery插件与方法&；全局回调

javascript jquery json jquery-plugins

Javascript jQuery插件与方法&；全局回调,javascript,jquery,json,jquery-plugins,callback,Javascript,Jquery,Json,Jquery Plugins,Callback,我想创建一个既有方法又有回调的jQuery插件，方法可以工作，但回调无法工作，回调的范围让我困惑 (function($) { var methods = { create: function(options) { var defaults = { width: 320, height: 240, background: '#000',

我想创建一个既有方法又有回调的jQuery插件，方法可以工作，但回调无法工作，回调的范围让我困惑

(function($)
{
    var methods = {

        create: function(options) {

            var defaults = {
                width: 320,
                height: 240,
                background: '#000',
                onstop: function(){}
            };

            var options = $.extend(defaults, options);

            return $(this).each(function(i) {

                console.log('create');

            });

        },
        stop: function(options) {

            var defaults = {
                onstop: function(){}
            };

            var options = $.extend(defaults, options);

            return $(this).each(function(i) {

                console.log('stop');
                options.onstop.call();

            });
        }
    };

    $.fn.myplugin = function(option) {

        if (methods[option]) {
            return methods[option].apply( this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof option === 'object' || ! option) {
            return methods.create.apply(this, arguments);
        } else {
            $.error('Method ' +  option + ' does not exist in jQuery.plugin');
        }    
    };

})(jQuery);

所以在

中：

基本上，我想让onstop:function（）{}成为插件的全局函数

/*=======更新的代码（请参阅注释）===========*/

(function($)
{

    var callbacks = {
        onready: $.Callbacks("once memory unique").add(function() {
            //console.log('onready');
        }),
        ondeny: $.Callbacks("unique").add(function() {
            //console.log('ondeny');
        }),
        onerror: $.Callbacks("unique").add(function() {
            //console.log('onerror');
        }),
        onstop: $.Callbacks("unique").add(function() {
            //console.log('onstop');
        })
    };

    var methods = {

        construct: function(){
        },
        create: function(options) {

            var defaults = {
                width: 320,
                height: 240,
                background: '#000',
                onready: function(){},
                onstop: function(){}
            };

            var options = $.extend(defaults, options);

            return this.each(function(i, elements) {

                for (var prop in options) {
                    if (prop in callbacks) {
                        callbacks[prop].add(options.prop);
                    }
                }

                callbacks.onready.fire();

            });

        },
        stop: function() {

            return this.each(function(i, elements) {
                callbacks.onstop.fire();
            });
        }
    };

    $.fn.myplugin = function(option) {

        if (methods[option]) {
            return methods[option].apply( this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof option === 'object' || ! option) {
            return methods.construct.apply(this, arguments);
        } else {
            $.error('Method ' +  option + ' does not exist in jQuery.plugin');
        }    
    };

})(jQuery);

我建议使用一些成熟的对象：

现在，当你得到一些新的选择时，你可以这样做

for (var prop in options)
    if (prop in callbacks)
        callbacks[prop].add(options[prop]);

要调用它们，请执行以下操作

callbacks.onstop.fire(/*args*/);

或者，如果您关心回调的上下文，请使用。

我使用globalOptions变量将插件初始化选项存储为全局

这里有两个文件可以测试并用作模板

jquery.plugin.js （函数（$）{

index.html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Example</title>
        <script src="jquery.min.js"></script>
        <script src="jquery.plugin.js"></script>
        <script>
$(document).ready(function() {

    var myElement = $('.container').myPlugin({
        color: '#555',
        backgroundColor: '#ddd',
        oncreate: function(){
            console.log('Callback: create');
        },
        onchangecolor: function(){
            console.log('Callback: onchangecolor');
        },
        onloadpage: function(page){
            console.log('Callback: onloadpage = '+page);
        }
    });

    $('.color').click(function(event){
        myElement.myPlugin('changeColor');
    });

    $('.page').click(function(event){
        myElement.myPlugin('loadPage', { page: '#test' });
    });

});
        </script>
    </head>
    <body>
        <div class="container">
            <button class="color">changeColor</button> <button class="page">loadPage</button>
        </div>
    </body>
</html>


例子
$（文档）.ready（函数（）{
var myElement=$（'.container'）.myPlugin({
颜色：'#555'，
背景颜色：“#ddd”，
oncreate:function（）{
log（'Callback:create'）；
},
onchangecolor:function（）{
log（'Callback:onchangecolor'）；
},
onloadpage：函数（第页）{
log（'Callback:onload页面='+页面）；
}
});
$（'.color'）。单击（函数（事件）{
myElement.myPlugin（'changeColor'）；
});
$（'.page'）。单击（函数（事件）{
myElement.myPlugin（'loadPage'，{page:'#test'}）；
});
});
更改颜色加载页

如果有人有更好的方法和添加“private”方法，请分享。：）

回调应该由插件的用户设置，不是吗？我想让它们作为选项保持可访问性起初这似乎可行，但我忘了我有另一个控制台。log（），我很好奇“once memory unique”和“unique”是什么我添加了回调，比如onready:$.callbacks（“onready”）.add（function（）{console.log（'onready'）；}），我还将它们作为选项添加到了“create”方法中，但它们目前似乎没有启动。仍然在处理它……好吧，我发现了“unique”的问题诸如此类。将代码更新为我现在拥有的代码，但回调仍然不会启动。

$（'#start'）。单击（function（）{$（'#myvideo'）.myplugin（'create'，{onready:function（）{console.log（'on ready！'）；}，onstop:function（）{console.log（'on stop！'）；}）

这不会注销，修复了循环中向回调添加函数的一个小问题。顺便说一句，我不确定是否要将应用插件的每个元素的回调分开，因为您不能使用静态

回调

对象。在

中添加回调也是毫无用处的。每个-loop，因为它们只会在没有unique标志的情况下再次添加。
callbacks.onstop.fire(/*args*/);

    var pluginName = 'myPlugin';

    var globalOptions = '';

    var methods = {

        create: function(options) {

            var defaults = {
                backgroundColor: '#000',
                color: '#fff',
                oncreate: function(){},
                onchangecolor: function(){},
                onloadpage: function(page){}
            };

            globalOptions = $.extend(defaults, options);

            return $(this).each(function(i, elements) {

                $(elements).data('globalOptions', globalOptions);

                globalOptions.oncreate();

            });

        },
        changeColor: function(){

            return $(this).each(function(i, elements) {

                globalOptions = $(elements).data('globalOptions');
                if (!globalOptions) { $.error('Error: ' + pluginName + ' has not been initialized yet'); return false; }

                $(this).css('background-color', globalOptions.backgroundColor);
                $(this).css('color', globalOptions.color);

                globalOptions.onchangecolor();

            });
        },
        loadPage: function(options){

            return $(this).each(function(i, elements) {

                globalOptions = $(elements).data('globalOptions');
                if (!globalOptions) { $.error('Error: ' + pluginName + ' has not been initialized yet'); return false; }

                globalOptions.onloadpage(options.page);
                location.href = options.page;

            });
        }

    };

    $.fn.myPlugin = function(option) {

        if (methods[option]) {
            return methods[option].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof option === 'object' || ! option) {
            return methods.create.apply(this, arguments);
        } else {
            $.error('Error: Method "' + option + '" does not exist in ' + pluginName);
            return false;
        }    
    };

})(jQuery); 

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Example</title>
        <script src="jquery.min.js"></script>
        <script src="jquery.plugin.js"></script>
        <script>
$(document).ready(function() {

    var myElement = $('.container').myPlugin({
        color: '#555',
        backgroundColor: '#ddd',
        oncreate: function(){
            console.log('Callback: create');
        },
        onchangecolor: function(){
            console.log('Callback: onchangecolor');
        },
        onloadpage: function(page){
            console.log('Callback: onloadpage = '+page);
        }
    });

    $('.color').click(function(event){
        myElement.myPlugin('changeColor');
    });

    $('.page').click(function(event){
        myElement.myPlugin('loadPage', { page: '#test' });
    });

});
        </script>
    </head>
    <body>
        <div class="container">
            <button class="color">changeColor</button> <button class="page">loadPage</button>
        </div>
    </body>
</html>