หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

โอกาส

วิดีโอยอดนิยมของ Plug-and-Play Play CSS/JS

ดูการสาธิต·รายงานข้อบกพร่องหรือคุณลักษณะการร้องขอ·หน้ารีจิสทรี NPM

สารบัญ

  • เกี่ยวกับโครงการ
    • สร้างขึ้นด้วย
    • รายการกิจกรรม
  • เริ่มต้น
    • ข้อกำหนดเบื้องต้น
  • การใช้งานขั้นพื้นฐาน
  • การใช้งานขั้นสูง
    • Memeevent Lifecycle
    • อาร์กิวเมนต์เสริม
  • การสนับสนุนเบราว์เซอร์
  • การบริจาค
  • ใบอนุญาต
  • ผู้ติดต่อ

เกี่ยวกับโครงการ

ห้องสมุด UI ที่ไม่มีการพึ่งพาเฟรมเวิร์กซึ่งแสดงถึงสภาพแวดล้อมของเบราว์เซอร์วิดีโอมส์ที่คุณชื่นชอบเช่น Jojo's จะดำเนินต่อไปหรือควบคุมชื่อความกระตือรือร้นของคุณ

meme ทุกอย่างเป็นเพียงฟังก์ชั่นที่คุณสามารถผูกมัดเป็นตัวจัดการกับเหตุการณ์ใด ๆ ที่คุณต้องการ w/o ผ่านข้อโต้แย้งใด ๆ ในรูปแบบที่ง่ายที่สุดทำให้การใช้งานของห้องสมุดนี้ง่าย Breezy

สร้างขึ้นด้วย

หากคุณกำลังจะมีส่วนร่วมโปรดจำไว้ว่าโครงการนี้ใช้:

  • Webpack อัดแน่นไปด้วย Babel, Postcss และสิ่งอื่น ๆ
  • Jest and Test Cafe สำหรับหน่วย/การรวมและการทดสอบอัตโนมัติ E2E
  • Travis CI สำหรับคุณรู้ไหม
  • ESLINT และสวยกว่าสำหรับผ้าสำลีและการจัดรูปแบบทุกชนิด

รายการกิจกรรม

เหตุการณ์ที่นำไปใช้ในปัจจุบัน:

  • 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'

ถัดไป:

  • กลับใจ
  • ดาวตก
  • คุณเสียชีวิต

อาจจะ:

  • FBI เปิดขึ้น
  • ที่สูญเปล่า

คำเตือน! โครงการนี้สนุกมากและง่ายต่อการมีส่วนร่วม อย่าลังเลที่จะมีส่วนร่วม!

เริ่มต้น

มี 2 ​​วิธีที่แนะนำในการใช้งาน MEME:

  • ผ่าน CDN -> ตัวเลือก 1
  • ผ่าน NPM Registry -> ตัวเลือก 2

ข้อกำหนดเบื้องต้น

ตัวเลือกที่ 1

ในการใช้งาน MEME-events ผ่าน CDN คุณต้องรวมลิงค์เหล่านี้ไว้ใน <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

แน่นอนคุณควรมีแพ็คเกจของคุณ json เริ่มต้น

การใช้งานขั้นพื้นฐาน

ตัวเลือกที่ 1

ในสคริปต์หลักของคุณคุณควรจะสามารถคว้าเหตุการณ์ meme ที่มีอยู่ได้โดยตรงจากวัตถุ 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' ) )

ความเต็ม 

// @TODO

การใช้งานขั้นสูง

Memeevent Lifecycle

ทุกเหตุการณ์ 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 )
}

อาร์กิวเมนต์เสริม

คุณสามารถใช้ประโยชน์จากอาร์กิวเมนต์ที่เป็นตัวเลือกเหล่านี้และปรับปรุงประสบการณ์ของคุณด้วย Events-events โดยการผ่านและวัตถุในระหว่างการเชื่อมต่อตัวจัดการกับเหตุการณ์ที่มี fnOnStart หรือ/และ 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 ( ) )

การสนับสนุนเบราว์เซอร์

ปัจจุบันคุณลักษณะที่มีเลือดออกมากที่สุดที่ได้รับประโยชน์ในห้องสมุดคือองค์ประกอบเสียงส่วนที่เหลือคือสิ่งพื้นฐาน ES6+ ที่ได้รับการจัดการโดยบาเบลในระหว่างการสร้าง Prod

ดังนั้นตาม Caniuse มันค่อนข้างปลอดภัยที่จะคิดว่า Event-Events รุ่นที่รวบรวมจะบินบน IE8+, Edge 12+ และดังนั้นเกือบทุกรุ่นของ Chrome & FF & Safari

ข้อยกเว้นเพียงอย่างเดียวคือโอเปร่ามินิ แต่ขอให้ซื่อสัตย์ใครสนใจ

การบริจาค

Meme-Events เป็นสถานที่ที่น่าทึ่งในการเริ่มต้นให้กับโอเพ่นซอร์ส มันถูกเขียนขึ้นใน Pure ES6+การทดสอบโครงสร้างพื้นฐานพร้อมแล้วไม่มีรหัส async ที่ยุ่งยากไม่มี API ของบุคคลที่สามนอกเหนือจากการขอสินทรัพย์จาก Cloudinary

อย่างไรก็ตามมีปัญหามากมายที่คุณต้องแก้ไข:

  • พิจารณาเพิ่มการทดสอบหน่วย/int เพิ่มเติม
  • เขียนการทดสอบ E2E อัตโนมัติด้วย Test Cafe
  • ความช่วยเหลือในการใช้งาน MEMES ไม่ช้า หรือ อาจเป็น รายการ
  • ใช้ meme ที่คุณชื่นชอบด้วยตัวคุณเอง
  • ทำให้เหตุการณ์ meme ที่มีอยู่ดีขึ้น

โปรดจำไว้ว่าแม้ว่าคุณจะเริ่มเขียนโค้ดเหมือน 2 สัปดาห์ที่ผ่านมาคุณยังสามารถแก้ไขความผิดพลาดหรือปรับปรุงโครงสร้างของเอกสารนี้ได้ในส่วนปัญหาการสั่งซื้อหรือเพียงแค่หา meme ตลกที่จะรวมอยู่ในห้องสมุดและขอการนำไปใช้งานโดยการเพิ่มรายการ ในไม่ช้า

มันใช้งานได้ทั้งสองวิธีจริง ๆ ถ้าคุณมีประสบการณ์สุดยอดมันจะน่าอัศจรรย์ถ้าคุณสามารถตรวจสอบซอร์สโค้ดและทำ refactor บางส่วนให้สถาปัตยกรรมหรืออย่างน้อยก็ชี้ไปที่คอขวดที่จะลบออกและข้อผิดพลาดที่ชัดเจน

การมีส่วนร่วมใด ๆ ที่คุณทำ จะได้รับการชื่นชมอย่างมาก

  1. แยกโครงการ
  2. โคลนกับเครื่องในพื้นที่ของคุณ
  3. สร้างสาขาคุณลักษณะของคุณ ( git checkout -b feature/AmazingFeature )
  4. ทำในสิ่งที่คุณตั้งใจจะทำโดยพิจารณาโครงสร้างโครงการโดยรวมและรักษาความครอบคลุมการทดสอบตามนั้น
  5. กระทำการเปลี่ยนแปลงของคุณ ( git commit -m 'Add some AmazingFeature' )
  6. Push to the Branch ( git push origin feature/AmazingFeature )
  7. เปิดคำขอดึง
  8. คุณยอดเยี่ยมมาก!

รายการคำสั่ง: ตัวอย่างที่ได้รับด้วย yarn แต่ใช้งานได้กับ NPM ด้วย

  • yarn clean - ลบ dist/ directory
  • yarn test - เรียกใช้การทดสอบทั้งหมดด้วยผ้าสำลีและการจัดรูปแบบ
  • yarn coverage - เรียกใช้การทดสอบทั้งหมดด้วยรายงานความครอบคลุม
  • yarn test:unit การทดสอบหน่วยเรียกใช้
  • yarn test:unit:watch - เหมือนกัน แต่เรียกใช้ใหม่ในการเปลี่ยนแปลง
  • yarn test:int - Run Integration Tests
  • yarn test:int:watch - เหมือนกัน แต่กลับมาจากการเปลี่ยนแปลง
  • yarn lint - Run Eslint
  • yarn format - ทำงานสวยขึ้น
  • yarn build - เรียกใช้ Webpack

หมายเหตุสำคัญล่าสุด ในเหตุการณ์ที่นำเสนอแล้วมีสินทรัพย์คงที่บางอย่างเช่นแบบอักษรและไฟล์. mp3 ที่ร้องขอจากคลาวด์ ACC ส่วนตัวของฉัน แน่นอนว่าฉันไม่สามารถเปิดเผยต่อสาธารณะได้ดังนั้นจึงมีวิธีแก้ปัญหาที่ค่อนข้างตรงไปตรงมาสองอย่าง: ใช้ ACC คลาวด์ของคุณเองหรือเก็บสินทรัพย์ไว้ในพื้นที่ หากการประชาสัมพันธ์ของคุณถูกรวมเข้าด้วยกันฉันจะย้ายสินทรัพย์คงที่ทุกครั้งไปยัง ACC ของฉัน

โปรดใช้ปัญหาและดึงแม่แบบคำขอที่คุณอาจพบใน repo นี้ หากคุณมีคำถามเฉพาะใด ๆ อย่าลังเลที่จะติดต่อฉัน

ใบอนุญาต

แจกจ่ายภายใต้ใบอนุญาต MIT ดู LICENSE สำหรับข้อมูลเพิ่มเติม

ผู้ติดต่อ

Kirill Bolotsky - Twitter - [email protected] - bolotsky.dev

ลิงค์โครงการ: GitHub

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด