Javascript, мнения и лучшие практики событий - PullRequest
Новая
       16

Javascript, мнения и лучшие практики событий

0 голосов
/ 26 июля 2011

Я создаю страницу, которая может воспроизводить видеофайл с альтернативными плагинами на основе выбора пользователя.URL-адрес указывает, какое видео следует воспроизводить.

Страница получена из сценария сервера PHP.Пользователь выбирает плагин, нажимая на некоторые ссылки AJAX.Каждая ссылка извлекает с сервера требуемый плагин, выполняя запрос AJAX с функцией Javascript.Эта функция должна принимать в качестве параметра идентификатор видео.На стороне клиента я использую jQuery Javascript Framework.

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

  1. использовать onclick HTML-атрибут для ссылок AJAX для вызова функций, получающих контент с сервера
  2. , использовать jQuery $(#element).click() для сопоставления Javascriptфункция, которая извлекает контент.

Если я использую первую альтернативу, a может легко передать идентификатор видео в функцию Javascript: 

<a id="X" href="#" onclick="retrieveXPlugin('<?php echo $id ?>')">X Plugin</a>

, но код представления смешан с кодом событий, что не является хорошей практикой.

Второй вариант выглядит лучше, но я должен связать событие click в том же PHP-файле, например: 

<script type="text/javascript">
$(document).ready(function() {
    $('#X').click(function() { 
        retrieveXPlugin('<?php echo $id ?>'); 
    });
}
</script>

Как я выяснил, я не могувключите приведенный выше код в отдельный файл .js, потому что мне нужна переменная PHP на стороне сервера $id.Единственный способ сделать это - использовать глобальные переменные Javascript, которые выглядят не очень хорошо.

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

Ответы [ 2 ]

2 голосов
/ 26 июля 2011

Вы можете использовать, например, атрибут name вашей ссылки: 

<a id="X" href="#" name="<?php echo $id ?>">X Plugin</a>

И в отдельном файле .js: 

$(document).ready(function() {
    $('#X').click(function() { 
        retrieveXPlugin($(this).attr ('name')); 
    });
}

Или лучше, как сказано в комментарии ниже, это атрибут data - * (спасибо Raynos), так что вы можете сделать это следующим образом: 

<a id="X" href="#" data-xplugin="<?php echo $id ?>">X Plugin</a>

И в отдельном файле .js: 

$(document).ready(function() {
    $('#X').click(function() { 
        retrieveXPlugin($(this).attr ('data-xplugin')); 
    });
}
0 голосов
/ 26 июля 2011

Вы можете просто вернуть тег anchor + script следующим образом: 

<a id="X" href="#" onclick="retrieveXPlugin('<?php echo $id ?>')">X Plugin</a>
<script type="text/javascript">
$(document).ready(function() {
    $('#X').click(function() { 
        retrieveXPlugin('<?php echo $id ?>'); 
    });
}
</script>

И это привязало бы якоря к вашему игроку.

...