Question

所以，我正在写一个网络应用程序。几乎所有东西都是在客户端完成的，服务器只是一个RESTful接口。我正在使用jQuery作为我的选择框架，并在Revealing Module Pattern中实现我的代码。

我的代码的线框基本上是这样的：

(function($){
    $.fn.myplugin = function(method)
    {
        if (mp[method])
        {
            return mp[method].apply(this, Array.prototype.slice.call(arguments, 1));
        }
        else if (typeof method === 'object' || ! method)
        {
            return mp.init.apply(this, arguments);
        }
        else
        {
            $.error('Method ' +  method + ' does not exist on $.myplugin');
        }
    };

    var mp =
    {
        init : function( options )
        {
            return this.each(function()
            {
                // stuff
            }
        },
        callbacks : {},
        addCallback : function(hook_name, cb_func, priority)
        {
            // some sanity checking, then push cb_func onto a stack in mp.callbacks[hook_name]
        },
        doCallbacks : function(hook_name)
        {
            if (!hook_name) { hook_name = arguments.callee.caller.name; }
            // check if any callbacks have been registered for hook_name, if so, execute one after the other
        }
    };
})(jQuery);

非常简单，对吧？

现在，我们能够从内部和外部注册（多个，分层）回调。

什么在困扰我：为了让整个事情尽可能具有可扩展性，我不得不采取以下措施：

foo : function() {
    mp.doCallbacks('foo_before');
    // do actual stuff, maybe some hookpoints in between
    mp.doCallbacks('foo_after');        
}

我的应用程序中的每个功能都必须像这样开始和结束。这似乎不对。

那么，JS的巫师是什么呢？

Answer 1

您可以编写一个函数，将另一个函数作为参数，并返回一个新函数，该函数调用该参数的钩子。例如：

function withCallbacks(name, func)
{
    return function() {
        mp.doCallbacks(name + "_before");
        func();
        mp.doCallbacks(name + "_after"); 
    };
}

然后你可以这样写：

foo: withCallbacks("foo", function() {
    // Do actual stuff, maybe some hookpoints in between.
})

Answer 2

我可能没有正确理解这个问题，因为我不知道为什么你不添加代码直接在myplugin代码中调用回调：

$.fn.myplugin = function(method)
{
    if (mp[method])
    {
        var params = Array.prototype.slice.call(arguments, 1), ret;
        // you might want the callbacks to receive all the parameters
        mp['doCallbacks'].apply(this, method + '_before', params);
        ret = mp[method].apply(this, params);
        mp['doCallbacks'].apply(this, method + '_after', params);
        return ret;
    }
    // ...
}

编辑：

好的，在阅读你的评论后，我认为另一种解决方案（当然）是另一种间接方式。也就是说，有一个从构造函数中使用的调用函数以及它们之间的调用的其他公共方法。我想指出它只适用于公共方法，因为附加到私人方法＆＃39;无论如何，钩子破坏了封装。

简单版本将是这样的：

function invoke(method) {
    var params = Array.prototype.slice.call(arguments, 1), ret;
    // you might want the callbacks to receive all the parameters
    mp['doCallbacks'].apply(this, method + '_before', params);
    ret = mp[method].apply(this, params);
    mp['doCallbacks'].apply(this, method + '_after', params);
}

$.fn.myplugin = function() {
   // ...
   invoke('init');
   // ...
};

但是，我实际上写了更多代码，这也会减少插件之间的重复。这就是最终创建插件的方式

(function() {

function getResource() {
    return {lang: "JS"};
}

var mp = NS.plugin.interface({
    foo: function() {
        getResource(); // calls "private" method
    },
    bar: function() {
        this.invoke('foo'); // calls "fellow" method
    },
    init: function() {
        // construct
    }
});

$.fn.myplugin = NS.plugin.create(mp);

})();

这就是部分实现的样子：

NS = {};
NS.plugin = {};

NS.plugin.create = function(ctx) {
    return function(method) {
        if (typeof method == "string") {
            arguments = Array.prototype.slice.call(arguments, 1);
        } else {
            method = 'init'; // also gives hooks for init
        }

        return ctx.invoke.apply(ctx, method, arguments);
    };
};

// interface is a reserved keyword in strict, but it's descriptive for the use case
NS.plugin.interface = function(o) {
    return merge({
        invoke:      NS.plugin.invoke,
        callbacks:   {},
        addCallback: function(hook_name, fn, priority) {},
        doCallbacks: function() {}
    }, o);
};

NS.plugin.invoke = function(method_name) {
    if (method_name == 'invoke') {
        return;
    }

    // bonus (if this helps you somehow)
    if (! this[method]) {
        if (! this['method_missing') {
            throw "Method " + method + " does not exist.";
        } else {
            method = 'method_missing';
        }
    }

    arguments = Array.prototype.slice.call(arguments, 1);

    if (method_name in ["addCallbacks", "doCallbacks"]) {
        return this[method_name].apply(this, arguments);
    }

    this.doCallbacks.apply(this, method_name + '_before', arguments);
    var ret = this[method_name].apply(this, arguments);
    this.doCallbacks.apply(this, method_name + '_after', arguments);

    return ret;
};

当然，这完全没有经过测试：）

Answer 3

您实际上是在实施jQueryUI Widget factory的精简版本。我建议使用该功能，以避免不得不自己滚动。

小部件工厂会自动将字符串映射到方法调用，例如：

$("#foo").myPlugin("myMethod", "someParam")

将以myMethod为参数调用插件实例上的'someParam'。此外，如果您触发自定义事件，用户可以通过向与事件名称匹配的选项添加属性来添加回调。

例如，tabs窗口小部件有一个select事件，您可以通过在初始化期间向选项添加select属性来获取该事件：

$("#container").tabs({
    select: function() {
        // This gets called when the `select` event fires
    }
});

当然，您需要将前后挂钩添加为事件以便能够借用此功能，但这通常会导致更容易维护。

希望有所帮助。干杯！

Answer 4

基本上我更喜欢避免回调和使用事件。原因是simle。我可以添加多个函数来监听给定的事件，我不必乱用回调参数，我不必检查是否定义了回调。只要通过$.fn.myplugin调用所有方法，就可以轻松地在方法调用之前和之后触发事件。

以下是一个示例代码：

(function($){
    $.fn.myplugin = function(method)
    {
        if (mp[method])
        {
            $(this).trigger("before_"+method);
            var res = mp[method].apply(this, Array.prototype.slice.call(arguments, 1));
            $(this).trigger("after_"+method);
            return res;
        }
        else if (typeof method === 'object' || ! method)
        {
            return mp.init.apply(this, arguments);
        }
        else
        {
            $.error('Method ' +  method + ' does not exist on $.myplugin');
        }
    };

    var mp =
    {
        init : function( options )
        {
            $(this).bind(options.bind);
            return this.each(function()
            {
                // stuff
            });
        },

        foo: function() {
            console.log("foo called");
        }
    };
})(jQuery);


$("#foo").myplugin({
    bind: {
        before_foo: function() {
            console.log("before foo");
        },

        after_foo: function() {
            console.log("after foo");
        }
    }
});
$("#foo").myplugin("foo");

用JS / jQuery以编程方式实现回调

4 个答案: