Можно ли использовать встроенный JavaScript для небольших автономных функций обработки событий?

Question

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

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

В верхней части страницы находится ссылка для входа / выхода из системы, поэтому я использую следующий код для изменения статуса входа в систему

<div id="account_panel" class="signed_out">
    <div class="in">
        <a href="/account" class="name"></a> | <a href="/account/signout">Sign-out</a>
    </div>
    <div class="out">
        <a href="/account/signin" class="signin">Sign-in</a> | <a href="/account/register" class="register">Register</a>
    </div>
</div>
<script>
    if (window.jQuery) {
        $('body').on('login.account.website', function(event, data){
            $('#account_panel').removeClass('signed_out').addClass('signed_in');
            if (data)
                jQuery('#account_panel .name').text(data.first_name+' '+data.last_name);
        });
    }
</script>

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

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

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

Спасибо

Answer 1

Я бы сказал, что этот метод трудно поддерживать, так как приходится отслеживать фрагменты кода, разбросанные по нескольким HTML-документам.Почему бы не хранить код в одном месте и привязывать его к событиям только при наличии определенных элементов DOM:

if (window.jQuery) {
  function whenSignedOut(){
    $('body').on('login.account.website', function(event, data){
       $('#account_panel').removeClass('signed_out').addClass('signed_in');
       if (data)
           jQuery('#account_panel .name').text(data.first_name+' '+data.last_name);
    });
  }

  function whenSignedIn(){  
  }
}

if (window.jQuery) {
  $(document).ready(function(){
    if($('div#account_panel.signed_out').length > 0)) {
      whenSignedOut();
    }

    if($('div#account_panel.signed_in').length > 0)) {
      whenSignedIn();
    }
  });
}

Answer 2

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

Answer 3

Я думаю, что если вы поместите все эти маленькие кусочки в один файл js и прокомментируете это хорошо, это будет намного яснее увидеть.Потому что вам нужно искать JavaScript только в одном месте.Если вы планируете работать вместе с другим человеком или попросите другого человека посмотреть на него в будущем, определенно поместите все в файл (ы) js, куда будет смотреть другой человек.

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

Answer 4

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

Если вы используете тип документа HTML4, то в теге скрипта требуется атрибут type - см. W3C

<script type="text/javascript">
// code here
</script>