如何在 ajax 请求中保持我的代码干燥?
How can i keep my code dry in ajax requests?
如以下代码所示:我正在发送两个相同的 ajax 请求,唯一的区别是一行,我如何将其包装成一个函数以保持我的代码干燥?
$('.searchable').multiSelect({
selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Select reservations ex. \"12\"'>",
selectionHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Remove selected reservations \"'>",
afterInit: function(ms){
var that = this,
$selectableSearch = that.$selectableUl.prev(),
$selectionSearch = that.$selectionUl.prev(),
selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';
that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
.on('keydown', function(e){
if (e.which === 40){
that.$selectableUl.focus();
return false;
}
});
that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
.on('keydown', function(e){
if (e.which == 40){
that.$selectionUl.focus();
return false;
}
});
},
afterSelect: function(value){
$.ajax({
type: 'GET',
url: '/police/get_res_price?price=' + value,
success: function (data) {
var initial_price = parseInt($('.give-me-money').val());
var obj = JSON.parse(data);
$.each(obj, function(booking_price, value) {
initial_price += parseInt(value.BOOKING_PRICE);
});
$('.give-me-money').val(initial_price); //set total
}
});
this.qs1.cache();
this.qs2.cache();
},
afterDeselect: function(value){
$.ajax({
type: 'GET',
url: '/police/get_res_price?price=' + value,
success: function (data) {
var initial_price = parseInt($('.give-me-money').val());
var obj = JSON.parse(data);
$.each(obj, function (booking_price, value) {
initial_price -= parseInt(value.BOOKING_PRICE);
});
$('.give-me-money').val(initial_price); //set total
}
});
this.qs1.cache();
this.qs2.cache();
}
});
将它们包装在一个带有 operationType
参数的函数中。您可以在减法时使用该参数乘以 -1。这样你总是在你的代码中添加,但在取消选择操作时有减去的效果。
$(".searchable").multiSelect({
//selectableHeader etc,
afterSelect: function(value) { selectionChange(value, "select"); },
afterDeselect: function(value) { selectionChange(value, "deselect"); }
});
function selectionChange(value, operationType) {
var bookingPrice;
if(operationType === "deselect") {
bookingPrice = parseInt(value.BOOKING_PRICE) * -1;
} else if(operationType === "select") {
bookingPrice = parseInt(value.BOOKING_PRICE);
}
$.ajax({
type: 'GET',
url: '/police/get_res_price?price=' + value,
success: function (data) {
var initial_price = parseInt($('.give-me-money').val());
var obj = JSON.parse(data);
$.each(obj, function (booking_price, value) {
initial_price += bookingPrice;
});
$('.give-me-money').val(initial_price); //set total
}
});
this.qs1.cache();
this.qs2.cache();
}
var ajaxHandler = function(decrement) {
return function(value){
$.ajax({
type: 'GET',
url: '/police/get_res_price?price=' + value,
success: function (data) {
var initial_price = parseInt($('.give-me-money').val());
var obj = JSON.parse(data);
$.each(obj, function (booking_price, value) {
if (decrement) {
initial_price -= parseInt(value.BOOKING_PRICE);
} else {
initial_price += parseInt(value.BOOKING_PRICE);
}
});
$('.give-me-money').val(initial_price); //set total
}
});
this.qs1.cache();
this.qs2.cache();
}
}
$('.searchable').multiSelect({
// other props
afterSelect: ajaxHandler(false)
afterDeselect: ajaxhander(true)
});
如以下代码所示:我正在发送两个相同的 ajax 请求,唯一的区别是一行,我如何将其包装成一个函数以保持我的代码干燥?
$('.searchable').multiSelect({
selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Select reservations ex. \"12\"'>",
selectionHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Remove selected reservations \"'>",
afterInit: function(ms){
var that = this,
$selectableSearch = that.$selectableUl.prev(),
$selectionSearch = that.$selectionUl.prev(),
selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';
that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
.on('keydown', function(e){
if (e.which === 40){
that.$selectableUl.focus();
return false;
}
});
that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
.on('keydown', function(e){
if (e.which == 40){
that.$selectionUl.focus();
return false;
}
});
},
afterSelect: function(value){
$.ajax({
type: 'GET',
url: '/police/get_res_price?price=' + value,
success: function (data) {
var initial_price = parseInt($('.give-me-money').val());
var obj = JSON.parse(data);
$.each(obj, function(booking_price, value) {
initial_price += parseInt(value.BOOKING_PRICE);
});
$('.give-me-money').val(initial_price); //set total
}
});
this.qs1.cache();
this.qs2.cache();
},
afterDeselect: function(value){
$.ajax({
type: 'GET',
url: '/police/get_res_price?price=' + value,
success: function (data) {
var initial_price = parseInt($('.give-me-money').val());
var obj = JSON.parse(data);
$.each(obj, function (booking_price, value) {
initial_price -= parseInt(value.BOOKING_PRICE);
});
$('.give-me-money').val(initial_price); //set total
}
});
this.qs1.cache();
this.qs2.cache();
}
});
将它们包装在一个带有 operationType
参数的函数中。您可以在减法时使用该参数乘以 -1。这样你总是在你的代码中添加,但在取消选择操作时有减去的效果。
$(".searchable").multiSelect({
//selectableHeader etc,
afterSelect: function(value) { selectionChange(value, "select"); },
afterDeselect: function(value) { selectionChange(value, "deselect"); }
});
function selectionChange(value, operationType) {
var bookingPrice;
if(operationType === "deselect") {
bookingPrice = parseInt(value.BOOKING_PRICE) * -1;
} else if(operationType === "select") {
bookingPrice = parseInt(value.BOOKING_PRICE);
}
$.ajax({
type: 'GET',
url: '/police/get_res_price?price=' + value,
success: function (data) {
var initial_price = parseInt($('.give-me-money').val());
var obj = JSON.parse(data);
$.each(obj, function (booking_price, value) {
initial_price += bookingPrice;
});
$('.give-me-money').val(initial_price); //set total
}
});
this.qs1.cache();
this.qs2.cache();
}
var ajaxHandler = function(decrement) {
return function(value){
$.ajax({
type: 'GET',
url: '/police/get_res_price?price=' + value,
success: function (data) {
var initial_price = parseInt($('.give-me-money').val());
var obj = JSON.parse(data);
$.each(obj, function (booking_price, value) {
if (decrement) {
initial_price -= parseInt(value.BOOKING_PRICE);
} else {
initial_price += parseInt(value.BOOKING_PRICE);
}
});
$('.give-me-money').val(initial_price); //set total
}
});
this.qs1.cache();
this.qs2.cache();
}
}
$('.searchable').multiSelect({
// other props
afterSelect: ajaxHandler(false)
afterDeselect: ajaxhander(true)
});