对于小型自包含事件处理函数可以使用内联 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

我认为如果你将所有这些小部分放入一个 js 文件中并以一种好的方式对其进行注释，那么它会更清晰地看到。因为您只需在一处查找 JavaScript。如果您打算将来与另一个人一起工作或让另一个人查看它，请务必将所有内容放入其他人会查看的 js 文件中。

如果您不打算这样做，那么重点是您想要什么，您认为什么最有用。

Answer 2

在我看来，将这些内联代码小节用于与其代码相关的特定任务是很好的 - 较大的库/js 文件用于更通用的代码。我一直使用这些类型的子部分。

如果您使用 HTML4 doctype，则脚本标记上需要 type 属性 - 请参阅 W3C

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

Answer 3

我认为这种方法很难维护，必须跟踪分散在多个 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 4

你可以这样做，但你必须记住，一旦 html 解释器看到该 javascript，它将立即停止所有页面渲染，执行 javascript，然后继续渲染。因此，对于小型 JavaScript 来说是可以的，它不会以用户会注意到的方式阻塞渲染（但它是阻塞的！）。