Делают основную вёрстку и в неё добавляют отдельные компоненты (каталог с фильтрами, слайдеры, галереи товара) ?
Или же сразу вся страница вместе с вёрсткой изначально это какой то глобальный компонент ? И уже в нём отдельные "подкомпоненты" ?
Как компоненты взаимодействуют друг с другом (меняют состояние друг друга)? Через глобальный/родительский компонент ?
const arr = [1,1,1,1,1, 3,3,3,3,3, 5,5 ,6,6,6, 7,7,7,7,7];
const calc = arr.reduce((prev, curr) => {
const idx = prev.findIndex(item => item.val === curr);
if (idx !== -1) {
return ++prev[idx].count && prev;
} else {
return prev.push({ val: curr, count: 1 }) && prev;
}
}, []);
const max = Math.max(...calc.map(i => i.count));
const result = calc.filter(i => i.count === max).map(i => i.val);
console.log(result); // [1, 3, 7]const result = {};
const list = {
"action_buttons[0]": "View",
"action_buttons[1]": "Share",
"action_buttons[2]": "Download",
"columns[0]": "Date of Study",
"columns[1]": "Patient",
"columns[2]": "File name",
"columns[3]": "Reporting <br>Physician",
"columns[4]": "Institution"
};
Object.keys(list).forEach(key => {
const value = list[key];
const combinedKey = key.replace(/\[.+\]/, '');
if (Array.isArray(result[combinedKey])) {
result[combinedKey].push(value);
} else {
result[combinedKey] = [value];
}
});
console.log(result);const list = document.querySelectorAll('.elem');
let pool = [...list];
let counter = 0;
animate();
function animate(index = 0) {
setTimeout(() => {
if (!pool.length) {
pool = [...list];
counter = 0;
}
const current = pool.shift();
list[index - 1] && (list[index - 1].style.backgroundColor = 'white');
current.style.backgroundColor = 'red';
animate(++counter);
}, 1000);
}export default function Reducer(state = initialState, action) {
switch (action.type) {
case RESET_TYPE_ID:
return {
...state,
filter_models: {
...state.filter_models,
type_id: null
}
};const filters = _.pickBy(filterSet, _.identity); @import 'custom';
@import '~bootstrap/scss/bootstrap';
@import 'main';$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1920px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1200px,
xxl: 1918px
);
$colors: (
blue: #1799d3,
pink: #e20073
);
$theme-colors: (
primary: #1799d3,
pink: #e20073
);
$body-color: #444;
$line-height-base: 1.2;app.use(async (req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE");
res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
next();
});<button id="sort" type="button">Sort</button>
<br><br>
<div id="body">
<div class="listing-item" data-event-date="2017-05-02">2017-05-02</div>
<div class="listing-item" data-event-date="2018-01-07">2018-01-07</div>
<div class="listing-item" data-event-date="2017-06-05">2017-06-05</div>
<div class="listing-item" data-event-date="2018-01-03">2018-01-03</div>
<div class="listing-item" data-event-date="2017-08-08">2017-08-08</div>
</div>const items = [...document.querySelectorAll('.listing-item')];
function compare(a, b) {
const aData = new Date($(a).data('event-date'));
const bData = new Date($(b).data('event-date'));
if (aData < bData) {
return -1;
}
if (aData > bData) {
return 1;
}
return 0;
}
$('#sort').on('click', () => {
items.sort(compare);
$('#body').empty();
items.forEach(item => {
$('#body').append(item);
});
});