meme events
Lazy Eye One Degree
流行視頻模因的插件CSS/JS版本
查看演示·報告錯誤或請求功能·NPM註冊表頁面
框架 - 敏銳的無依賴性UI庫，可暴露於瀏覽器環境您最喜歡的視頻模因，例如可以繼續或遏制您的熱情標題。
每個模因都是一個函數。
如果您要做出貢獻，請記住該項目使用：
當前實施的事件：
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'下一步：
或許：
警告！這個項目非常有趣且易於貢獻。不要猶豫參加！
恰好有2種推薦的使用模因事件的方法：
選項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當然，您應該啟動包裹。
選項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每個模因事件都遵循相同的基本結構：
// 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或/and fnOnFinish事件來增強您的模因事件的經驗：
document . body . addEventListener ( 'click' , toBeContinuedMemeEvent ( {
fnOnStart : ( ) => console . log ( 'Event has been started' ) ,
fnOnFinish : ( ) => console . log ( 'Event has just finished' )
} ) )React/Vue/其他相同的原則。
此外， 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 ( ) ) 目前，在庫中利用的最出血的邊緣功能是音頻元素，其餘的是Babel在Prod Building期間處理的基本ES6+東西。
因此，根據Caniuse的說法，可以肯定地認為，編譯的Meme-events的版本將在IE8+，Edge 12+上飛行，因此幾乎所有版本的Chrome＆FF＆FF＆Safari都會飛行。
當然，它的唯一例外是歌劇迷你，但老實說，誰在乎。
Meme-events是開始為開源做出貢獻的絕妙場所。它用純ES6+編寫，測試基礎架構已準備就緒，不涉及繁瑣的異步代碼，除了請求Cloudinary的資產之外，沒有其他第三方API。
但是，您有很多問題要解決：
請記住，即使您像2週前一樣開始編碼，您仍然能夠糾正該文檔的錯別字或改進結構，將其放置在“問題”部分中，或者只是找到將有趣的模因包含在庫中，並通過添加到即將到來的列表中要求其實現。
實際上，它在這兩種方面都可以工作，如果您超級經驗豐富，如果您可以查看源代碼並進行一些重構，給予一些架構，或者至少要刪除瓶頸，並且要糾正明顯的錯誤，那就太神奇了。
您所做的任何貢獻都非常感謝。
git checkout -b feature/AmazingFeature ）git commit -m 'Add some AmazingFeature' ）git push origin feature/AmazingFeature ）命令列表： yarn給出的示例，但也可以與NPM一起使用
yarn clean - 卸下dist/目錄yarn test - 用絨毛和格式運行所有測試。yarn coverage - 通過覆蓋報告進行所有測試。yarn test:unit - 運行單位測試yarn test:unit:watch - 相同但重新運行更改yarn test:int - 運行集成測試yarn test:int:watch - 相同但在更改上返回yarn lint - 運行Eslintyarn format - 運行更漂亮yarn build - 運行WebPack。在已經呈現的事件中，最後一個重要的說明有一些靜態資產，例如字體和.mp3文件，要求我個人Cloudinary ACC要求。當然，我不能公開它，因此有兩個非常簡單的解決方法：使用您自己的Cloudinary ACC或在本地保留資產。如果您的公關合併，我還是將每個靜態資產都移至我的ACC。
請使用問題並拉出您可能在此存儲庫中找到的請求模板。如果您有任何特定問題，請隨時與我聯繫。
根據MIT許可分發。有關更多信息，請參見LICENSE 。
Kirill Bolotsky -Twitter [email protected] -Bolotsky.dev
項目鏈接：GitHub
