bemtvjs

ก่อนที่คุณจะเล่นกับ BEMTV คิดสองครั้งและถ้าคุณสนุกมากเกินไปอย่าแปลกใจเลย!

การแปล:

• โปรตุเกสทำ brasil

---

ทำไมต้อง BEMTV?

ปัจจุบันอยู่ในระบบนิเวศ JavaScript มีเครื่องมือที่ยอดเยี่ยมสำหรับการพัฒนาส่วนต่อประสานผู้ใช้ Bemtv นำเสนอสิ่งที่เครื่องมือเหล่านี้นำมาและนำมาซึ่งมันไม่ใช่สำเนามันเป็นสิ่งใหม่โดยสิ้นเชิง

คุณสมบัติที่สำคัญ

• ทำความสะอาดไวยากรณ์กว่าไลบรารี UI และเฟรมเวิร์กอื่น ๆ

• ไม่มี“ อุปกรณ์ประกอบฉาก” วิธีใหม่สำหรับองค์ประกอบหลักในการส่งผ่านข้อมูลไปยังส่วนประกอบเด็ก

• แทนที่จะเป็นระบบการกำหนดเส้นทางทั่วไปหรือขึ้นอยู่กับไฟล์ BEMTV นำระบบการกำหนดเส้นทางนวัตกรรมใหม่ที่สามารถ "เปลี่ยน" ส่วนประกอบลงในเส้นทางโดยอัตโนมัติตามการใช้งานในแอปพลิเคชัน

• การแยกลอจิกที่เกี่ยวข้องกับเหตุการณ์ DOM จากเทมเพลตส่วนประกอบ

• การแยกรหัสกึ่งอัตโนมัติ

• CSS-in-JS และ CSS-in-template

• การออกแบบส่วนประกอบช่วยให้การส่งออกของวิธีการทั้งหมดที่เป็นของมันซึ่งอนุญาตให้ใช้วิธีการเหล่านี้ในส่วนใดส่วนหนึ่งของแอปพลิเคชัน

• การผูกสองทางง่ายระหว่างตัวแปรส่วนประกอบและคุณสมบัติองค์ประกอบ HTML และแอตทริบิวต์

• ตะขอ

• ฟังก์ชั่นการแปลงที่แยกโครงสร้างข้อมูลเช่นอาร์เรย์ตั้งค่าแผนที่และวัตถุจากมาร์กอัปสำหรับเทมเพลต

• ภาษามาร์กอัป Brackethtml: แทนที่จะเป็น <div>Hey!</div> ทำสิ่งนี้: div[Hey!]

• น้ำตาลวากยสัมพันธ์ที่ประกาศผ่านเทมเพลตส่วนประกอบ

• มันเป็นเพียง JavaScript ไม่จำเป็นต้องใช้ JSX หรือ Build-Time เพียงเพิ่มลงใน index.html ของคุณและสนุก!

แสดงรหัสให้ฉันดู!

วิธีการส่วนประกอบทั้งหมดสามารถส่งออกและใช้ในส่วนอื่น ๆ ของแอปพลิเคชัน:

 import { _ } from "bemtv" ;

export const { click$ , onMount , route , css , template } = _ `Home` ( ) ;

สิ่งนี้ช่วยให้คุณสามารถแยกตรรกะส่วนประกอบออกเป็นหลายฟังก์ชั่นที่สามารถใช้วงจรชีวิตของส่วนประกอบ, จัดการองค์ประกอบ DOM, สไตล์, การกำหนดเส้นทาง, เหตุการณ์ DOM ...

การเพิ่มกิจกรรม CSS และ DOM:

 import { _ } from "bemtv" ;

export const { click$ , css , template } = _ `Button` ( ) ;

click$ ( ( ) => console . log ( "Clicked!!!" ) ) ;

css `
  color: blue;
` ;

template `button[ I am a button! ]` ;

ผูกคุณสมบัติ DOM ของ Element ด้วยส่วนประกอบ:

 import { _ } from "bemtv" ;

const { $ , template } = _ `Input` ( {
  inputValue : 0 ,
} ) ;

template `input[type="number" $inputValue<value]` ;

แสดงทางเลือกในขณะที่ส่วนประกอบกำลังนำเข้า:

 import { _ } from "bemtv" ;

const { template } = _ `App` ( ) ;

template `UserData[](Loading...)` ;

การสร้างลิงค์เส้นทาง:

 import { _ } from "bemtv" ;

const { template } = _ `App` ( ) ;

template `#AboutUs[ Link to about us ]` ;

BEMTV ใช้ระบบการสร้างเส้นทางอัตโนมัติที่เป็นนวัตกรรมเป็นไปได้เนื่องจากส่วนประกอบสามารถทำตัวเหมือนเส้นทาง/หน้า

ส่วนประกอบเคาน์เตอร์:

 import { _ } from "bemtv" ;

const { click$ , $ , template } = _ `Counter` ( { count : 0 } ) ;

click$ ( ( ) => $ . count ++ ) ;

template `button[Clicked: $count ]` ;

นี่เป็นเพียงส่วนเล็ก ๆ ของภูเขาน้ำแข็งคุณสมบัติของ Bemtv หลายแห่งแสดงพลังของพวกเขาด้วยการฝึกฝนและเมื่อรวมกับคนอื่น ๆ !

อะไรต่อไป

BEMTV เป็นโครงการล่าสุดและไม่ค่อยมีใครรู้จักฉันมีแนวคิดหลายประการในการพัฒนาไอทีและโครงการอื่น ๆ รอบ ๆ เช่นไวยากรณ์ที่เน้นการขยาย

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

หากคุณมีเวลาว่างมาเป็นส่วนหนึ่งของการสร้าง Bemtv!

ความช่วยเหลือทั้งหมดได้รับการชื่นชม!

อย่าลืมให้ดาวของคุณกับโครงการเพราะสิ่งนี้กระตุ้นให้ฉันพัฒนาต่อไป