meme events
Lazy Eye One Degree
인기있는 비디오 밈의 플러그 앤 플레이 CSS/JS 버전
데모보기 · 보고서 또는 요청 기능 · NPM 레지스트리 페이지 페이지
브라우저 환경에 노출되는 프레임 워크 공유 의존성 UI 라이브러리 Jojo와 같은 좋아하는 비디오 밈을 계속하거나 열정 제목을 억제합니다.
모든 밈은 가장 간단한 형태로 인수를 전달할 수없는 모든 이벤트에 핸들러로 바인딩 할 수있는 기능 일뿐입니다.이 라이브러리를 쉽게 사용합니다.
기여하려면이 프로젝트가 사용한다는 점을 명심하십시오.
현재 구현 된 이벤트 :
import { toBeContinuedMemeEvent } from 'meme-events'
import 'meme-events/src/events/toBeContinuedMemeEvent/toBeContinuedMemeEvent.css' import { creditsMemeEvent } from 'meme-events'
import 'meme-events/src/events/creditsMemeEvent/creditsMemeEvent.css'다음에 오는 것 :
아마도:
경고! 이 프로젝트는 매우 재미 있고 기여하기 쉽습니다. 주저하지 말고 참여하십시오!
Meme-Events를 사용하는 것이 정확히 두 가지 권장 방법이 있습니다.
옵션 1
CDN을 통해 Meme-Events를 사용하려면이 링크를 <head> 에 포함시켜야합니다.
<!-- Add the requiring meme-events.css for styling -->
< link rel =" stylesheet " type =" text/css " href =" https://cdn.jsdelivr.net/npm/meme-events@latest/dist/meme-event.min.css " />
<!-- Add the requiring meme-events.js (keep in mind the script queue though) -->
< script defer src =" //cdn.jsdelivr.net/npm/meme-events@latest/dist/meme-events.min.js " > </ script >또는
< link rel =" stylesheet " type =" text/css " href =" https://unpkg.com/meme-events@latest/dist/meme-event.min.css " />
< script defer src =" https://unpkg.com/meme-events@latest/dist/meme-event.min.js " > </ script >옵션 2
Via NPM 사용은 프로젝트 디렉토리 유형의 다른 모든 라이브러리와 거의 동일합니다.
npm install --save meme-events또는
yarn add meme-events물론, 당신은 당신의 package.json을 시작해야합니다.
옵션 1
기본 스크립트에서는 기존 밈 이벤트를 window 객체에서 직접 가져올 수 있어야합니다.
const { toBeContinuedMemeEvent } = window
// yes, it is meant to be invoked there - every event
// uses currying to deliver optional args (none this time)
document . body . addEventListener ( 'click' , toBeContinuedMemeEvent ( ) )옵션 2
그런 다음 필요한 것을 가져 와서 핸들러로 바인딩하십시오.
반응
import React from 'react'
import ReactDOM from 'react-dom'
import { toBeContinuedMemeEvent , creditsMemeEvent } from 'meme-events'
// import css files of chosen events
import 'meme-events/src/events/toBeContinuedMemeEvent/toBeContinuedMemeEvent.css'
import 'meme-events/src/events/creditsMemeEvent/creditsMemeEvent.css'
const MemeEventsBtnsRow = props => {
return (
< >
// setting first imported event as click handler for the first btn
< button onClick = { toBeContinuedMemeEvent ( ) } > Click Me! </ button >
// setting second imported event as click handler for the second btn
< button onClick = { creditsMemeEvent ( ) } > Click Me Too! </ button >
</ >
)
}
ReactDOM . render ( < MemeEventsBtnsRow /> , document . getElementById ( 'root' ) ) vue
// @TODO모든 MEME 이벤트는 동일한 기본 구조를 따릅니다.
// pseudocode
const DefaultMemeEvent = ( { fnOnStart = ( ) => { } , fnOnFinish = ( ) => { } = { } ) => event => {
// checks if this event is already running to prevent multuple activation
eventIsRunning ( )
// dispatch custom event on body element whose name is consisted of
// part that goes before 'MemeEvent', in this case 'Default' + 'OnStart'
document . body . dispatchEvent ( 'DefaultOnStart' )
// runs fnOnStart if exists, standard event object passed as an arg
fnOnStart && fnOnStart ( event , terminate )
// inner stuff that renders UI so on...
innerStuff ( )
//dispatch another custom event instance but with 'OnFinish' postfix
document . body . dispatchEvent ( 'DefaultOnFinish' )
//runs fnOnFinish if exists, standard event obj passed as an arg
fnOnFinish && fnOnFinish ( event )
} fnOnStart 또는/및 fnOnFinish 포함 된 이벤트에 바인딩 핸들러를 통과하고 객체를 통과시켜 MEME-Events에 대한 경험을 활용하고 MEME-Events에 대한 경험을 향상시킬 수 있습니다.
document . body . addEventListener ( 'click' , toBeContinuedMemeEvent ( {
fnOnStart : ( ) => console . log ( 'Event has been started' ) ,
fnOnFinish : ( ) => console . log ( 'Event has just finished' )
} ) )반응/vue/uthing의 동일한 원칙.
또한 fnOnStart 초기 event 객체 및 terminateEvent 기능을 수신하며 fnOnFinish 도 동일한 event OBJ를받습니다.
const customFnObj = {
fnOnStart : ( event , terminateEvent ) => {
console . log ( event . target ) // -> outputs event src element
document . body . onclick = function clickHandler ( ) {
terminateEvent ( ) // -> immediately interrupts active event after any
// user click on the page and clears prints
document . body . removeEventListener ( clickHandler ) // -> prevent
// future illegal terminateEvent invocations
} ,
fnOnFinish : event => {
...
}
}
document . body . addEventListener ( 'click' , toBeContinuedMemeEvent ( customFnObj ) )물론 위의 모든 것을 평범한 오래된 청취자와 함께 사용하고 선택적 기능 만 남길 수 있습니다.
document . body . addEventListener ( 'MemeNameOnStart' , e => {
console . log ( e . target ) - > outputs same element
document . body . onclick = function clickHandler ( ) {
e . detail . terminateEvent ( ) // -> termination fn available in detail prop
document . body . removeEventListener ( clickHandler )
} ,
} )
document . body . addEventListener ( 'MemeNameOnFinish' , e => {
console . log ( e . target )
} )
document . body . addEventListener ( 'click' , MemeNameMemeEvent ( ) ) 현재 라이브러리에서 악용되는 가장 피가 쌓이는 기능은 오디오 요소이며, 나머지는 어쨌든 Prod Building 동안 Babel이 처리하는 기본 ES6+ 재료입니다.
따라서 Caniuse에 따르면 Meme-Events의 컴파일 된 버전이 IE8+, Edge 12+ 및 거의 모든 버전의 Chrome & FF & Safari에서 비행 할 것이라고 생각하는 것은 매우 안전합니다.
물론 Opera Mini는 유일한 예외입니다. 그러나 누가 걱정하는지 정직하게합시다.
Meme-Events는 오픈 소스에 기여하기 시작하기에 놀라운 곳입니다. 순수한 ES6+로 작성되었으며 테스트 인프라가 준비되었으며 번거로운 비동기 코드가 관련되어 있지 않습니다.
그러나 귀하가 해결해야 할 많은 문제가 있습니다.
2 주 전에 코딩을 시작하더라도 여전히 오타의 오타를 수정 하거나이 문서의 구조를 개선 할 수 있고, 주문 문제 섹션을 주문하거나, 라이브러리에 포함될 재미있는 meme을 찾아서 곧 올라 오는 목록에 추가하여 구현을 요청할 수 있습니다.
실제로 경험이 많으면 소스 코드를 검토하고 리팩터를 수행하거나 아키텍처를 제공하거나 병목 현상을 제거하고 명백한 실수를 고칠 수 있다면 놀랍습니다.
당신이하는 모든 기여는 대단히 감사합니다 .
git checkout -b feature/AmazingFeature )git commit -m 'Add some AmazingFeature' )git push origin feature/AmazingFeature 명령 목록 : yarn 와 함께 제공되는 예이지만 NPM에서도 작동합니다.
yarn clean - dist/ Directory를 제거하십시오yarn test - 라인 및 서식으로 모든 테스트를 실행하십시오.yarn coverage - 적용 범위 보고서로 모든 테스트를 실행하십시오.yarn test:unit - 실행 장치 테스트yarn test:unit:watch - 동일하지만 변경 사항을 다시 실행합니다yarn test:int 실행 통합 테스트yarn test:int:watch - 동일하지만 변경 사항을 반환합니다yarn lint - eSlint를 실행하십시오yarn format - 더 예쁘게 실행하십시오yarn build - 웹 팩을 실행하십시오.마지막으로 중요한 메모 이미 제시된 이벤트에는 개인 Cloudinary ACC에서 요청 된 글꼴 및 .mp3 파일과 같은 일부 정적 자산이 있습니다. 물론, 나는 그것을 공개 할 수 없으므로 두 가지 간단한 해결 방법이 있습니다. 자신의 Cloudinary ACC를 사용하거나 자산을 현지에서 유지하십시오. PR이 병합되면 모든 정적 자산을 어쨌든 내 ACC로 옮길 것입니다.
이 repo에서 찾을 수있는 문제를 사용하고 요청 요청 템플릿을 가져 오십시오. 구체적인 질문이 있으시면 언제든지 저에게 연락하십시오.
MIT 라이센스에 따라 배포됩니다. 자세한 내용은 LICENSE 참조하십시오.
Kirill Bolotsky -Twitter [email protected] -Bolotsky.dev
프로젝트 링크 : Github
