Ruby on Rails 중 jqueryujs 구성 요소 가 속 도 를 늦 추 는 문제 해결

jquery_ujs 는 rails 에 있어 서 매우 중요 한 구성 요소 로 rails 의 기본 구성 요소 에 포함 되 어 있 습 니 다.
jquery ujs 는 대화 상자 확인,ajax 트리거,폼 제출 버튼 자동 사용 하지 않 기 등 매우 편리 한 기능 을 포함 하고 있 습 니 다.본 고 는 주로 ajax 를 촉발 하 는 기능 을 토론 합 니 다.
간단 한 태그 속성 을 추가 함으로써 jquery ujs 는 자바 스 크 립 트 코드 를 쓰 지 않 고 일반적인 링크 나 폼 을 ajax 로 변환 하여 제출 할 수 있 습 니 다.

<%= link_to '    ', close_project_path(project), remote: true, method: :post %>

위의 코드 는 다음 과 같은 코드 를 생 성 할 것 이다.

<a href="/projects/1/close" data-remote="true" data-method="post">    </a>

사용자 가 클릭 하면 가리 키 는 주소/procjects/1/close 를 실행 합 니 다.method 는 get 의 일반적인 요청 이 아 닌 post 의 ajax 요청 을 실행 하여 ajax 호출 을 편리 하 게 합 니 다.
인터넷 속도 가 느 려 서 생 긴 문제
일이 모두 아름 다운 것 은 아 닙 니 다.네트워크 속도 가 느 릴 때 jquery ujs 의 이 실현 에 문제 가 생 길 수 있 습 니 다.문서 가 불 러 오지 않 으 면 사용자 가 링크 를 클릭 하면 페이지 는 링크 주소 로 가 는 GET 요청 을 합 니 다.페이지 는 이동 하지만 이 주 소 를 가리 키 는 GET 요청 은 존재 하지 않 을 수 있 습 니 다.그러면 오류 가 발생 할 수 있 습 니 다.
사용자 가 관련 이 슈 를 제기 한 적 이 있 지만 개발 자 는 수리 하지 않 았 습 니 다.그러나 인터넷 속도 가 느 린 것 은 중국의 국정 입 니 다.문 제 는 우리 가 처리 해 야 합 니 다.CSS 3 의 일부 특성 을 통 해 이 문 제 는 해결 하기 어렵 지 않 습 니 다.

pointer-events
pointer-events: none;

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

이 속성 은 요소 의 클릭 이 벤트 를 금지 할 수 있 습 니 다.일반 CSS 는 먼저 불 러 옵 니 다.페이지 로 딩 이 완료 되 기 전에 jquery ujs 와 관련 된 요소 에 pointer-events:none 을 적용 하 는 것 을 제어 하면 됩 니 다.스타일,페이지 로 딩 이 끝 난 후에 이 스타일 을 제거 하면 네트워크 속도 가 느 린 상황 에서 페이지 로 딩 이 완료 되 지 않 았 을 때 사용자 가 rmote 링크 를 클릭 하여 발생 하 는 오 류 를 해결 할 수 있 습 니 다.
해결 방안
다음 전역 스타일 을 추가 합 니 다.기본적으로 data-remote 와 data-method 속성 이 있 는 탭 은 클릭 할 수 없습니다.body 요소 가 ready 라 는 css class 를 포함 하지 않 는 한 클릭 할 수 없습니다.

[data-remote], [data-method] {
 pointer-events: none;

 button, input[type=submit] {
  pointer-events: none;
 }
}

body.ready {
 [data-remote], [data-method] {
  pointer-events: auto;

  button, input[type=submit] {
   pointer-events: auto;
  }
 }
}

그리고 간단 한 스 크 립 트 를 통 해 페이지 를 불 러 온 후 body 요소 에 ready class 를 추가 합 니 다.

$(document).ready ->
 $('body').addClass('ready')

그래서 문 제 는 쉽게 해결 되 었 다.