我正在开发一个API客户端,允许在提供foo
的ID时调用特定的API方法,如下所示:
apiClient.myApiMethod('myFooId', 'firstApiArg', 'nthApiArg');
为方便开发人员,我尝试实现自定义代理对象:
var myFoo = apiClient.registerFoo('myFoo', 'myFooId');
myFoo.myApiMethod('firstApiArg', 'nthApiArg');
在搜索了一段时间之后,我认为ES6代理可能最适合它,因为fooId
需要作为方法调用的第一个参数插入以支持两种工作方式。
因此,我创建了以下代码。如果调用Foo.myFoos
的对象属性(例如Foo.myFoos.example
),则在_myFooItems
中搜索它,如果它存在,则返回另一个Proxy对象。
现在,如果在 对象上调用方法,则会在Foo
的属性中搜索该方法,如果找到,则使用Foo
调用myFooId
方法作为第一个论点
这意味着,您应该能够Foo.myFoos.example.parentMethodX('bar', 'baz')
。
var Foo = function() {
// parent instance
_self = this;
// custom elements dictionary
_myFooItems = {};
// to call parent methods directly on custom elements
this.myFoos = Object.create(new Proxy({}, {
// property getter function (proxy target and called property name as params)
get: function(target, myFooName) {
// whether called property is a registered foo
if (_myFooItems.hasOwnProperty(myFooName)) {
// create another proxy to intercept method calls on previous one
return Object.create(new Proxy({}, {
// property getter function (proxy target and called property name as params)
get: function(target, methodName) {
// whether parent method exists
if (_self.hasOwnProperty(methodName)) {
return function(/* arguments */) {
// insert custom element ID into args array
var args = Array.prototype.slice.call(arguments);
args.unshift(_myFooItems[ myFooName ]);
// apply parent method with modified args array
return _self[ methodName ].apply(_self, args);
};
} else {
// parent method does not exist
return function() {
throw new Error('The method ' + methodName + ' is not implemented.');
}
}
}
}
));
}
}
}
));
// register a custom foo and its ID
this.registerFoo = function(myFooName, id) {
// whether the foo has already been registered
if (_myFooItems.hasOwnProperty(myFooName)) {
throw new Error('The Foo ' + myFooName + ' is already registered in this instance.');
}
// register the foo
_myFooItems[ myFooName ] = id;
// return the created foo for further use
return this.myFoos[ myFooName ];
};
};
module.exports = Foo;
虽然如果运行代码并尝试注册foo
会发生什么(上面的代码在Node> = 6.2.0中工作),是否会引发以下错误:
> var exampleFoo = Foo.registerFoo('exampleFoo', 123456)
Error: The method inspect is not implemented.
at null.<anonymous> (/path/to/module/nestedProxyTest.js:40:31)
at formatValue (util.js:297:21)
at Object.inspect (util.js:147:10)
at REPLServer.self.writer (repl.js:366:19)
at finish (repl.js:487:38)
at REPLServer.defaultEval (repl.js:293:5)
at bound (domain.js:280:14)
at REPLServer.runBound [as eval] (domain.js:293:12)
at REPLServer.<anonymous> (repl.js:441:10)
at emitOne (events.js:101:20)
在花了很多时间考虑为什么第二个代理甚至试图调用一个方法,如果没有给它,我最终放弃了。我希望exampleFoo
成为一个代理对象,如果被调用则接受Foo
方法
是什么导致了这里的实际行为?
答案 0 :(得分:3)
我认为你根本不应该使用代理。假设您的API具有可怕的
openUploadDialog() {
if (this.dialog) {
this.dialog.instance.openModal();
return;
}
this._resolver.resolveComponent(MyDialog).
then(factory => {
const injector = ReflectiveInjector.fromResolvedProviders([],
this._container.injector);
this.dialog = this._container.createComponent(
factory, null, injector, []);
});
}
那么实现你所期待的最简洁的方法是
class Foo {
…
myApiMethod(id, …) { … }
… // and so on
}
这样你就可以了
const cache = new WeakMap();
Foo.prototype.register = function(id) {
if (!cache.has(this))
cache.set(this, new Map());
const thisCache = cache.get(this);
if (!thisCache.get(id))
thisCache.set(id, new IdentifiedFoo(this, id));
return thisCache.get(id);
};
class IdentifiedFoo {
constructor(foo, id) {
this.foo = foo;
this.id = id;
}
}
Object.getOwnPropertyNames(Foo.prototype).forEach(function(m) {
if (typeof Foo.prototype[m] != "function" || m == "register") // etc
return;
IdentifiedFoo.prototype[m] = function(...args) {
return this.foo[m](this.id, ...args);
};
});
答案 1 :(得分:1)
首先,我不确定代理模式是处理问题的最有效和最干净的方式,但它当然应该可行。
我看到的第一个问题是你的实际测试试图在Foo原型(类)本身上调用registerFoo
,而你只为Foo
的实例定义了它。所以你必须先创建一个实例,如下所示:
var foo = new Foo();
var exampleFoo = foo.registerFoo('exampleFoo', 123456);
然后要完成测试,你必须调用一个应该存在的方法。所以为了测试它,我会添加Foo
这样的东西:
// Define an example method on a Foo instance:
this.myMethod = function (barName /* [, arguments] */) {
var args = Array.prototype.slice.call(arguments);
return 'You called myMethod(' + args + ') on a Foo object';
}
虽然不是问题,但我认为没有必要在Object.create
上应用new Proxy(...)
,因为后者已经创建了一个对象,我认为使用它作为原型没有好处直接使用它作为你的对象。
所以通过这些微小的调整,我得到了这个代码,它似乎在浏览器中产生了正确的结果(在这里使用FireFox):
var Foo = function() {
// parent instance
_self = this;
// example method
this.myMethod = function (barName /* [, arguments] */) {
var args = Array.prototype.slice.call(arguments);
return 'You called myMethod(' + args + ') on a Foo object';
}
// custom elements dictionary
_myFooItems = {};
// to call parent methods directly on custom elements
this.myFoos = new Proxy({}, {
// property getter function (proxy target and called property name as params)
get: function(target, myFooName) {
// whether called property is a registered foo
if (_myFooItems.hasOwnProperty(myFooName)) {
// create another proxy to intercept method calls on previous one
return new Proxy({}, {
// property getter function (proxy target and called property name as params)
get: function(target, methodName) {
// whether parent method exists
if (_self.hasOwnProperty(methodName)) {
return function(/* arguments */) {
// insert custom element ID into args array
var args = Array.prototype.slice.call(arguments);
args.unshift(_myFooItems[ myFooName ]);
// apply parent method with modified args array
return _self[ methodName ].apply(_self, args);
};
} else {
// parent method does not exist
return function() {
throw new Error('The method ' + methodName + ' is not implemented.');
}
}
}
});
}
}
});
// register a custom foo and its ID
this.registerFoo = function(myFooName, id) {
// whether the foo has already been registered
if (_myFooItems.hasOwnProperty(myFooName)) {
throw new Error('The Foo ' + myFooName + ' is already registered in this instance.');
}
// register the foo
_myFooItems[ myFooName ] = id;
// return the created foo for further use
return this.myFoos[ myFooName ];
};
};
// Test it:
var foo = new Foo();
var exampleFoo = foo.registerFoo('exampleFoo', 123456);
var result = exampleFoo.myMethod(13);
console.log(result);