ef에서 양방향으로 연결된 사용자 정의 트리거js는 하위 속성과 부모 속성을 동기화하는 것을 매우 쉽게 한다

먼저 다음 프레젠테이션을 살펴보겠습니다.
EFML 문법에 익숙하지 않을 수도 있습니다. official website (좀 유행이 지났지만 가능할 것 같습니다.) 빠르게 보고 README 자세한 사용법을 알아보십시오.
정적 템플릿을 작성하기만 하면 스크립트를 작성하지 않아도 모든 것을 연결할 수 있습니다. 대단합니다.그럴 리가요.당신은 이렇게 할 수 있습니까?
간단하고 f에 도입된 사용자 정의 양방향 귀속 트리거가 있습니다.js v0.13.0.

ef라니요?js？

ef.js was designed with simplicity and future facing in mind, with

1. completely no logic in templates;
2. no virtual dom to slow your webpage down;
3. no need for special compiler to make your project move;
4. no need for any dynamically generated functions to run which is very friendly for CSP;
5. write in pure javascript and no need for special developing environment;
6. browser supports back to IE9.

Enjoy coding with ef.js!

나는 ef를 개발하기 시작했다.js는 4년 전 Vue에서 가상dom를 사용하기 시작했다.저는 가상dom의 슈퍼팬도 아니고 선택할 수 있는 프레임도 많지 않아서 제 것을 만들었습니다. 이것은 또 다른 이야기입니다.
흥미로운 것은 제 창작은 React와 Vue보다 성능이 훨씬 우수하지만 매우 간단한 용법과 작은 패키지 크기를 제공했습니다.

ef의 양방향 귀속.js

우리는 이미 Vue에서 어떻게 양방향 귀속을 하는지 잘 알고 있다.불행하게도 Vue doc에 따르면, 우리는 여전히 Vue를 사용하여 사용자 정의 이벤트를 정확하게 처리할 수 없고, 사용자 정의 트리거를 사용하여 부모 구성 요소와 하위 구성 요소 사이를 왔다 갔다 동기화할 수 없습니다. 이것은 사용자 정의 구성 요소에서 매우 좋은 기능입니다.

이벤트 처리

ef에 있을 때js, 이벤트의 처리는 매우 직접적입니다. addEventListener 정확한 DOM 요소와 템플릿에 있는 정확한 DOM 대상이나 구성 요소delegator (흔히 볼 수 있는 DOM 대상) 에서 작성한 이벤트 형식만 있으면 됩니다.따라서 편리하게 할 수 있습니다. 실제적으로 이벤트 처리 프로그램을 터치하고 싶은 이벤트를 사용하거나, 하위 레벨에서 부모 레벨로 속성을 동기화할 수 있습니다.예를 들면 다음과 같습니다.

>button
  @click = handleClick

$methods.handleClick 이벤트가 터치되면 구성 요소의 click 방법을 호출합니다.사용자 정의 이벤트를 보내는 사용자 정의 구성 요소는?

>MyCustomComponent
  @mycustomevent = {{handleCustomEvent}}

이렇게 간단하지 않습니까?

속성 설정

이제 우리는 ef에서 사건을 어떻게 처리하는지 알게 되었다.js.그렇다면 우리는 재산 변화를 어떻게 처리합니까?여전히 간단합니다.

>input
  %value = {{inputValue}}

구성 요소 인스턴스에서 $data.inputValue를 변경하면 input 요소에 표시되는 값도 변경됩니다.

양방향 제본

쿨하다우리는 언제 쌍방향 귀속을 토론합니까?
우리는 이미:

>input
  %value = {{inputValue}}
.You typed "{{inputValue}}".

>input
  #type = checkbox
  %checked = {{checked = true}}
.Is this checkbox checked? {{checked}}

입력 상자에 확인란을 입력하거나 선택하면 값이 같은 변수 이름을 가진 어셈블리의 다른 부분과 자동으로 동기화됩니다.영예롭다.js감청input,change과keyup 템플릿에 있는 요소value 또는checked 속성을 가진 요소.

사용자 정의 양방향 귀속 트리거

지금까지 우리는 여전히 Vue처럼 보였다.무슨 차이가 있습니까?중요한 것은 사용자 정의 양방향 귀속 트리거를 정의할 수 있다는 것입니다.

>audio
  %currentTime@timeupdate = {{trackCurrentTime}}
.Current time of the track: {{trackCurrentTime}}

(본문 첫머리의 프레젠테이션 보기)
이 프레젠테이션에서 우리는 timeupdate 이벤트를 trackCurrentTime 요소의 currentTime 속성 업데이트audio로부터 트리거로 정의할 것이다.우리는 매번 timeupdate 터치할 때마다 자동으로 업데이트할 것입니다!이렇게 간단해!
이를 통해 Vue처럼 input, change 또는 keyup 이벤트를 처리하지 않고 사용자 정의 이벤트를 양방향으로 연결하는 트리거로 사용할 수 있습니다.우리는 또 아이들에게 서로 다른 사건을 일으켜 부모의 동시적인 가치 변화를 기다리도록 지시할 수 있다.사용자 정의 서브어셈블리에서 속성을 가져오려면 Vue에서 수행해야 할 작업이나 반응을 상상해 보십시오.
현재, 다른 유행하는 프레임워크 (예를 들어 React와 Vue) 에서는 이 기능이 실현될 수 없거나, 더 많은 자바스크립트를 사용하여 수동으로 실현해야 합니다.

요약

영예롭다.js는 매우 확장 가능한 전단 프레임워크로 프레젠테이션에서 아주 간단한 방법으로 보여 줍니다.그것의 간단성은 당신이 전방 개발에서 문제를 더욱 직접적으로 사고하고 더욱 효율적이고 조리 있는 코드를 작성하는 데 도움을 줄 것이다.
이것은 내가 ef에 올린 첫 번째 게시물이다.js.이 틀을 아는 사람은 드물기 때문에 끝까지 인내심을 가지고 공부하고 읽어 주셔서 감사합니다.만약 당신이 좋아한다면 저는 이런 공유를 더 많이 할 것입니다. 지난 몇 년 동안의 발전에서 저를 지지해 주신 모든 분들께 감사드립니다.js!
트위터에서 저를 팔로우하고 ef 업데이트에 대해 더 많이 알아주세요.js!