Пиксельный аргумент в функции и обратном вызове с исходными аргументами

Question

Как передать обратный вызов функции и этой функции для вызова обратного вызова с исходными аргументами callee (но замените первый аргумент на результат)?

У меня есть этот пример:

this.createImage: function(base64, callback) { 
var img = new Image(); 
img.src = base64; 
img.onLoad = function() { 
    callback(this); // I also want to pass position here (this + arbitrary number of arguments) 
} 
} 

this.addToCanvas: function(item, position) { 

    if(!this.isImage(item)) { // assume `isImage()` check if item is Image, & skips if true 
    var item = this.createImage(item, this.addToCanvas); 
    return; 
    } 

    item.position = position; 
    // Supposedly here I am certain that image is an Image() and not a 
    // base64 string 
} 

Поэтому в основном я задаюсь вопросом, как я могу иметь createImage для обратного вызова addToCanvas, но вместо того, чтобы с оригинальным position прошел, но item нашли место загруженного img.

---

Идея заключается в том, чтобы быть в состоянии назвать addToCanvas() либо с Image или base64 String и все еще быть в состоянии преобразовать внутренне если необходимо.

Однако я хотел бы еще раз использовать createImage() с другими функциями, которые должны быть вызваны с другим (произвольным) числом аргументов. Мне интересно, можно ли не пара вышеуказанные функции вместе.

Answer 1

Я бы предложил использовать только локальную функцию.

Если данные уже являются изображениями, вы сразу вызываете локальную функцию, которая обрабатывает ее. Если это еще не изображение, вы конвертируете его в изображение, а затем вызываете локальную функцию из обратного вызова.

Поскольку локальная функция имеет доступ ко всем аргументам, переданным в исходный вызов функции, это решает эту часть вашей проблемы без необходимости передавать какие-либо специальные аргументы. Это также одна из замечательных особенностей Javascript (функции имеют доступ ко всем их родительским аргументам):

this.createImage = function (base64, callback) { 
    var img = new Image(); 
    img.onLoad = function() { 
     callback(img); 
    } 
    img.src = base64; 
} 

this.addToCanvas = function (item, position) { 

    function addIt(img) { 
     // we know that img is an actual image here so you can process it now 
     img.position = position; 

     // other processing of the image here ... 
    } 

    if (!this.isImage(item)) { 
     // have to make it an image before addIt 
     this.createImage(item, addIt); 
    } else { 
     // already an image, can call addIt now 
     addIt(item); 
    } 

} 

Answer 2

Ваш поиск приложение с частичным аргументом. Это функциональный метод программирования: В чистом JavaScript, вы могли бы сделать это следующим образом:

var that = this; // necessary because this has another vaue inside the wrapper function 
var item = this.createImage(item, function(x) { 
    return that.addToCanvas(x, position) 
}); 

// here you are passing a wrapper function, that 'waits' for an x to be passed in order to call finally addToCanvas, with x and position. 

img.onLoad = function() { 
    callback(this); // this goes into the above's x 
} 

---

То же самое с использованием функциональной библиотеки как underscore.js будет выглядеть более элегантно, как следует:

var item = this.createImage(item, _.partial(this.addToCanvas, _, position));