الصفحة الرئيسية>المتعلقة بالبرمجة>مكونات الطرف الثالث
تنزيل

باي



ما هو bay.js؟

Bay.js هي مكتبة للواجهة الأمامية مصممة لتسهيل إنشاء مركبات الويب القابلة لإعادة الاستخدام ، وكذلك لإضافة الحالة والتفاعل إلى HTML. لرؤيتها في العمل ، يمكنك زيارة Bayjs.org واستكشاف أمثلةها.



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

  • خطوة بناء اختيارية: ما عليك سوى إضافة علامة نصية للبدء.
  • توافق سياسة أمان المحتوى الصارمة (CSP) ، حتى بدون خطوة بناء.
  • العرض متعدد الاستخدامات: تنسيقات DOM أو مكونات الويب العادية.
  • التبعيات صفر للتنفيذ خفيف الوزن.
  • القدرة على تجميع ملف واحد للمكونات المبسطة.
  • تكامل سلس مع الأطر المصممة لتقديم مآسي شبكة الويب.
  • القوالب المستندة إلى عنوان URL: تمكين عرض جانب الخادم (SSR) أو القوالب المستندة إلى PHP.
  • الاستفادة من <template> في DOM كمصدر قالب.
  • إنشاء المكون من سلاسل JavaScript للتخصيص الديناميكي.
  • بناء جملة سهلة الاستخدام للتنمية دون عناء.


تثبيت

يمكن استخدام bay.js عبر علامة نصية أو استيراد كوحدة.

علامة السيناريو: 

 < script src =" //cdn.jsdelivr.net/npm/@dunks1980/bay.js/bay.min.js " > </ script >

مثال علامة البرنامج النصي



وحدة ES: 

 < script type =" module " src =" main.js " > </ script > 
 // In main.js
import bay from '//cdn.jsdelivr.net/npm/@dunks1980/bay.js/bay.min.mjs' ;
bay ( ) ;

قد ترغب في إضافة رقم الإصدار مثل هذا لمنع كسر التغييرات: '//cdn.jsdelivr.net/npm/@dunks1980/bay.js<splex> /bay.min.mjs رقم الإصدار اختياري ويمكن الحصول عليه من الذهاب إلى صفحة حزمة NPM. أو إذا كنت تستخدم node_modules: '.
مثال على وحدة ES



وحدة NPM: 

 npm i @ dunks1980 / bay . js
import bay from '@dunks1980/bay.js' ;
bay ( ) ;

مثال NPM



إعدادات: 

 import bay from ...

bay ( {
  text : `<h1 :style="margin: 1rem;">Settings</h1>` ,
} ) ; 
 < template id =" my-template " >
  %{text} <!-- becomes: --> < h1 :style =" margin: 1rem; " > Settings </ h1 > 
</ template >

< my-component bay =" #my-template " message =" Hello world! " > </ my-component >

لا يمكن تعيين الإعدادات إلا باستخدام وحدات ES أو NPM ، ويجب أن تكون سلاسل ، ولا يمكن تعيينها إلا مرة واحدة قبل إنشاء المكونات. يمكن استخدام متغيرات الإعدادات في أي مكان داخل القوالب.
مثال الإعدادات



الاستخدام

هناك بعض الطرق لتحديد مكون في Bay.js:

1. قالب مع سمة الخليج في دوم.

في HTML ، قم بإنشاء قالب مضمّن وقم بتطبيق سمة الخليج وأي دعائم أخرى: 

 < template bay =" my-component-name " message >
  < h1 > ${this.message} </ h1 >
</ template >

< my-component-name message =" Hello world! " > </ my-component-name >


2. قالب مع معرف في دوم.

في HTML ، قم بإنشاء قالب مضمّن و Supply Bay.js معرف القوالب: 

 < template id =" my-template " >
  < h1 > ${this.message} </ h1 >
</ template >

< my-component bay =" #my-template " message =" Hello world! " > </ my-component >


3. قالب في ملف.

قم بإنشاء ملف و Supply Bay.js عنوان URL (لا ترفع محتويات الملف في القالب). يمكن أن يكون امتداد الملف أي شيء تريده طالما أن محتوياته في تنسيق HTML: 

 < my-component bay =" /url/to/my/components.html " message =" Hello world! " > </ my-component >
<!-- or -->
< my-component bay =" /url/to/my/components.php " message =" Hello world! " > </ my-component > 
 <!-- in component file -->
< h1 > ${this.message} </ h1 >


4. إنشاء قالب مع JS.

Pass Bay.js القالب المستورد: 

 import my_component from "./../component_imports/my_component.html?raw" ;
import bay from "@dunks1980/bay.js" ;
bay ( ) ;
bay . create ( "my-component" , my_component , [ "message" ] ) ;

أو إنشاء قالب ومرره: (سيحتاج $ و `داخل السلسلة إلى الهروب إذا كانت سلسلة حرفية) 

 import bay from "@dunks1980/bay.js" ;
bay ( ) ;
bay . create ( "my-component" , `<h1>${this.message}</h1>` , [ "message" ] ) ; 
 <!-- Anywhere in the HTML including other components -->
< my-component message =" Hello world! " > </ my-component >


5. باستخدام حليفة الخليج.

في HTML ، قم بإنشاء عنصر مضمّن مع قالب في الداخل ، ثم أضف حلياء الخليج إلى العنصر المحتوي: 

 < div bay-hydrate >
  < h1 > This will be replaced once bay creates the component. </ h1 >
  < template >
    < h1 > ${this.message} </ h1 >
    < script > this . message = 'Hello World!' </ script >
  </ template >
</ div >

لن تتوفر الدعائم باستخدام هذه الطريقة ، ولكن يمكنك استخدام الإعدادات. يتم تقديم المحتوى إلى DOM الرئيسي ، لذا لن يتم تغليف أنماطه ولن يكون للعلامات <style> المحددة في القالب أي تأثير.



6. باستخدام DSD (الظل التعريفي DOM).

في HTML ، قم بإنشاء عنصر مضمّن مع قالب من الداخل ، ثم أضف Bay = "DSD" إلى العنصر و ShadowrootMode = "Open" إلى عنصر القالب: 

 < my-component bay =" dsd " >
  < template shadowrootmode =" open " >
    < dsd >
      < h1 id =" title " > loading... </ h1 >
    </ dsd >
    < noscript >
      < h1 id =" title " > ${this.header_text} </ h1 >
    </ noscript >
    < script mounted >
      this . header_text = "Hello World" ;
    </ script >
  </ template >
</ my-component >

ستكون العناصر مرئية أثناء تحميل Bay ولكن ليس إذا كانت ملفوفة بعلامات noscript. ستتم إزالة عناصر DSD وأطفالهم بمجرد إنشاء المكون وسيتم إزالة عناصر noscript ولكن سيبقى محتواها وسيتم تحليل محتواها واختلافها. لن تتوفر الدعائم باستخدام هذه الطريقة ، ولكن يمكنك استخدام الإعدادات. يتم تقديم المحتوى إلى DOM الرئيسي حتى لا يتم تغليف أنماط.



يمكن استخدام مكون في أي مكان في HTML ولكن يجب أن تكون القوالب المضمنة في جسم المستند. يمكن أن يكون "My-Oponment" أي شيء تريده ولكن يجب أن يكون له اندفاعة في الاسم لكل مواصفات العنصر المخصص.



العلامات في المكونات:

بناء الجملة وصف مثال
<if this="this.xxx">...</if> إذا كان البيان ، فإنه يجعل المحتوى فقط بين <if> العلامات إذا كانت هذه السمة صحيحة. الشرطية
<else-if this="this.xxx">...</else-if> آخر ، إذا ، لا يؤدي إلا إلى أن المحتوى بين <else-if> إذا كانت هذه السمة صحيحة وسابقة <if> <else-if> خاطئة. الشرطية
<else>...</else> وإلا ، لا يؤدي إلا إلى أن المحتوى بين <else> علامات إذا كانت جميع العلامات السابقة <if> <else-if> خاطئة. الشرطية
<show this="this.xxx">...</show> تظهر ، عندما تحتاج إلى الاحتفاظ بالرمز في DOM وتبديل شاشة العرض. أضف المدة <show this="this.xxx" duration=".5s"> لتأثير التلاشي. يعرض
<switch this="this.xxx"> <case this="xxx" break>...</case> <default>...</default> </switch> بيان التبديل ، لشرطات أكثر تعقيدًا. يُحوّل
<map array="this.arr">...</map> خريطة ، للتكرار عبر صفيف <map params="item, i, array" array="this.arr" join="<hr>"> params and join هي اختيارية ، المعلمات الافتراضية هي: element, index, array . التكرارات
<for array="this.arr">...</for> foreach حلقة ، للتكرار على صفيف <for params="item, i, array" array="this.arr"> params اختياري ، المعلمات الافتراضية هي: element, index, array . التكرارات
<for this="let i = 0; i < this.arr.length; i++">...</for> للحلقة ، للتكرار مع الظروف. التكرارات
<inner-html>...</inner-html> لتقديم إلى الضوء دوم. إذا كانت سمة inner-html موجودة على المكون ، فسيتم عرضها داخل هذا العنصر:
<my-comp bay="..." inner-html="#render-target"> . إذا لم تكن السمة الداخلية HTML موجودة على المكون ، فيمكنك استخدام فتحة لرؤية محتوى HTML الداخلي.		 HTML الداخلية
<slot name="slot1">...</slot> تستخدم لتحديد فتحة حسب مكون الويب القياسي. فتحات
<route href="/xxx/var">...</route> يقوم المسار بإنشاء المسار لعلامة جهاز التوجيه ، ويهدف إلى تطبيق صفحة واحدة (SPA). طريق
<router this="/xxx/:xxx">...</router> يطابق جهاز التوجيه عنوان URL الحالي ، :xxx للمتغيرات. طريق
<define this="myEl">...</define> <myEl></myEl> تحديد كتلة من الكود المراد إعادة استخدامها. يُعرِّف
<include this="https://..."></include> قم بتضمين رمز في قالب من عنوان URL. يشمل


المتغيرات الداخلية:

بناء الجملة وصف مثال
this.xxx = 'xxx'; تعيين this.xxx
للحصول على/تعيين هذه القيمة من خارج المكون:
document.getElementById('my-el').shadowRoot.proxy.xxx = 'xxx';		 محلي
$global = 'xxx'; تعيين $global.xxx سوف يؤدي القيمة إلى عرض على جميع مكونات الخليج التي تحتوي على $global .
للحصول على/تعيين هذه القيمة من خارج المكونات:
bay.global.xxx = 'hello'; console.log(bay.global);		 عالمي
$bay.querySelector('xxx'); استخدم $bay لاستهداف الظل دوم. Shadow DOM مقابل Light DOM المتغيرات
$el.querySelector('xxx'); استخدم $el لاستهداف Light DOM. Shadow DOM مقابل Light DOM المتغيرات
$parent.xxx = 'xxx'; تعيين $parent.xxx سيقوم قيمة بتحديث this.xxx في الوالدين إذا كان الوالد مكونًا آخر لخليج ويؤدي Inturn إلى عرض. الوالد
$details.changed;
$details.element;		 تفاصيل من سمة Script Script حول ما تغير. فتحات
$route تفاصيل من موقع النافذة. جهاز التوجيه
$path : المتغيرات من مسار البحث :xxx/:xxx . جهاز التوجيه


سمات على المكون:

بناء الجملة وصف مثال
bay="#my-template"
bay="/my-template.html"
bay="dsd"		 عند تحديده على <custom-element bay="..."> ، سيكون القالب الذي يجب استخدامه ، يمكن أن يكون معرف قوالب أو مسار إلى ملف ، DSD هو تجريبي. باستخدام معرف
باستخدام الملف
DSD
bay="my-template-name" عند تحديده على <template bay="custom-element"> سيكون اسم العلامة <custom-element> . باستخدام الاسم
fouc تستخدم لإخفاء DOM الضوء داخل المكون حتى يتم تحميله بالكامل. فوك
inner-html="#render-target" تستخدم لإخبار المكون حيث يجب أن يقدم <inner-html>...</inner-html> محتوى. HTML الداخلية
xxx="value" يتم تمرير أي سمات أخرى في المكون وتصبح دعائم يمكن الوصول إليها عبر this.xxx ، xxx هو اسم السمة. الدعائم


السمات الداخلية:

بناء الجملة وصف مثال
:style="color: red; display: ${this.display}" تطبيق أنماط مدفوعة بالبيانات. أنماط
:click="console.log('clicked')" أي حدث javaScript يبدأ بـ ON (onClick في هذا المثال) فقط استبدل على: ( oninput="xxx" -> :input="xxx" ). الأحداث
:my-event="console.log('my custom event')" يستمع إلى أي حدث مخصص ورمز المشغل عندما يكتشف هذا الحدث قد تم تشغيله من أي مكان. حدث مخصص
bind="this.xxx" تستخدم لربط البيانات ثنائية الاتجاه على <inputs> و <selects> و <textareas> . ربط
slot="slot-name" تستخدم لتحديد فتحة حسب مكون الويب القياسي. فتحات
ref="xxx" $ref('xxx').onclick = (e) => {...
انظر الوظائف الداخلية أدناه للاستخدام.		 المرجع
this-attribute="xxx" سوف يحل محل This-attribute = "xxx" مع ما يتم إرجاعه من قيمة السمة الخاصة به. هذه السمة
:click.prevent="xxx" معدلات الأحداث .Passive ،. معدلات الأحداث


دورة حياة السيناريو:

بناء الجملة وصف مثال
<script imports>...</script> تحديد البرامج النصية للوحدة النمطية. الواردات
<script mounted>...</script> يعمل البرنامج النصي بعد تركيب القالب إلى DOM. مثبت
<script props>...</script> البرنامج النصي الذي يعمل عندما تتغير الدعائم. الدعائم
<script render>...</script> السيناريو الذي يجعل قيمة الإرجاع في مكانه. يجعل
<script slotchange>...</script> البرنامج النصي الذي يتم تشغيله على محتوى الفتحة. تغيير الفتحة
<script update>...</script> البرنامج النصي الذي يعمل على كل تحديث. تحديث


الوظائف الخارجية:

بناء الجملة وصف مثال
bay(); تستخدم لتهيئة bay.js إذا تم استيراد الوحدة النمطية. تثبيت
bay.create('component-name', '<h1>test</h1>', ["prop-1", "prop-2"]); إنشاء مكون. يخلق
bay.refresh(); تحديث خليج بعد تطبيق عنصر مخصص جديد ديناميكيًا على DOM. ينعش


الوظائف الداخلية:

بناء الجملة وصف مثال
$bay.encode('string'); تشفير/الهروب من سلسلة. تشفير
$bay.decode('string'); فك شفرة/un-escape سلسلة. فك الشفرة
$bay.emit('custom-event', {key: value}); تنبعث من حدث مخصص. (عبر جميع المكونات) انبعث
$bay.on('custom-event', (e) => {console.log(e.detail);}); استمع لحدث مخصص. (عبر جميع المكونات) انبعث
$ref('xxx').onclick = (e) => {...
$ref('xxx').forEach((el) => {...		 يحصل على عناصر مع السمة المرجع = "xxx". لا يمكن استخدامها إلا في البرنامج النصي المثبت. المرجع


يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل