Помогите мне понять основные принципы ненавязчивого JavaScript - PullRequest
Новая
       25

Помогите мне понять основные принципы ненавязчивого JavaScript

0 голосов
/ 14 августа 2011

Я нашел эти базовые принципы Unobtrusive JavaScript из Wikipeia / Unobtrusive_JavaScript :

  • Отделение функциональности («уровня поведения») от структуры / содержимого и представления веб-страницы
  • Лучшие практики, позволяющие избежать проблем традиционного программирования на JavaScript (таких как несоответствия браузеров и недостаточная масштабируемость)
  • Прогрессивное улучшение для поддержки пользовательских агентов, которые могут не поддерживать расширенные функциональные возможности JavaScript

Я легко могу понять первый.Я также могу понять, кто второй avoid the problems of lack of scalability.Интересно, как ненавязчивый JavaScript может помочь избежать несоответствий браузера.Наоборот, иногда навязчивый способ может помочь избежать несоответствий браузера.Например, чтобы добавить событие к какому-либо элементу, я должен сделать это ненавязчивым способом: 

<div id="button">Button</div>
<script>
var button = document.getElementById('button');

function buttonClick() {
  // do something
}

if (button.addEventListener) 
  button.addEventListener('click', buttonClick, false);
else
  button.attachEvent('onclick', buttonClick);
</script>

, если я сделаю это навязчивым способом: 

<div id="button" onclick="buttonClick()">Button</div>
<script>
function buttonClick() {
  // do something
}
</script>

Как видите, навязчивый способ прощеи не нужно заботиться о несоответствии браузера.Не могли бы вы объяснить или показать мне какие-нибудь примеры того, как ненавязчивый способ может помочь избежать несоответствий в браузере.

И третий.Я могу сделать прогрессивное улучшение навязчивым способом.Например, я все еще могу использовать Modernizr навязчивым способом.

Как ненавязчивый JavaScript может помочь сделать это?

Ответы [ 3 ]

1 голос
/ 31 октября 2013

вы можете использовать свойства HTML, как говорит Араш, но это не W3c Valid. Если вы пройдете валидацию W3c, лучше использовать Javascript

1 голос
/ 31 октября 2013

Я обычно предпочитаю использовать простые и точные полифилы.Для вашего примера вы можете просто включить addEventListener polyfill (https://gist.github.com/eirikbacker/2864711), а затем использовать стандартный способ: 

<div id="button">Button</div>
<script type="text/javascript" src="./polyfills/addEventListener-polyfill.js"></script>
<script>
    var button = document.getElementById('button');

    function buttonClick() {
        // do something
    }

    button.addEventListener('click', buttonClick, false);
</script>
1 голос
/ 14 августа 2011

Что ж, вы говорите, что это правда, но есть некоторые другие свойства HTML, которые не соответствуют стандарту.например, такие вещи, как 

<input disabled>

или 

<input disabled="disabled">

могут обрабатываться в ненавязчивом JavaScript более последовательно.

...