Как извлекать функции анноним javascript

Я определил функцию javascript javascript в отдельном файле:

function setupSlider($, url) {
 genImgUrl = url + '/gensvg/';
 $("#slider").slider({
 min : -2000,
 max : 2000,
 value : 0,
 change : function(event, ui) {
 $('#svgImg').hide();
 $.ajax({
 type : "POST",
 url : genImgUrl,
 ...
 },
 slide : function(event, ui) {
 var v = 50;
 ...
 $('#value').text(ui.value).css('left', (v - 0.5) + '%');
 }
 });
 $('#min').text($('#slider').slider('option', 'min'));
 $('#max').text($('#slider').slider('option', 'max'));
};

Я хотел бы отделить функции для опции change и slide в определенной функции changeAction и slideAction. Но у меня проблемы с моими параметрами $, genImgUrl и event параметров слайдера jquery, ui. Как вы сливаете их? Вам нужна функция связывания, правильно?

Благодарю!

4 ответа

Вы могли бы сделать что-то вроде:

function getChangeAction(url) {
 var imgUrl = url;
 return function(event, ui) {
 $('#svgImg').hide();
 $.ajax({
 type : "POST",
 url : imgUrl,
 ...
 }
}

function slideAction(event, ui) {
 var v = 50;
 ...
 $('#value').text(ui.value).css('left', (v - 0.5) + '%');
}

function setupSlider($, url) {
 genImgUrl = url + '/gensvg/';
 $("#slider").slider({
 min : -2000,
 max : 2000,
 value : 0,
 change : getChangeAction(genImgUrl),
 slide : slideAction
 }
 });
 $('#min').text($('#slider').slider('option', 'min'));
 $('#max').text($('#slider').slider('option', 'max'));
};

Таким образом, вы передадите genImgUrl в область изменения-обратного вызова. event и ui передаются при вызове, а $ объявляется глобальным.


Просто объявите их вложенными, так что у вас все еще есть доступ к области $ и genImgUrl.

function setupSlider($, url) {
 var genImgUrl = url + '/gensvg/';
// ^^^ this was supposed to be local I guess
 function onchange(event, ui) {
 $('#svgImg').hide();
 $.ajax({
 type : "POST",
 url : genImgUrl,
 …
 }
 function onslide(event, ui) {
 var v = 50;
 …
 $('#value').text(ui.value).css('left', (v - 0.5) + '%');
 }
 $("#slider").slider({
 min: -2000,
 max: 2000,
 value: 0,
 change: onchange,
 slide: onslide 
 });
 $('#min').text($('#slider').slider('option', 'min'));
 $('#max').text($('#slider').slider('option', 'max'));
}

Это - за исключением имен функций - в точности эквивалентных тому, что делает ваш код.


поэтому вы хотите использовать его так:

function changeAction(event, ui, url) { // write in global scope
 $('#svgImg').hide();
 $.ajax({
 type: "POST",
 url: url, // this gets updated when setupSlider gets called.
 ...
 });
}

function slideAction(event, ui) { // write in global scope
 var v = 50;...
 $('#value').text(ui.value).css('left', (v - 0.5) + '%');
}

function setupSlider($, url) {
 var genImgUrl = url + '/gensvg/'; // declare with var keyword here.
 $("#slider").slider({......
 change: function(event, ui){ changeAction(event, ui, genImgUrl); }, //<--pass it here
 slide: slideAction // <----and here
 });
 $('#min').text($('#slider').slider('option', 'min'));
 $('#max').text($('#slider').slider('option', 'max'));
};


Это то, что я получаю:

function setupSlider(url) {
 $("#slider").slider({
 min : -2000,
 max : 2000,
 value : 0,
 change : changeAction(url),
 slide : slideAction
 });
 $('#min').text($('#slider').slider('option', 'min'));
 $('#max').text($('#slider').slider('option', 'max'));
 $('#middle').text(0);
};

function changeAction(url) {
 var genImgUrl = url + '/gensvg/';
 return function(event, ui) {
 $('#svgImg').hide();
 $.blockUI();
 $.ajax({
 type : "POST",
 url : genImgUrl,
 data : {
 year : ui.value
 },
 success : function(imageName) {
 var i = $('').attr('src', genImgUrl + imageName).load(
 function() {
 $('#svgImg').attr('src', i.attr('src'));
 $('#svgImg').fadeIn();
 $.unblockUI();
 });
 },
 error : function(jqXHR, textStatus, errorThrown) {
 $.unblockUI();
 alert("error status " + textStatus);
 },
 dataType : "text"
 });
 };
}

function slideAction(event, ui) {
 var v = 50;
 if (ui.value > 0) {
 v = (ui.value / 40) + v;
 }
 if (ui.value < 0) {
 v = v - (Math.abs(ui.value) / 40);
 }
 $('#value').text(ui.value).css('left', (v - 0.5) + '%');
}

Благодаря Флориану

licensed under cc by-sa 3.0 with attribution.