Блог

Я нашел функцию, которую могу использовать в проекте листовки, над которым я работаю. Функция написана на ES6 и отлично работает как в Firefox, так и в Chrome. Однако мне также нужно настроить таргетинг на IE. В ходе моего исследования я обнаружил, что IE в настоящее время не принимает функцию стрелки ES6. Я также обнаружил, что если функция ES6 была преобразована в ES5, функция будет работать в IE. В течение нескольких дней я пытался преобразовать следующую функцию в ES5, но безуспешно. Некоторые из решений, которые я пробовал, были найдены опубликованными здесь. Может кто-нибудь, пожалуйста, взглянуть на мой скрипт и сообщить мне, что я делаю не так. Кроме того, в чем преимущество ES6 в любом случае; более короткий скрипт? Заранее благодарю вас.

Вот рабочий скрипт ES6:

 points.map((p, i) => L.marker(p).bindPopup(`marker${'<strong>'   pointData[i].cityName   '</strong>'   ', '   '</br>'    pointData[i].discrip    "<br /><a class='fancybox-thumb' ' style='width:150px;' rel='fancybox-button'  rel='fancybox-thumb'   data-fancybox-group='"  pointData[i].popup  "'   title='"   pointData[i].discrip   " '  href='graphic/"  pointData[i].popup   "' ><img src='graphic/"   pointData[i].popup   "' alt='Image' ' style='width:150px;' ></a>"   "<br/><a href='http://www.google.com'  target='_blank'>Cedellion Report</a>"}`))
.forEach(function(marker) {
    map.addLayer(marker);
    oms.addMarker(marker);
});
  

Вот моя лучшая попытка / предположение без радости.

 points.map(function(p, i) {
L.marker(p).bindPopup(`marker${'<strong>'   pointData[i].cityName   '</strong>'   ', '   '</br>'    pointData[i].discrip    "<br /><a class='fancybox-thumb' ' style='width:150px;' rel='fancybox-button'  rel='fancybox-thumb'   data-fancybox-group='"  pointData[i].popup  "'   title='"   pointData[i].discrip   " '  href='graphic/"  pointData[i].popup   "' ><img src='graphic/"   pointData[i].popup   "' alt='Image' ' style='width:150px;' ></a>"   "<br/><a href='http://www.google.com'  target='_blank'>Cedellion Report</a>"}`)})
.forEach(function(marker) {
map.addLayer(marker);
oms.addMarker(marker);
});
  

Если у вас есть код ES6 , который вы хотите сделать совместимым с ES5, для переноса синтаксиса вы можете сделать это автоматически с помощью транспилятора, такого как Babel. Подключение вашего кода дает этот результат:

 points.map(function (p, i) {
  return L.marker(p).bindPopup("marker"   ('<strong>'   pointData[i].cityName   '</strong>'   ', '   '</br>'   pointData[i].discrip   "<br /><a class='fancybox-thumb' ' style='width:150px;' rel='fancybox-button'  rel='fancybox-thumb'   data-fancybox-group='"   pointData[i].popup   "'   title='"   pointData[i].discrip   " '  href='graphic/"   pointData[i].popup   "' ><img src='graphic/"   pointData[i].popup   "' alt='Image' ' style='width:150px;' ></a>"   "<br/><a href='http://www.google.com'  target='_blank'>Cedellion Report</a>"));
}).forEach(function (marker) {
  map.addLayer(marker);
  oms.addMarker(marker);
});
  

Вам также нужно было перенести литерал шаблона — объявить строки и объединить с вместо использования ${} синтаксиса. Кроме того, вам нужно было return L.marker... из .map обратного вызова.

Обратите внимание, что это переносит только синтаксис, а не методы — если вы используете методы ES6 (например, Array.prototype.includes ), Babel будет недостаточно — вам нужно либо изменить код вручную, чтобы использовать метод ES5 (например indexOf ), либо, что лучше, включить полизаполнение (пример) для определения методов ES6 на клиентах, просматривающих вашу страницу.

Если функция стрелки просто возвращает одну строку кода, вы можете опустить скобки оператора и ключевое слово return. Это указывает функции стрелки вернуть инструкцию.

Итак, просто добавьте return инструкцию, и она должна сработать

для получения дополнительной информации:https://codeburst.io/javascript-understand-arrow-function-syntax-ab4081bba85b