Что произойдет, если строки шаблона Javascript не поддерживаются в браузере? [Дубликат]
Я считаю, что принятый ответ здесь слишком сложный для большинства случаев использования. Этот код хорошо выполняет работу (используя JQuery) и различает полностью видимые и частично видимые элементы.
var element = $("#element");
var topOfElement = element.offset().top;
var bottomOfElement = element.offset().top + element.outerHeight(true);
var $window = $(window);
$window.bind('scroll', function() {
var scrollTopPosition = $window.scrollTop()+$window.height();
var windowScrollTop = $window.scrollTop()
if( windowScrollTop > topOfElement && windowScrollTop < bottomOfElement) {
// Element is partially visible (above viewable area)
console.log("Element is partially visible (above viewable area)");
}else if( windowScrollTop > bottomOfElement && windowScrollTop > topOfElement ) {
// Element is hidden (above viewable area)
console.log("Element is hidden (above viewable area)");
}else if( scrollTopPosition < topOfElement && scrollTopPosition < bottomOfElement ) {
// Element is hidden (below viewable area)
console.log("Element is hidden (below viewable area)");
}else if( scrollTopPosition < bottomOfElement && scrollTopPosition > topOfElement ) {
// Element is partially visible (below viewable area)
console.log("Element is partially visible (below viewable area)");
}else{
// Element is completely visible
console.log("Element is completely visible");
}
});
2 ответа
Вы не можете использовать инструкцию try ... catch, чтобы уловить синтаксические ошибки, потому что они выкидываются еще до того, как выполняется код.
Вам либо нужно отказаться от поддержки браузеров, которые не поддерживают шаблонные литералы или использовать Babel.
Как правило, вы можете использовать eval для подтверждения, если браузер поддерживает некоторые изменения синтаксиса:
var isTemplateSupported = true;
try {
eval("``");
}
catch(e) {
isTemplateSupported = false;
}
console.log("Supports Template Literals", isTemplateSupported);
Итак, для вашей реализации:
var template;
try {
template = eval("`<section class=\"imageGalleryItem\">`".....);
}
catch(e) {
if(e instanceof SyntaxError) {
template = '<section class="imageGalleryItem">' + ...
}
}
Но намного проще использовать транспилер, потому что было бы утомительно поддерживать две реализации каждый раз, когда вам нужен литерал.
-
1– Josiah 24 May 2016 в 13:17