몇 번 훔쳐보았다.com 기술(II-키보드 단축키)

우리 아주 좋은 작은 기능부터 시작합시다. 헤이, 키보드 단축키.각 Hey 페이지에는 마우스를 터치하지 않고 일반적인 작업을 수행할 수 있는 단축키가 정의되어 있습니다."?"을 누르거나 각 페이지의 오른쪽 아래에 있는 키보드 아이콘을 클릭하여 팝업 목록에서 키를 배울 수 있습니다.

기본적으로 Hey에는 두 가지 유형의 바로 가기가 있습니다. 하나는 브라우저를 다른 페이지로 가져오는 것입니다(일반적인 <a href="..."> 링크를 클릭한 것처럼). 다른 하나는 사용자 정의 JavaScript 작업을 촉발하여 현재 페이지가 상호작용을 가지도록 하는 것입니다.
네, 어떻게 일합니까?우리 는 원본 코드 를 깊이 있게 이해합시다!

페이지 변환 바로 가기

Imbox 페이지의 페이지 관리자를 열면 HTML 본문의 맨 위에 있는 키보드 단축키와 관련된 <a> 태그 몇 개가 표시됩니다.
is not a typo
그중 하나를 해부하자.보시다시피 이것은 일반적인 HTML 링크일 뿐 특별한 점은 없습니다.

<a data-controller="hotkey" data-hotkey="2" href="/feedbox" hidden="hidden">
  The Feed
</a>

Feedbox 페이지를 가리키는 URL(href)이 있습니다.

에는 "요약"내용이 하나 더 있지만 hidden 속성 때문에 페이지에 표시되지 않습니다.이것은 입니다. 이 특정 목적에만 사용됩니다. DOM의 내용을 포함하지만 표시되지 않습니다.따라서 탭은 페이지에 가만히 있고 보이지 않습니다.

은 현재 data-controller의 속성이 매우 중요합니다. 최신 버전의 Rails를 처리하는 모든 사람들이 익숙할 수 있습니다. 이것은 상응하는 자극 컨트롤러를 가리키는 바늘입니다. 이 값은 이 컨트롤러가 핫키와 관련이 있음을 나타냅니다.

마지막으로, data-hotkey 속성은 이 키보드 단축키의 특정한 키 획 정의여야 합니다. 이것은 "2" 키를 누르면 Feedbox 페이지를 불러온다는 것을 의미합니다.

BTW, I find it notable that even if we don’t have a clue how these link internals are wired together, these little tags, these single lines of HTML code still state their purpose very well. They define the shortcuts and it’s immediately obvious what key leads to what page! This is the cleanness and focus on readability that I like about Rails. In a Rails template, you would write such link somehow like this (or, even better, you would create a hotkey_link helper method):

link_to "The feed", "/feebox", data: { controller: "hotkey", hotkey: "2" }, 
                               hidden: true

핫키 링크가 어떻게 작동하는지 한층 더 이해하기 위해서 우리는 global attribute에 대해 이야기해야 한다.이것은 작고 고집이 강한 자바스크립트 프레임워크입니다. 템플릿의 JS "Spread"를 제거하고 모든 JS 코드를 이동해서 "controller"파일을 분리하고 매우 명확하고 읽을 수 있는 방식으로 페이지에 연결할 수 있습니다. HTML 속성을 통해.만약 네가 아직 자극을 받지 않았다면, 그것에게 몇 분의 시간을 주어 Stimulus을 통독하면, 너는 모든 것을 계속 해야 한다는 것을 파악할 것이다.data-controller 링크 속성은 저희를 핫키 자극 컨트롤러로 안내합니다.그럼 한번 봅시다!우리는 개발자 도구의 디버그 옵션 카드로 전환하고 웹 패키지를 전개할 것이다⟶ app/javascript⟶ controllers hotkey_controller.js의 경로를 찾고 엽니다.
Stimulus Handbook
우리는 모든 것을 아는 척은 하지 않지만, 한 가지 일이 바로 튀어나왔다. 코드는 에서 두 개의 함수, install과 uninstall을 가져왔고, 주석에는 심지어 그것을 가리키는 링크가 있다... 그래서 @github/hotkey library:
peek in
봐라!Github 라이브러리는 페이지에 핫키를 설정하는 데 필요한 모든 기본 핵심 작업을 완료했습니다.페이지에 data-hotkey 속성이 있는 요소만 필요합니다. 누군가가 주어진 키를 눌렀을 때 실제로 이 요소를 눌렀습니다.만약 우리의 요소가 <a> 표시라고 가정한다면, href 속성에서 대상 페이지에 접근하기만 하면 됩니다.
이 모든 것이 작동하려면 라이브러리에서 install 방법을 호출하여 클릭 대기 요소를 매개 변수로 해야 합니다.이것이 바로 컨트롤러를 자극하는 connect 방법이 한 것이다.상응하는 HTML 요소(예에서 connect 표기)가 DOM에 추가되었을 때, 즉 웹 페이지를 불러온 후에 입니다.
페이지 키보드 단축키의 수명 주기가 이미 끝났다고 생각합니다.

설치 바로 가기:

페이지를 불러올 때 자극 프레임워크는 핫키 링크에서 <a> 속성을 찾을 수 있습니다.

은 data-controller의 새로운 실례를 만드는 데 자극을 주고 hotkey_controller과 initialize 방법을 호출합니다.

connect 방법은 Github 키 라이브러리에서 connect 방법을 호출합니다. 이 키 라이브러리는 실제로 키에 적당한 저급 JS 이벤트 처리 프로그램을 추가합니다.

키를 누를 때:

브라우저가 저급(install) 이벤트를 촉발합니다.

이것은 Github 라이브러리 이벤트 처리 프로그램에 포착되었습니다.

이 프로세서는 원본 요소, 즉 핫키 링크를 실제로 클릭합니다.

브라우저 액세스 링크의 URL입니다.

호출 키 제어 방법 공통 작업 단축키

핫키를 눌렀을 때 페이지에 접근하지 않고 사용자 정의 JS 함수를 호출하려면 어떻게 해야 합니까?우선, 브라우저가 다른 페이지를 클릭할 때 접근하지 않도록 핫키 정의에 <a> 요소를 사용해서는 안 될 수도 있습니다.
다음으로, 우리는 을 사용하여 브라우저가 요소에서 이벤트를 눌렀을 때 어떤 동작을 호출해야 하는지 알려줄 수 있다.
Hey 소스 코드에서 예제를 찾을 수 있습니다.
Stimulus convention
이번에는 button 요소로 핫키 링크와 특별한 차이점이 있습니다. data-action 속성을 정의했습니다.

<button ... data-action="bulk-actions#select">...</button>

이것은 다음과 같은 효과가 있는 구문의 줄임말이다.

<button ... data-action="click->bulk-actions#select">...</button>

자극 약정에서 은 자극 프레임워크에 data-action 이전에 제시된 JS 이벤트를 관찰하고 사건이 촉발될 때 -> 이후에 제시된 자극 컨트롤러 동작을 호출한다.이벤트 이름을 지정하지 않으면 단추 요소에 -> attribute을 지정합니다.
따라서 우리의 예에서 click의 select 작업은 이 숨겨진 단추를 눌렀을 때 호출됩니다. 즉, 키보드의 bulk_actions_controller.js 키를 누르십시오.좋아, 그렇지 않아?

기본값은 "x" 이벤트 총결산

Github 핫키 라이브러리의 편리한 사용을 통해 웹 코드는 매우 깨끗하고 간결하게 유지할 수 있다.바로 자극 프레임워크는 코드를 매우 유연하게 하여 HTML 페이지 코드 자체를 흐트러뜨리지 않게 한다.HTML 페이지는 간단하고 깨끗하며 JS 코드는 다른 곳에 묶여 있고 캐시가 잘 됩니다.자극 약속은 전체 과정의 가독성과 예측성을 향상시킨다. 이것은 항상 좋은 일이다.
읽어주셔서 감사합니다. 더 많은 Hey tech Goods 기대해주세요!다음에 제가 아주 좋은 새로운 기능을 깊이 연구하겠습니다.− 서버에서!