Question

我在用户登录和退出网站后使用事件管理ui，登录发生登录事件时以及用户注销注销事件时发布。

有了这个系统，我正在尝试使用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元素时绑定到您的事件：

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-interpreter看到javascript，它就会立即停止所有呈现页面，执行javascript然后继续渲染。因此，它可以用于小javascript，它不会以这种方式阻止渲染，用户会注意到它（但它阻塞了！）。

Answer 3

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

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

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

Answer 4

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

如果你不打算这样做那么关键是，你想要什么，你觉得哪些最有用。

是否可以将内联javascript用于小型自包含事件处理函数？

4 个答案: