Ненавязчивый JavaScript со значениями на стороне сервера, лучшие практики? - PullRequest
Новая
       10

Ненавязчивый JavaScript со значениями на стороне сервера, лучшие практики?

6 голосов
/ 22 сентября 2009

Я привык делать такие вещи: 

<a href="Javascript:void(0);" onclick="GetCommentForGeneralObservation(<%# Eval("ID") %>)">

Это было бы в повторителе или что-то вроде того, кстати. Однако сейчас я пытаюсь использовать ненавязчивый JavaScript и, следовательно, избавиться от любого JS в разметке. Я пытался выяснить, какова лучшая практика в подобных случаях? Я использовал атрибуты, а затем получил значение с помощью JQuery для передачи в вызов AJAX, но это выглядит как взлом.

Изменить в свете первого ответа:

Я больше думал о

Отделение функциональности («уровня поведения») от структуры / содержимого и представления веб-страницы.

часть ненавязчивого JS, насколько я понимаю.

Это происходит для приложения, в котором мне не нужно беспокоиться о том, что Javascript отключен на клиенте, оно размещено внутри моей компании. Я понял, как мне получить значение из Eval («ID») в вызов JS, если бы я должен был прикрепить событие onclick в отдельный файл .js через JQuery.

Извините, что не уточнил. Я ценю необходимость прогрессивного улучшения в общедоступных приложениях.

Ответы [ 7 ]

12 голосов
/ 22 сентября 2009

В HTML 5 вы можете определить свои собственные атрибуты с префиксом 'data -'

, например 

<a  
class="comment"
data-rendered-id="<%# Eval("ID") %>"
href="/getCommentForGeneralObservation/<%# Eval("ID") %>" >

А затем используйте этот атрибут в jQuery в вашем обработчике событий щелчка. 

$(".comment").click(function () {
  var id = $(this).attr("data-rendered-id");
  return GetCommentForGeneralObservation(id);
});

Это будет работать в большинстве браузеров до HTML5, если они поддерживают jQuery.

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

4 голосов
/ 22 сентября 2009

Я бы начал с: 

<a href="/getCommentForGeneralObservation/<%# Eval("ID") %>" class="getCommentForGeneralObservation">

и затем присоедините обработчик событий, который выглядел примерно так: 

function (event) {
    var href = this.href;
    var id = href.search(/\/(\d+)/);
    return GetCommentForGeneralObservation(id);  
};
3 голосов
/ 22 сентября 2009

Ненавязчивость означает, что вы не зависите от Javascript в функциональности, и поэтому ваш код расширен с помощью Javascript, а не заменен им.

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

<a id="commentLink" href="comment.asp">Get Comment</a>

А ваш Javascript (при условии, что вы не используете фреймворк) будет выглядеть примерно так: 

function GetCommentForGeneralObservation(evt) {
  // Extra javascript functionality here
}

document.getElementById("commentLink").onclick = GetCommentForGeneralObservation;

С Jquery, я думаю, вы могли бы просто сделать: 

$("#commentLink").click(GetCommentForGeneralObservation);
2 голосов
/ 22 сентября 2009

Я собираюсь ответить на этот вопрос, потому что теперь я понимаю вопрос, и подход, который я обычно использую, отличается от того, что предлагалось до сих пор.

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

<script type="text/javascript">
  var myApp = {commentId:<%# Eval("ID") %>};
</script>
<script type="text/javascript" src="myAppScript.js"></script>

Теперь в myAppScript.js вы можете использовать myApp["commentId"] везде, где вам нужен этот идентификатор для ссылки. (Я использую словарь, чтобы не загрязнять глобальное пространство имен)

Преимущество этого подхода заключается в том, что ваш myAppScript.js по-прежнему полностью статичен, и поэтому вы можете обслуживать его очень быстро. Он также имеет преимущество в том, что хранит релевантную информацию вне URL, и вы можете использовать объекты Javascript, которые могут очень помочь со сложными и / или трудными для анализа данными.

Недостатком является то, что для этого требуется встроенный Javascript, что не является большим недостатком, если вы не являетесь веб-перфекционистом.

Мне также очень нравится подход DanSingerman, который больше подходит, если ваши данные относятся к тегу.

1 голос
/ 22 сентября 2009

Возможно, вы захотите использовать плагин метаданных JQuery или функцию основных данных.

http://docs.jquery.com/Core/data

http://plugins.jquery.com/project/metadata

0 голосов
/ 20 ноября 2009

Вы можете использовать атрибут rel тега anchor для хранения значения, которое вы хотите связать со ссылкой. 

<a href="#n" class="comment" rel="<%# Eval("ID") %>">Click Here</a>

Затем в своем коде jQuery вы можете проверить атрибут rel, чтобы получить искомое значение. 

$(".comment").click(function () {
  return GetCommentForGeneralObservation(this.rel);
});

(Я уверен, что это верно для jQuery, но я скорее парень из MooTools ...)

0 голосов
/ 15 октября 2009

Как насчет того, чтобы убедиться, что он совершенно незаметен?

В заголовке HTML-документа 

<script src="path/to/php/or/other/equivalent/server/side/file"></script>

В пути / к / php / или / другому / эквивалентному / серверу / стороне / файлу: 

 var SiteServerVariablesEtc = { 
    someProperty: <?php echo "hello" ?> 
 }

В вашем обычном JS-файле: 

var myVar = SiteServerVariablesEtc.someProperty;
...