2015-01-24 2 views
1

Я хотел бы спросить, если есть какая-либо существенная проблема разница/производительность для обнаружения с помощью следующих двух методов:Modernizr Функция обнаружения с v3

Допустим, мы тестируем для 3D-преобразования.

Используя новую функцию, которая Modernizr 3 предложения:

Modernizr.on('csstransforms3d', function(result) { 
    if (result) { 
    element.className = 'myFirstClass'; 
    } 
    else { 
    element.className = 'mySecondClass'; 
    } 
}); 

И со стандартным способом:

if (Modernizr.csstransforms3d) { 
    element.className = 'myFirstClass'; 
} else { 
    element.className = 'mySecondClass' 
} 

ответ

1

Modernizr.on функция только (или в основном) для асинхронного обнаруживает и отсроченные действия. См. full explanation and example от @stucox для получения более подробной информации.

csstransforms3d не является асинхронным и доступен прямо сейчас. Не было бы оснований использовать метод для вызова события on. Функция довольно неэффективна при вызовах setTimeout(), которые не подходят для производительности.

Используйте только on для отложенных events на асинхронных обнаружении.

1

Они не являются действительно сопоставимы, поскольку в зависимости от ситуации, всегда будет лучше чем другие. Производительность на самом деле не проблема.

Стандартный способ, проверка Boolean значений в Dictionary является чрезвычайно быстрой операцией. Если у вас есть функция, которая выполняется в ответ на какое-то взаимодействие с пользователем, это будет лучший способ получить информацию об объекте. Например:

$('#showVideo').on('click', function() { 
    if (Modernizr.video) { 
     // load HTML5 video 
    } 
    else { 
     // load Flash video 
    } 
}); 

Аналогичным образом, прослушивание событий JS очень эффективно. То, что позволяет новая модель на основе событий в Modernizr, - это реагировать на завершение тестов Modernizr. Это замечательно, если ваш сайт должен внести изменения как можно скорее, когда доступны данные обнаружения функций. Например:

Modernizr.on('draganddrop', function(result) { 
    if (!result) { 
     alert('This site requires Drag and Drop. Please update your browser.') 
    } 
}); 

Раньше вы должны были следить за обновлениями DOM на <body> и проверьте классы для того, чтобы получить эту информацию.

Смежные вопросы