javascript - 是否可以使用内联 javascript 来实现小型自包含事件处理函数？

Question

我使用事件来管理用户登录和退出网站后的用户界面，登录时发布登录事件，用户注销时发布注销事件。

有了这个系统，我正在尝试使用 JavaScript 的小型内联位来处理订阅事件的 ui 元素。

页面顶部是登录/注销链接，因此我使用以下代码来更改登录状态

<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 元素时才绑定(bind)到事件:

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();
    }
  });
}