2
JavaScript는 대부분의 웹 솔루션에서 점점 더 중요한 역할을하지만 JS 코드를 서버 측 코드보다 뷰 특성에서 분리하는 것이 훨씬 어렵다는 것을 알고 있습니다. .JS 코드를 뷰에서 분리하는 방법에 대한 권장 사항 찾기
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>
:
는 구체적인 예를 제공하기 위해, 나는 다음과 같은 종류의 보이는 전망을(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 클래스와 같은 일종의 빌드를 개선하는 방법에 대한 저의 아이디어는 클래스 및 요소 ID에 대한 많은 문자열 참조를 사용하지 않고 JS를 작성할 수 있도록하는 것입니다. 그러나 나는 그것을 어떻게 만들 것인지, 아니면 결국 유지하는 것이 더 나쁠 것인지에 대해서는 확신하지 못한다.
마지막 두 개의 글 머리 기호에 대한 예제를 제공 할 수 있습니까? 제안을 내가 어떻게 적용 할 수있는 유형으로 변환할지는 확실하지 않습니다. –
세 번째 글 머리 기호는 '게시자/구독자'라는 디자인 패턴에 대한 것입니다. http://en.wikipedia.org/wiki/Publish/subscribe –
+1, 데이터 속성 사용에 대해서도 언급했기 때문입니다. 잘 기억합니다. =) –