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
