bemtvjs

قبل أن تلعب مع BEMTV ، فكر مرتين ، وإذا كنت تستمتع كثيرًا ، فلا تفاجأ!

الترجمات:

• البرتغالية دو برازيل

---

لماذا BEMTV؟

حاليًا في النظام البيئي JavaScript ، هناك أدوات ممتازة لتطوير واجهة المستخدم. يعيد BEMTV استخدام الكثير من هذه الأدوات التي أحضرها وتأتي بها ، ومع ذلك ، فهي ليست نسخة ، إنها شيء جديد تمامًا.

الميزات الرئيسية

• بناء جملة منظف من مكتبات واجهة المستخدم الأخرى والأطر.

• لا "الدعائم". طريقة جديدة لمكون الوالدين لتمرير البيانات إلى مكونات الطفل.

• بدلاً من نظام توجيه مشترك أو استنادًا إلى الملفات ، يجلب BEMTV نظام توجيه مبتكر جديد قادر على "تحويل" مكون إلى مسار تلقائيًا وفقًا لاستخدامه في التطبيق.

• فصل المنطق المتعلق بأحداث DOM من قالب المكون.

• تقسيم الكود شبه التلقائي.

• CSS-in-JS و CSS-in-Template.

• يسمح تصميم المكونات بتصدير جميع الطرق التي تنتمي إليها ، مما يسمح باستخدام هذه الطرق في أي جزء من التطبيق.

• ربط في اتجاهين سهل بين متغيرات المكون وخصائص وسمات عنصر HTML.

• السنانير.

• وظائف التحويل التي تفصل هياكل البيانات مثل الصفيف ، وتعيين ، وخريطة ، والكائن من ترميزها للقالب.

• Brackethtml Language Language: بدلاً من <div>Hey!</div> افعل هذا: div[Hey!] .

• السكريات النحوية التعريفية من خلال قالب المكون.

• إنه مجرد JavaScript ، لا مطلوب من JSX أو وقت البناء ، فقط إضافته إلى 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 الخاصة بعنصر BIND مع المكون:

 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!

كل المساعدة موضع تقدير!

لا تنس أن تعطي نجمك للمشروع ، لأن هذا يشجعني على الاستمرار في التطور.