애플리케이션의 jQuery 양식 바인딩 코드에 대한 모범 사례

StackOverflow https://stackoverflow.com/questions/34705

  •  09-06-2019
  •  | 
  •  

문제

서버 측 코드에 대한 jQuery JSON 호출이 많은 애플리케이션이 있습니다.이 때문에 응답을 구문 분석하고 적절한 값을 양식에 바인딩하기 위한 바인딩 코드가 많이 있습니다.이것은 두 부분으로 구성된 질문입니다.

  1. 서로 다른 데이터를 가지고 있는 다수의 양식을 처리하기 위해 권장되는 접근 방식은 무엇입니까?현재 우리는 init, wireClickEvents 등을 사용하여 각 페이지에 대해 js "클래스"를 설정하는 데 구조화된 접근 방식을 취하려고 노력하고 있습니다.모든 것을 일치시키려고 노력합니다.

  2. js 파일에 여러 함수를 던지는 것 외에 반복적인 jQuery 코드나 권장되는 구조를 만드는 "모범 사례"가 있습니까?

도움이 되었습니까?

해결책

귀하가 요구하는 내용이 100% 확실하지는 않지만 개인적으로 저는 MochiKit을 사용하여 모든 중요한 클라이언트 측 UI 구조에 대해 JavaScript "클래스"(또는 원하는 경우 위젯)를 만듭니다.물론 이들은 데이터로 자신을 채우는 방법을 알고 있습니다.

더 이상 무슨 말을 해야 할지 모르겠습니다. JavaScript로 브라우저용 UI 코드를 작성하는 것은 제가 생각하는 한 다른 유형의 앱용 UI 코드를 작성하는 것과 다르지 않습니다.클래스를 빌드하고 필요에 따라 인스턴스화하고 데이터로 채우고 이벤트를 발생시키는 등의 작업을 수행합니다.등.

내가 이것 때문에 밤을 새웠나?:)

편집하다:즉, 그렇습니다. 대부분의 경우 현재 하고 있는 일을 하십시오.너무 많은 초보 JavaScript 해커가 단일 파일에 모두 포함되어 있다는 점 외에는 특정 항목의 일부인 것처럼 보이지 않는 응집력이 떨어지는 함수를 작성하는 것을 봅니다.그게 말이 되기를 바랍니다.

다른 팁

아마도 다음과 같은 프레임워크를 조사해야 할 것입니다. 녹아웃.js 이렇게 하면 모델을 업데이트하기만 하면 양식이 자동으로 업데이트됩니다.

나는 당신에게 여러 가지 도전이 있다고 생각합니다.첫 번째 질문은 자바스크립트 코드를 구조화하는 방법입니다.이름 충돌을 방지하거나 다음과 같이 함수 이름을 지정하지 않도록 네임스페이스를 구축하는 방법 

form1validate
form1aftersubmit
form2validate
form2aftersubmit

javascript의 입증된 모듈 패턴 중 하나는 익명 함수를 사용하여 새로운 명명 범위를 구축하는 것입니다.기본 아이디어는 다음 코드에 나와 있습니다.

(function() {
  var foo = 1;
})();

(function() {
  if(foo == 1) alert("namespace separation failed!")
})();

나는 이것을 생각 해요 블로그 항목 좋은 소개네요.

두 번째 질문은 자바스크립트 코드에서 모든 반복을 피하는 방법입니다.이에 맞서는 몇 가지 무기가 있습니다.

  1. 함수 - 이음새는 분명하지만 공통 코드를 수행할 수 있는 함수로 리팩터링하는 것을 종종 잊어버립니다.귀하의 경우 이는 json 응답의 값을 양식에 복사하는 기능이 될 것입니다.
  2. 고차 함수(또는 데이터로서의 함수) 또는 자바스크립트에서 자주 호출되는 콜백.이것은 자바스크립트의 가장 강력한 무기입니다.양식 및 Ajax 처리의 경우 콜백을 사용하여 양식 제어 흐름의 반복을 피할 수 있습니다.

내 머릿속에서 예제를 구성해 보겠습니다(편의성을 위해 jquery 사용).

// this is a validator for one form
   var form1validator = function() {
     if($("input[name=name]",this).attr("value").length < 1 &&
        $("input[name=organisation]",this).attr("value").length < 1)
       return "Either name or organisation required" 
   }

   // and this for a second form
   var form2validator = function() {
     if($("input[name=age]",this).attr("value").length < 21
       return "Age of 21 required"
   }

   // and a function to display a validation result
   var displayResult = function(r) {
     $(this).prepend("<span></span>").text(r);
   }

   // we use them as higher order functions like that

   $("#form1").onSubmit(validator(form1validator, displayResult, function() {
     //on submit
     ...send some xhr request or like that
   });

   $("#form2").onSubmit(validator(form2validator, displayResult, function() {
     this.submit() // simply submit form
   });

   $("#form1b").onSubmit(validator(form1validator, function(r) {
     alert("There was an validation error " + r);
   }, function() {
     //on submit
     ...send some xhr request or like that
   });


   // the validator function itself would be defined as

   function validator(formValidator, displayResult, onSubmit) {
     var r = formValidator.apply(this)
     if(typeof(r) === 'undefined')
       onSubmit(this)
     else
       displayResult(r)
   }
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top