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 的大量字符串引用。但我不确定如何生成它,或者最终维护它是否会更糟。