寻求关于如何从视图中解耦JS代码的建议

JavaScript在大多数web解决方案中扮演着越来越重要的角色，但我发现将JS代码与视图细节解耦比将服务器端代码解耦要困难得多。

人们使用什么技术来解耦JS代码，以减少维护负担并使其尽可能适应较小的视图更改?

为了提供一个具体的例子，我有一个视图，看起来像下面这样:

<div id="signin" class="auth">
    <h2>Sign in</h2>
    <div id="resultbox" class="box" style="display: none;"></div>
    <div class="form">
        <p>Required fields are marked <span class="yellow">*</span></p>
        <form action="@Url.Action( MVC.Account.Authenticate() )" method="post" id="authform">
            <label for="Identification">Alias or email <span class="yellow">*</span></label></p>
            @Html.TextBoxFor( m => m.Identification, new { size="22", tabindex="1" } )
            <label for="Password">Password <span class="yellow">*</span></label></p>
            @Html.PasswordFor( m => m.Password, new { size="22", tabindex="2" } )
            <a href="#" class="but_styled" id="btn_signin" tabindex="3">Sign in</a>
        </form>
    </div>
</div>

JS部分被分成两个文件——第一个是我的"业务逻辑"类，第二个主要用于连接:

(function (pp, $, undefined) {
    pp.account = {};
    function hideResultBox() {
        var box = $('#resultbox');
        box.hide();
        box.removeClass('info_box').removeClass('error_box');
    }
    function showResultBox(result) {
        var box = $('#resultbox');
        if (result.Success === true) {
            $('#resultbox_content').html(result.Message);
            box.addClass('info_box').show();
        } else {
            $('#resultbox_content').html(result.Message);
            box.addClass('error_box').show();
            var messages = '';
            for (var error in result.Errors) {
                messages += '<li>' + result.Errors[error] + '</li>';
            }
            if (messages !== '')
                $('#resultbox_content').append('<br /><ul>' + messages + '</ul>');
        }
    }
    pp.account.authenticate = function (data) {
        hideResultBox();
        $.post('/account/authenticate', data, function (result) {
            showResultBox(result);
            if (result.Success === true) {
                setTimeout(function () { window.location = result.Url; }, 1000);
            }
        });
    };
})(window.pressplay = window.pressplay || {}, jQuery);

接线部分:

$(document).ready(function () {
    $('#signin a').live('click', function () {
        var form = $(this).closest('form').serialize();
        pressplay.account.authenticate(form);
        return false;
    });
});

上面代码的问题是它与视图的外观(必须存在的元素id，结构等)的关系有多密切，但我对如何改进它没有什么好主意。

在我看来，如果我继续沿着这条路走下去，JS文件最终会变成一堆正确封装的逻辑，与各种特定于视图的东西结合在一起。

这是我所能做的最好的事情吗?或者我可以应用什么技术来避免一些混乱?

关于如何改进这一点，我自己的想法是围绕构建某种服务器端生成的"元素选择器"JS类，这样我就可以在编写JS时不使用太多对类和元素id的字符串引用。但我不确定如何生成它，或者它最终是否会变得更糟糕。

if ($('body').is('.password-form')) { 
  // perform specific initializations
}

function hideElement(var jqElementSelector, var cssClass1, var cssClass2 var cssClass3) {
    var element = $(jqElementSelector);
    element.hide();
    element.removeClass(cssClass1).removeClass(cssClass2).removeClass(cssClass3);
}

CommonLib.hideElement('#resultbox', 'info_box', 'error_box');