#javascript #loops #class #object #if-statement
#javascript #циклы #класс #объект #if-statement
Вопрос:
Я использовал цикл для сравнения каждого из значений из двух разных объектов’. Потому что, когда я хочу изменить переменные, этот способ более прост и удобочитаем, чем просто использовать massive if if if … для сравнения всех значений 1 к 1 каждый раз.
Это код:
// Get values from the default and options
var defaultValues = Object.values(this.getDefaults),
newValues = Object.values(this.options);
// Used loop for counting every single values from the Objects'
var checkDef = defaultValues.reduce((acc, cur) => acc cur),
checkNew = newValues.reduce((acc, cur) => acc cur);
// Compare between those 2 different variables.
if (checkDef === checkNew) {
console.log('true');
setInterval(() => {
this.runAnimate(this.initial[1], 1)
}, this.getDefaults.countdown);
} else {
console.log('false');
setInterval(() => {
this.runAnimate(this.initial[1], 1)
}, this.options.countdown);
}
но как бы я написал код, когда, если я хочу запустить другое function на основе других условий?
Сначала я попытался создать оператор new if , но это вызвало бы ненужную проверку (буквально, двойную проверку), поскольку я сравнил все значения, используя цикл выше. Таким образом, предоставление другого if просто полностью тратит imo.
// Give another if to compare a specific condition
if (this.getDefaults.skew === this.options.skew) {
// ... execute function1
else {
// ... execute function2
}
Неизбежно ли давать другое if утверждение для сравнения конкретных значений в моем случае?
==== Обновление хода выполнения ====
Моя цель — когда вызываемое значение pcSwipe равно true , запустить mousedown, swipeMove, swipeEnd функцию с помощью executed $el.on({mousedown: ... }) . но, как я уже сказал в комментарии, mousedown функция выполняется несколько раз по номерам условий, сколько каждое из значений находится true между getDefaultValues и options . И это приводит к тем же способам mobile . оно перемещается в 7 раз подряд (потому что true равно 7), когда вы проводите пальцем по экрану мобильного оператора.
(function ($, window, undefined) {
class Slider {
// Get the default values
get getDefaults() {
const defaults = {
autoSlide : true,
countdown : 4000,
direction : "left",
display : 1,
loop : true,
pcSwipe : false,
verticle : false,
skew : true,
}
return defaults;
}
constructor(options, initial) {
this.getDefaults;
this.initial = initial;
this.initial[0].css({left: -100 '%'});
this.options = Object.assign(this.getDefaults, options);
}
// Swipe Event for PC
mousedown(e) {
console.log('text');
e.stopPropagation();
}
swipeMove(e) {
}
swipeEnd(e) {
}
// Swipe Event for Mobile
mdtouchStart(e) {
this.coordX = e.touches[0].clientX;
this.coordY = e.touches[0].clientY;
return this.coordX, this.coordY;
}
mdtouchMove(e, initial) {
var tx = e.touches[0].clientX,
ty = e.touches[0].clientY,
dist = Math.sqrt(tx this.coordX);
}
mdtouchEnd(e, initial, defaults) {
var dist = e.changedTouches[0].clientX - this.coordX,
flood;
if (dist > 200) {
flood = -1;
this.runAnimate(this.initial[1], flood);
} else if (dist < -200) {
flood = 1;
this.runAnimate(this.initial[1], flood);
} else {
console.log('do nothing');
}
console.log(dist, this.initial[1]);
e.stopPropagation();
}
// Set the function
runAnimate(frame, direction) {
if (!this.initial[1].is(':animated')) {
this.initial[0].stop(true, true).animate({
left: '-=' (direction * 100) '%'
}, () => {
this.initial[4] = direction;
if (this.initial[4] > this.initial[5]) {
this.initial[4] = 1;
this.initial[0].css({
left: -100 '%'
});
} else if (this.initial[4] == 0) {
this.initial[4] = this.initial[5];
this.initial[0].css({
left: (this.initial[5] * (-100)) '%'
});
}
})
}
}
// Execute Method
exe($el, initial, getDefaults) {
console.log('no.4');
// Distract values from the default and options
Object.keys(this.getDefaults).forEach(key => {
if (this.getDefaults[key] == this.options[key]) {
$el.on({
mousedown : (e) => this.mousedown(e),
onmousemove : (e) => this.swipeMove(e),
onmouseup : (e) => this.swipeEnd(e, initial, getDefaults)
});
} else {
$el.on({
touchstart: (e) => this.mdtouchStart(e),
touchmove : (e) => this.mdtouchMove(e),
touchend : (e) => this.mdtouchEnd(e, initial, getDefaults)
});
}
});
// Compare between those 2 different value bundles
// var checkDef = defaultValues.reduce((acc, cur) => acc cur),
// checkNew = newValues.reduce((acc, cur) => acc cur);
// if (checkDef === checkNew) {
// console.log('true');
// setInterval(() => {
// this.runAnimate(this.initial[1], 1)
// }, this.getDefaults.countdown);
// } else {
// console.log('false');
// setInterval(() => {
// this.runAnimate(this.initial[1], 1)
// }, this.options.countdown);
// }
}
}
$.fn.bluSlider = function(options) {
return this.each(function() {
const $el = $(this);
const initials = [
myFrame = $el.find('.wrap'),
myItems = myFrame.find('a'),
myCloneFirst = myItems.first().before(myItems.last().clone()),
myCloneLast = myItems.last().after(myItems.first().clone()),
myCount = 1,
myLength = myItems.length
];
var Proto = new Slider(options, initials);
Proto.exe($el);
})
}
}(jQuery));
$('.inline-grid').bluSlider({
skew: false,
}) <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
html, body
{
background-color: black;
}
.span2 {
color: blue;
}
div {
position: relative;
}
.inline-grid, .inline-grid2, .inline-grid3 {
margin: 0 auto;
width: 560px;
border: 7px solid teal;
display: flex;
flex-flow: row;
overflow: hidden;
}
.wrap {
width: 100%;
display: flex;
flex-flow: row;
}
.cell {
display: flex;
flex-flow: column;
flex-shrink: 0;
width: 100%;
height: 200px;
}
.orange {
background-color: orange;
}
.blue {
background-color: blue;
}
.crimson {
background-color: crimson;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div id="slider" class="inline-grid">
<div class="wrap">
<a href="#" class="cell orange">
</a>
<a href="#" class="cell blue">
</a>
<a href="#" class="cell crimson">
</a>
<a href="#" class="cell green">
</a>
</div>
</div>
<br><br>
<div id="slider2" class="inline-grid2">
<div class="wrap">
<a href="#" class="cell orange">
</a>
<a href="#" class="cell blue">
</a>
<a href="#" class="cell crimson">
</a>
<a href="#" class="cell green">
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html> Ответ №1:
Вы можете перебирать все свойства:
Object.keys(this.getDefaults).forEach(key => {
if (this.getDefaults[key] == this.options[key]) {
// execute function1
} else {
// execute function2
}
});
Комментарии:
1. Таким образом, функция выполняет многократно столько значений, сколько имеет
getDefaults. Я пытался добавить методы touch, и это выполнялось 7 раз одним щелчком мыши.2. Возможно, я неправильно понял вопрос. Я думал, вы хотите проверять каждое значение, но не писать много
ifоператоров.3. Вы правильно поняли. Возможно, мне нужно поместить весь код в вопрос для большей наглядности.
4. Да, пожалуйста, добавьте больше кода, чтобы показать, что вы пытаетесь сделать.
5. В опубликованном вами коде содержится мой ответ, но вы сказали, что это неверно. Покажите свой код, который демонстрирует, что вы пытаетесь сделать.