2012-09-26 3 views
0

사용자로부터 회사 이름과 주소 정보를 수집하는 웹 양식이 있다고 가정 해 봅니다. 나는이 간단한 예에서와 같이 하나의 객체에 모든 것을 저장할 수 있습니다, 관련 자바 스크립트 파일에서 기능 전반에 걸쳐 흩어져의 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() 

이러한 방식으로 중복성을 줄이지 않아야합니까? 선택기 참조를 관리하거나 최소화 할 수있는 더 나은 방법이 있습니까?

답변

2

getter 및 setter 기능을 구현하는 방법은 어떻습니까? 만 companyForm.getName()를 호출 것 그 방법은 companyForm.name.inputField.val()

의 값을 얻을 수의가 있다고 가정 해 봅시다 : 나는 완전히 간과 솔루션

var companyForm = { 
    name: { 
     inputField: $("#CompanyName"), 
     isValid: function() { 
      return IsNameValid(this.inputField.val()); 
     }, 
     labelField: $("#CompanyNameLabel") 
    }, 
    ... 
    getName: function() { 
     return this.name.inputField.val(); 
    } 
}; 
+0

그래서 간단! 기본 HTML 입력 요소에 연결된 다른 다양한 jQuery 속성 및 함수에 액세스해야한다면 더 긴 구문을 사용하여 참조 할 수 있습니다. 감사! – Derek