решил поэкспериментировать с Proxy
canvas = new Proxy({
testVar: 100,
test: function(n){return n + this.testVar},
canvas: document.createElement("canvas"),
//stroke: function(){return this.canvas.getContext("2d").stroke()} // если это раскомментировать -- работает
},
{
get: function(target, message){
var context, object
switch(true) {
case message in target: context = target; break
case message in target.canvas.style: context = target.canvas.style; break
case message in target.canvas.getContext("2d"): context = target.canvas.getContext("2d");
}
if(!context) return
object = context[message]
if(typeof object !== "function") return object
return function(){return object.apply(context, arguments)}
},
set: function(target, message, value){
var context
switch(true) {
case message in target: context = target; break
case message in target.canvas.style: context = target.canvas.style; break
case message in target.canvas.getContext("2d"): context = target.canvas.getContext("2d");
}
if(!context) return
return context[message] = value
}
})
console.log( canvas.test(10) ) // just test
document.body.appendChild(canvas.canvas)
canvas.border = "2px solid black"
canvas.moveTo(0, 0)
canvas.lineTo(10, 10)
canvas.stroke()
Фича эта выглядит очень многообещающе. Кратко о коде. Смысл такой, что ищется поле в 3-х объектах, то есть, это типа объединение, чтобы не писать лишней лапши, eg вместо canvas.canvas.style.border = "foo bar baz" canvas.border = "foo bar baz".
Все работает, кроме последней строки. Пишет что stroke is not a function. Кажись там пустая строка. Собственно непонятно, почему moveTo и lineTo нормально находит, а stroke — нет? C костылем который закомментирован в таргет работает, но это фигня, если так писать, придется все проверять, профит теряется.
ЗЫ тестил на FF и хроме на XP
