Javascript在执行任何对象方法时触发自定义方法

时间:2014-09-30 15:12:58

标签: javascript jquery javascript-events

我有一个对象,其原型添加了一些方法:

var MyClass = function() {
    this.name = '';
    this.innerData = [];
    this._callbacks = {};
};
MyClass.prototype.add = function(data) {
    this.innerData.push(data);
};
MyClass.prototype.remove= function(data) {
    //This part is working
    for (var i=0; i < this.innerData.length; i++) {
        if (this.innerData[i].desc === desc) {
            this.innerData.splice(i, 1);
        }
    }
};
MyClass.prototype.on = function(evname, callback) {
    if (!this._callbacks[evname]) {
        this._callbacks[evname] = $.Callbacks();
    }
    this._callbacks[evname].add(callback);
};

我想要做的是一种触发_callbacks对象中加载的任何方法的方法,而不需要在我的类的所有方法中做一个丑陋的“if(methodIsBound(method)){....”。

例如:

var c = MyClass();
c.on('add', function() { console.log("Adding data"); });
c.add(someData);
c.add(someData2);

到目前为止,我尝试在任何方法中添加一个检查,询问该方法是否在回调中注册,但这很麻烦,因为我需要添加if的任何新方法(不属于该方法功能),如果任何其他开发人员想要添加功能,他/她将不得不知道其他代码。

我在纯JS和Jquery中检查过自定义事件,但我绝对不明白如何做。

有没有人有想法? 谢谢!

1 个答案:

答案 0 :(得分:0)

类似的东西(在FIREFOX上测试)? 我们的想法是在MyClass.prototype中使用任何方法并将其包装在一个调用回调然后调用原始方法的函数中。所以每次调用方法时,都会调用保存的回调,这是你需要的吗?

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="utf-8" />
    <title>Untitled</title>

<script>

var MyClass = function() {
    this.name = '';
    this.innerData = [];
};
MyClass.prototype.add = function(data) {
    this.innerData.push(data);
};
MyClass.prototype.remove= function(data) {
    //This part is working
    for (var i=0; i < this.innerData.length; i++) {
        if (this.innerData[i].desc === desc) {
            this.innerData.splice(i, 1);
        }
    }
};
MyClass.prototype.on= function(fname,callback) {

    var originalFunction=MyClass.prototype[fname];
    var givenCallback=callback;

    MyClass.prototype[fname]=function() {

       givenCallback.call();
       var args = Array.prototype.slice.call(arguments);

       originalFunction.apply(this,args);
    }
};

var c = new MyClass();
c.on('add', function() { console.log("Adding data"); });
c.add("aaa");
c.add("bbb");

</script>
</head>
<body>

</body>
</html>

<强>更新

Whith&#34;修复&#34;参数和&#34;这个&#34;传递给回调:

MyClass.prototype.on= function() {
    var onArgs = Array.prototype.slice.call(arguments);

    var originalFunction=MyClass.prototype[onArgs[0]];
    var givenCallback=onArgs[1];

    var callbackArgs=onArgs.slice(2);

    MyClass.prototype[onArgs[0]]=function() {

       var args = Array.prototype.slice.call(arguments);

       givenCallback.apply(this,callbackArgs);
       originalFunction.apply(this,args);
    }
};

var c = new MyClass();
c.on('add', function(a,b) { console.log("Adding data '"+a+"',"+b+" obj:"+this); },"called add",1);
c.add("aaa");
c.add("bbb");

FIDDLE:http://jsfiddle.net/mgcr0jxj/2/