Я пытаюсь понять, как я могу сделать это быстрее и умнее, вместо того, чтобы использовать две функции map
для прокрутки моего массива магазинов и найти как активное хранилище для вывода на мою страницу, так и вывести список всех других магазинов, кроме активный один вывод в моем выпадающем списке.
Использование map
похоже, увеличивает время загрузки выпадающего списка.
Функция (function() { some code }
как показано в моем коде ниже, по-прежнему должна выполнять сама по соображениям безопасности. Поэтому любая оптимизация кода или идей для оптимизации была бы замечательной!
<div class="dropdown">
<button type="button" class="dropbtn" id="active-store">
</button>
<ul id="country-list" class="dropdown-content">
</ul>
</div>
<script type="text/javascript">
const $ = {
getJSON(url, callback) {
callback([{
NAME: 'China',
URL: 'example.org',
FLAG_CODE: 'cn',
}, {
NAME: 'Denmark',
URL: 'example.org',
FLAG_CODE: 'dk',
}, {
NAME: 'Germany',
URL: 'example.org',
FLAG_CODE: 'de',
}, {
NAME: 'Global',
URL: 'example.org',
FLAG_CODE: 'eu',
}, {
NAME: 'Hong Kong',
URL: 'example.org',
FLAG_CODE: 'hk',
}, {
NAME: 'India',
URL: 'example.org',
FLAG_CODE: 'in',
}, {
NAME: 'Japan',
URL: 'example.org',
FLAG_CODE: 'jp',
}, {
NAME: 'Portugal',
URL: 'example.org',
FLAG_CODE: 'pt',
}, {
NAME: 'Singapore',
URL: 'example.org',
FLAG_CODE: 'sg',
}, {
NAME: 'South Korea',
URL: 'example.org',
FLAG_CODE: 'kr',
}, {
NAME: 'UAE',
URL: 'example.org',
FLAG_CODE: 'ae',
} {
NAME: 'United Kingdom',
URL: 'example.org',
FLAG_CODE: 'gb',
}, {
NAME: 'Development',
URL: 'example.org',
FLAG_CODE: 'eu',
}]);
}
};
(function() {
var output = document.getElementById('country-list'); // element to append country list to
var active = document.getElementById('active-store'); // element to append active store to
var active_store = "{{- host -}}"; // current active store url
var storesArray = []; // stores array
$.getJSON('/stores', function(stores){
storesArray = stores;
active.innerHTML = stores.map(store => {
if (store.URL === active_store ) {
return '<img src="{{ 'blank.gif' | asset_url }}" class="flag flag-${ store.FLAG_CODE }"/>
<span class="active-store">${ store.NAME }</span>
<span id="arrow"></span>'
}
}).join('');
output.innerHTML = stores.map(store => {
if (store.URL != active_store ) {
return '<li>
<a href="${ store.URL }" alt="${ store.NAME }">
<img src="{{ 'blank.gif' | asset_url }}" class="flag flag-${ store.FLAG_CODE }"/>
<span>${ store.NAME }</span>
</a>
</li>'
}
}).join('');
});
})();
</script>
Я думаю, вы можете сделать это в одном для цикла вместо двух карт
let activeArray=[];
let outputArray =[];
stores.forEach((store)=>{
if (store.URL === active_store ) {
activeArray.push(
'<img src="{{ 'blank.gif' | asset_url }}"
class="flag flag-${ store.FLAG_CODE }"/>
<span class="active-store">${ store.NAME }</span>
<span id="arrow"></span>');
}else {
outputArray.push(
'<li>
<a href="${ store.URL }" alt="${ store.NAME }">
<img src="{{ 'blank.gif' | asset_url }}" class="flag flag-${ store.FLAG_CODE }"/>
<span>${ store.NAME }</span>
</a>
</li>'
);
}
});
active.innerHTML = activeArray.join('');
output.innerHTML = outputArray.join('');
store.forEach
было только исправить небольшую опечатку изstore.forEach
вstores.forEach
.