cardboard js
1.0.0
ยินดีต้อนรับสู่กระดาษแข็ง เฟรมเวิร์กรีแอกทีฟ ที่เบามาก ( ประมาณ 18kb ) มีประสิทธิภาพ และ เรียบง่ายมาก มันมีเกือบทุกอย่างที่คุณคาดหวังจากกรอบการทำงานที่สมบูรณ์ เช่นเดียวกับการจัดการสถานะ ส่วนประกอบ ตรรกะ และส่วนที่เหลือ แต่หากไม่ต้องการ คุณไม่จำเป็นต้องเขียน HTML, CSS หรือ JSX เลย ดูว่า มันสามารถทำอะไรได้บ้าง
มันคล้ายกันในปรัชญากับ VanJS ถ้ามันดังกริ่ง แต่มีคุณสมบัติเพิ่มเติมมากมาย และ API ที่กว้างขวางกว่า
!บันทึก! : กระดาษแข็งอยู่ระหว่างการพัฒนา โปรดใช้ด้วยความระมัดระวัง
คุณสามารถตรวจสอบเหตุการณ์สำคัญ v1.0.0 เพื่อดูสถานะการพัฒนา - ขอขอบคุณความช่วยเหลือมาก!
const Counter = ( ) => {
const count = state ( 0 ) ;
return button ( )
. text ( `Clicked $count times` , { count } )
. addStyle ( 'color' , 'gray' )
. stylesIf ( count , { color : 'black' } ) // If count > 0, it will make the color black
. clicked ( ( _ ) => count . value ++ ) ;
} ;
// Counter will be added to the body
tag ( '(body)' ) . append ( Counter ( ) ) ; npm install https://github.com/nombrekeff/cardboard-js
import { tag , init , allTags } from 'cardboard-js' ;
// Or
import { tag , init , allTags } from 'node_modules/cardboard-js/dist/cardboard.js' ;
const { div , p , span , b , script , button , style , a , hr } = allTags ;
const root = attach ( tag ( '(body)' ) ) ;
root . append ( div ( p ( 'Hello world!' ) ) ) ; หากต้องการเพิ่มลงในเว็บไซต์และเริ่มใช้ Cardboard ให้นำเข้าไฟล์บันเดิล โดยทำดังนี้
< script src =" node_modules/cardboard-js/dist/bundle/cardboard.bundle.js " > </ script >
< script >
const { div , p } = Carboard . allTags ;
</ script >ปรัชญาคือการสามารถสร้างเว็บแอปที่ทำงานได้อย่างสมบูรณ์และทำงานได้อย่างสมบูรณ์โดยไม่จำเป็นต้องใช้ HTML, CSS หรือ JSX แค่ JS หรือ TS แทนที่จะเขียน HTML แล้วสร้าง JS ที่โต้ตอบกับ HTML และเพิ่ม CSS เพื่อจัดสไตล์หน้า คุณเขียนโค้ดที่แสดงถึงทั้ง HTML , CSS , state และ logic โดยตรง
คุณไม่จำเป็นต้องมีกระบวนการบิลด์/คอมไพล์ ( เว้นแต่คุณจะใช้ TS หรือต้องการ ) เนื่องจากกระดาษแข็งนั้นมีน้ำหนักเบามาก คุณจึงสามารถเขียนแอปของคุณเป็นโมดูล es6 ได้ ( ตรวจสอบตัวอย่างนี้เพื่อดูตัวอย่างการตั้งค่า ) ได้ ดังนั้นจึงไม่จำเป็นต้องมีกระบวนการสร้างใดๆ อย่างน้อยก็เพื่อการพัฒนา
โดยนำเสนอโซลูชัน การจัดการสถานะ ที่แข็งแกร่งตั้งแต่แกะกล่อง แนวคิดนี้คล้ายกับปฏิกิริยา คุณสร้างสถานะ จากนั้นใช้สถานะในแอปของคุณ และเมื่อใดก็ตามที่สถานะเปลี่ยนแปลง สถานะจะอัปเดตโดยอัตโนมัติทุกที่ที่คุณเคยใช้
นี่คือรายการคุณสมบัติบางอย่างที่มีให้ ( ยังมีมากกว่านั้น ):
style และเขียน CSS เป็นวัตถุ JS ได้โดยตรงproperties สไตล์ ฯลฯ...)หมายเหตุ: นอกจากนี้ยังมีทางเลือกฝั่งเซิร์ฟเวอร์สำหรับ Cardboard ที่ฉันเขียนด้วยเรียกว่า Hobo ในกรณีที่คุณต้องการสิ่งที่คล้ายกับ Cardboard ที่ใช้งานได้ฝั่งเซิร์ฟเวอร์! ฉันกำลังวางแผนที่จะทำให้ Cardboard ใช้งานได้ฝั่งเซิร์ฟเวอร์เช่นกันในเวอร์ชัน 2.0.0 ดังนั้นคุณสามารถตั้งตารอหรือช่วยเหลือได้!
หากคุณไม่ชอบเขียน HTML, CSS หรือ JSX เหมือนฉัน หรือต้องการเฟรมเวิร์กที่เรียบง่ายและมีน้ำหนักเบาซึ่งสามารถทำสิ่งต่างๆ ได้เกือบทั้งหมดเช่นเดียวกับเฟรมเวิร์กที่ใหญ่กว่าสามารถทำได้โดยใช้พื้นที่ที่เล็กกว่าแต่ยังมีประสิทธิภาพสูง Cardboard อาจเหมาะสำหรับคุณ! Cardboard สามารถใช้สร้างอะไรก็ได้ตั้งแต่หน้าคงที่ไปจนถึงแอปขั้นสูง เช่น แดชบอร์ด มันน่าจะทำได้เกือบทุกอย่าง!
แต่มันเหมาะอย่างยิ่งเมื่อคุณต้องการสร้างเพจขนาดเล็กมากซึ่งคุณต้องการเฟรมเวิร์กเชิงโต้ตอบและคุณต้องสร้างมันอย่างรวดเร็ว
ฉันจะไม่โกหก ฉันไม่ได้คาดหวังว่าฉันจะเขียนสิ่งนี้เมื่อเริ่มเขียน Cardboard ครั้งแรก มันควรจะเป็นการทดลองเล็กๆ น้อยๆ สำหรับโปรเจ็กต์อื่นของฉัน (Hobo) ที่ฉันคิดว่าจะล้มเหลว
การทดลองคืออะไร? ฉันได้ยินคุณถาม มันเป็นเพียงเพื่อให้ Hobo ทำงานกับ DOM แทนที่จะเรนเดอร์ HTML เป็นสตริง มันตลกดีที่บางครั้งสิ่งต่างๆ เกิดขึ้น! เราไม่มีทางรู้ว่าเราจะสร้างสิ่งที่น่าภาคภูมิใจเมื่อใด
คุณสามารถอ่านบทความที่ฉันทำเกี่ยวกับวิธีสร้างกระดาษแข็งแบบร่างเบื้องต้นได้!
ฉันจะไม่เล่าเรื่องทั้งหมดให้คุณฟัง แต่จงรู้ไว้ว่า Cardboard เริ่มต้นจากการทดลองที่ตั้งใจจะล้มเหลว แต่ด้วยเหตุผลบางประการ ทุกชิ้นจึงเริ่มเข้ากันได้อย่างลงตัว จนถึงทุกวันนี้ที่ Cardboard ถือได้ว่าใช้งานได้จริง ยังไม่เสร็จ ยังมีงานอีกมากก่อนถึงจุดนั้น นั่นพาเราไปหาคุณ ฉันหวังว่าคุณจะพิจารณาช่วยเหลือ มาทำให้ Cardboard คุ้มค่ากับเนื้อหากันเถอะ ;)
ทำไมชื่อ? : เรื่องตลกก็ไม่ใช่จริงๆ ชื่อ Cardboard เพื่อรักษาแบรนด์ Hobo แต่คุณอาจคิดว่ามันชื่อนั้นก็ได้ เพราะก็เหมือนกับกระดาษแข็ง มันมีประโยชน์ เบา อเนกประสงค์ และราคาถูก
สวัสดี! ฉันเปิดรับความช่วยเหลือในโครงการต่างๆ อยู่เสมอ และโดยเฉพาะโครงการนี้! หากคุณพบว่าโปรเจ็กต์นี้น่าสนใจ มีประโยชน์ สนุกสนาน หรือรู้สึกถึงอารมณ์อื่นๆ และอารมณ์นั้นโน้มน้าวให้คุณพิจารณาช่วยเหลือ นั่นคงจะดีมาก!
คุณสามารถช่วยเหลือ Wiki โดยใช้และทดสอบโครงการ รายงานจุดบกพร่อง แก้ไขจุดบกพร่อง เพิ่มคุณสมบัติ ฯลฯ... อย่าลืมทิ้งปัญหาไว้หากการเปลี่ยนแปลงมีขนาดใหญ่หรือเปลี่ยนแปลงแนวคิดหลักบางประการของกระดาษแข็ง
ดูคำแนะนำเหล่านี้:
