2016-08-30 3 views
2

Пусть говорят, у меня есть страница, которая имеет следующий HTML:Как избежать встроенного javascript?

<input type="button" id="clickme" value="Click Me" /> 

На той же странице, у меня есть следующий сценарий:

<script type="text/javascript"> 

    $('#clickme').click(function(){ 
     console.log("clicked"); 
}); 

</script> 

ли это штраф за выше, чтобы быть инлайн на страница или лучше иметь в libray console.log(...), так что это будет что-то вроде:

<script type="text/javascript src="external.js"></script> 
<script type="text/javascript"> 

    $('#clickme').click(function(){ 
     LogToConsole("clicked"); 
}); 

</script> 

принять его на следующий уровень, это даже может быть олучатель поставить всю функцию щелчка во внешней библиотеке, так что код в конечном счете, становится чем-то вроде:»

<script type="text/javascript src="external.js"></script> 
<script type="text/javascript"> 

ClickMe("clicked"); 

</script> 

выше все еще содержит встроенный Javascript или это мое понимание инлайн Javascript неправильно, потому что кажется, что это невозможно избегать?

+0

Вы можете поместить весь код JS во внешний скрипт, полностью исключая встроенный код JS. Это то, что я делаю. –

+0

Термин «в строке» не определен в стандарте в любом месте, это жаргон, который обычно относится к добавлению скрипта в атрибут элемента, например '

ответ

4

Как избежать встроенного JavaScript?

Один из лучших способов, о которых я могу думать, чтобы избежать использования встроенного JavaScript, - это просто не скрипт встроенный JavaScript.

То есть, верхний/нижний колонтитул вашего HTML-документ, источник внешнего файла JS, как так:

<script type="text/javascript" src="external.js"></script> 

Затем в другом месте в вашем HTML-документ, положить в элементе, чтобы вызвать вашу функцию, нажмите:

<input type="button" id="clickme" value="Click Me" /> 

Наконец, в external.js, положить в коде, чтобы вызвать ваш клик:

$('#clickme').click(function() { 
    LogToConsole("clicked"); 
} 

Поместив JavaScript в externel JS-файл, вы не записываете JavaScript в свой HTML-документ. Ваше понимание встроенного JavaScript, судя по вашему вопросу, действительно «неверно». Но, признав, что встроенный JavaScript просто означает запись JS-кода в ваш HTML-файл, вы теперь понимаете, что значит писать (или не писать) встроенные JS.

Кстати, <script> тег не является встроенным JS !!!! Это HTML.

+0

Спасибо за это. Я понимаю, что тег скрипта - это HTML, извините за путаницу. Ваш последний фрагмент кода помог мне. Я не знал, что могу просто поместить весь клик даже во внешний файл. Я думал, что мне нужно передать элемент, чтобы привязать клик к событию клика, если это имеет смысл. – xaisoft

+0

@xaisoft. Это имеет смысл. – 8protons

0

Я бы рекомендовал использовать внешний JavaScript большую часть времени. Файлы Javascript трудно отлаживать, когда он загроможден html. Подумайте, есть ли у вас сотни строк javascript, разбросанных по документу. Это займет много времени, чтобы отладить BOTH html и javascript, если это так.

Единственным исключением из этого правила является производительность. Внешние файлы JavaScript кэшируются браузером, однако для них требуется увеличенное количество HTTP-запросов, что замедляет загрузку страниц. Это зависит от того, сколько раз ваш внешний экран JavaScript перерабатывается (кэшируется) браузером. Если у вас есть большое количество просмотров за сеанс, то он многократно перерабатывается, и поэтому имеет смысл использовать внешние файлы, однако для таких вещей, как домашняя страница, которая не имеет большого количества просмотров на сеансы, и, таким образом, получить переработанную так много, было бы разумнее использовать inline.

Для получения дополнительной информации о производительности, вы можете прочитать:

1

принять его на следующий уровень, вы можете положить все, что в библиотеках и сделать:

<script type="text/javascript" src="external.js"></script> 
<script type="text/javascript" src="clickme.js"></script> 

Обратите внимание, что выше, будет работать точно такой же, как inline. То есть код будет работать или не зависит от того, где вы помещаете тег сценария (подумайте об этом как о копии браузера и вставив внешний код в строку), это в основном то, что происходит).

После этого вы можете перейти на следующий уровень: сделать сценарии независимыми от того, где они находятся в HTML. Для большинства людей это означает сделать работу скрипта, даже если они включены в head:

<html> 
    <head> 
    <script type="text/javascript" src="external.js"></script> 
    <script type="text/javascript" src="clickme.js"></script> 
    </head> 
    <body> 
    <input type="button" id="clickme" value="Click Me" /> 
    </body> 
</html> 

Но если вы попытаетесь сделать это, вы столкнетесь с проблемой: кнопка "clickme" не существует, когда вы включаете файл clickme.js, чтобы сценарий не работал. Чтобы он работал, вы запускаете скрипт при загрузке или в DOM. JQuery делает это легко:

// clickme.js 
$(document).ready(function(){ 
    // jQuery will wait until the document is loaded 
    // before executing code inside here 

    ClickMe("clicked"); 
}); 
+0

Спасибо, ваш образец мне очень помог. – xaisoft

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