사용자로부터 회사 이름과 주소 정보를 수집하는 웹 양식이 있다고 가정 해 봅니다. 나는이 간단한 예에서와 같이 하나의 객체에 모든 것을 저장할 수 있습니다, 관련 자바 스크립트 파일에서 기능 전반에 걸쳐 흩어져의 jQuery 셀렉터를 줄이기 위해 단일 객체 구조에 관련된 정보를 수집하기 :개체의 jQuery 선택기 - 중복성과 가독성 감소
var companyForm = {
name: {
inputField: $("#CompanyName"),
isValid: function() {
return IsNameValid(this.inputField.val());
},
labelField: $("#CompanyNameLabel")
},
address: {
inputField: $("#Address"),
isValid: function() {
return IsAddressValid(this.inputField.val());
},
labelField: $("#AddressLabel")
},
city: {
inputField: $("#City"),
isValid: function() {
return IsCityValid(this.inputField.val());
},
labelField: $("#CityLabel")
}
};
을 나는 단지 필요 한 번이 선택기를 나열, 그리고 사용자가 입력 한 회사 이름을 참조해야 할 때마다 다음,이 사용할 수 있습니다
: 나는 사용자의 입력의 유효성을 검사 할 경우,companyForm.name.inputField.val()
또는
companyForm.name.isValid()
기타 (예 : labelField는 사용자가 잘못된 형식의 입력을 입력해야 할 때 "error"라는 클래스를 추가하려는 레이블 요소 일 수 있으며주의를 필요로한다는 점을 강조하고 싶습니다) .
내 딜레마는 이후 내 jQuery를 선택기, 지금, 가독성을 아프게 해요로 DRY 원칙을 적용하여,이다 :
$("#CompanyName").val()
읽고 이해하는 것이 훨씬 쉽다보다는 :
companyForm.name.inputField.val()
이러한 방식으로 중복성을 줄이지 않아야합니까? 선택기 참조를 관리하거나 최소화 할 수있는 더 나은 방법이 있습니까?
그래서 간단! 기본 HTML 입력 요소에 연결된 다른 다양한 jQuery 속성 및 함수에 액세스해야한다면 더 긴 구문을 사용하여 참조 할 수 있습니다. 감사! – Derek