코드를 모듈화하여 한 번에 여러 구성 요소를 실행하십시오.

교통 신호등처럼 보이는 HTTP 응답 추적기를 만들었습니다. 현재 응답이 "200"응답이 아니면 신호등이 빨간색으로 깜박입니다. 10 초마다 특정 URL에 대한 요청이 있고 신호등이 그에 따라 변경됩니다. 성공하면 녹색, 오류는 빨간색으로 깜박입니다.코드를 모듈화하여 한 번에 여러 구성 요소를 실행하십시오.

위의 작품은 좋았지 만, URL 매개 변수 만 전달할 수 있기 때문에 불행히도 같은 페이지에서 여러 개의 신호등이있는 여러 개의 URL을 모니터링하려는 경우 문제가 발생했습니다. .cp_trafficLight 구성 요소.

특정 .cp_trafficLight 구성 요소를 대상으로 이니셜 라이저에 추가 인수를 전달할 수있는 코드를 구조화하는 방법을 찾아야합니다.

는

var requestResponses = { 

    greenLight: $('.cp_trafficLight_Light--greenDimmed'), 
    redLight: $('.cp_trafficLight_Light--redDimmed'), 
    greenBright: 'cp_trafficLight_Light--greenBright', 
    redBright: 'cp_trafficLight_Light--redBright', 

    settings: { 
     flashError: 400, 
     requestTime: 10000 
    }, 

    init: function (url) { 
     requestResponses.url = url; 
     requestResponses.getResponse(requestResponses.url); 
     setInterval(function() { 
      if (requestResponses.errorCode === true) { 
       requestResponses.redLight.toggleClass(requestResponses.redBright); 
      } 
     }, requestResponses.settings.flashError); 
    }, 

    successResponse: function() { 
     requestResponses.errorCode = false; 
     requestResponses.redLight.removeClass(requestResponses.redBright); 
     requestResponses.greenLight.addClass(requestResponses.greenBright); 
    }, 

    errorResponse: function() { 
     requestResponses.greenLight.removeClass(requestResponses.greenBright); 
    }, 

    getResponse: function (serverURL) { 
     $.ajax(serverURL, { 
      success: function() { 
       requestResponses.errorCode = false; 
       requestResponses.successResponse(); 
      }, 
      error: function() { 
       requestResponses.errorCode = true; 
       requestResponses.errorResponse(); 
      }, 
      complete: function() { 
       setTimeout(function() { 
        requestResponses.getResponse(requestResponses.url); 
       }, requestResponses.settings.requestTime); 
      } 
     }); 
    }, 

    errorCode: false 
} 

requestResponses.init('/status');

https://jsfiddle.net/73tex200/1/

내 코드는 다음과 같습니다. 어떤 도움이라도 대단히 감사하겠습니다! , 쉽게 객체에 추가 할 수 있도록

var url1=flashlight("test"); 
url(1"/testurl");

그러나, 당신이 당신의 손전등을 수정해야합니다

function flashlight(el){ 
    //your code using el, instead of the green/yellow/red static identifiers thing 
    return init; 
}

지금 당신이 할 수 있습니다

출처

2017-02-13 Rebecca

는 공장 기능 확인 document.createElement와 같은 sth를 사용하여 ...

출처

2017-02-13 15:10:03

두 번째 매개 변수를 init에 추가하고이를 광원이 들어있는 html 요소로 설정합니다. . 그런 다음 greenLight/redLight 등 선택기를 개체로 변경하여 여러 버전을 저장할 수 있도록 각 조명 세트에 하나씩 저장하십시오. 이 div 안에 4 개의 표시등을 가져 오는 기능이 있습니다.

그런 다음 모든 함수를 편집하여 이름을 전달하고 requestResponses.colorLight 코드의 모든 조각을 this.instances[name].colorLight으로 변경하십시오.

이 클래스를 만드는 것도 좋은 해결책이 될 수 있지만, 프로토 타입을 사용하여 작업하는 것을 좋아하지 않는다면이 정도면 충분합니다.

이 스 니펫은 강제되지 않지만이 솔루션 스타일의 기본 사항을 보여줍니다.

<html> 
<head></head> 
<body> 
<section> 
    <div class="container"> 
     <div class="cp_trafficLight" id="one"> 
      <div class="in"> 
       <div class="cp_trafficLight_Light cp_trafficLight_Light--greenDimmed"></div> 
       <div class="cp_trafficLight_Light cp_trafficLight_Light--redDimmed"></div> 
      </div> 
     </div><div class="cp_trafficLight" id="two"> 
      <div class="in"> 
       <div class="cp_trafficLight_Light cp_trafficLight_Light--greenDimmed"></div> 
       <div class="cp_trafficLight_Light cp_trafficLight_Light--redDimmed"></div> 
      </div> 
     </div> 
    </div> 
</section> 
<script> 
var requestResponses = { 
    instances : {}, 
    settings : { 
     flashError: 400, 
     requestTime: 10000 
    }, 
    gather : function gather(container, url) { 
     var name = container.id; 
     this.instances[name] = { 
      callInterval: null, 
      blinkInterval: null, 
      url : url, 
      errorCode: false, 
      greenLight: $('#' + name + ' .cp_trafficLight_Light--greenDimmed'), 
      redLight: $('#' + name + ' .cp_trafficLight_Light--redDimmed')  
     }; 
     return this.instances[name]; 
    }, 
    init : function (url, container) { 
     var instance = this.gather(container, url); 
     this.getResponse(instance); 
    }, 
    successResponse : function (instance) { 
     instance.errorCode = false; 
     instance.redLight.removeClass('redBright'); 
     instance.greenLight.addClass('greenBright'); 
     if (instance.blinkInterval) { 
      clearInterval(instance.blinkInterval); 
     } 
    }, 
    errorResponse : function (instance) { 
     instance.errorCode = true; 
     instance.greenLight.removeClass('greenBright'); 
     instance.blinkInterval = setInterval(function() { 
      console.log(instance.redLight); 
      if (instance.redLight.hasClass('redBright')) { 
       instance.redLight.removeClass('redBright'); 
       instance.redLight.addClass('redDimmed '); 
      } 
      else { 
       instance.redLight.removeClass('redDimmed'); 
       instance.redLight.addClass('redBright ');   
      } 
     }.bind(instance), this.settings.flashError); 
    }, 
    getResponse : function (instance) { 
     var module = this; 
     setInterval(function() { 
      $.ajax(instance.url, { 
       success: function() { 
        module.successResponse(instance); 
       }, 
       error: function() { 
        module.errorResponse(instance); 
       } 
      });  
     }, this.settings.requestTime); 
    } 
} 
requestResponses.init('/status1', $('#one')); 
requestResponses.init('/status2', $('#two')); 
</script> 
</body> 
</html>

출처

2017-02-13 15:20:46 Shilly

이렇게 하시겠습니까? 오류가 발생했습니다. 나는 당신의 해결책을 이해한다. 그러나 내가 그것이 어떻게 전개되고 있다고 상상했던 지에 관해서는 외국 사람과 조금 다를 것 같다. 당신이 볼 수 있다면 나는 당신의 대답을 위로 엄지 손가락을 올리겠다 https://jsfiddle.net/73tex200/4/ – Rebecca

나는 그 코드를 업데이트했다. 그것은 syntaxerror가 없어야한다. 나는 바이올린이 컨텍스트 바인딩으로 이상한 일을하기 때문에 피들 아아에서 작동하도록 깜박 거리지 못했습니다. 실제 브라우저에서이 버전을 사용해보고 오류가 있는지 확인하십시오. 기본적으로 우리는 클래스처럼 많이 움직이는 모듈을 여기에 만들었습니다. 클래스 스타일로 쓰는 것은 '깨끗이'될 것입니다. 프로토 타입 등이 어떻게 작동하는지 알고 있습니까? 그렇다면 Jonas가 공장 설명으로 제안한대로 프로토 타입 버전으로 업데이트 할 수 있습니다. (이해하기 쉽습니다. 프로토 타입을 아는 경우). – Shilly

안녕하세요. Shilly, 정말로 도움을 주셔서 감사합니다. 슬프게도 아쉽게도 로컬로 작동하지 않습니다. 오류는 없지만 원하는 경우 직접 메시지를 보낼 수 있으며보고있는 화면을 보낼 수 있습니다. 깜박 거리지 않지만 많은 물체가 즉시 적재됩니다. – Rebecca

코드를 모듈화하여 한 번에 여러 구성 요소를 실행하십시오.

답변

관련 문제