ดาวน์โหลด bay.js - bay.js ซอร์สโค้ดดาวน์โหลดดาวน์โหลด

bay.js

ส่วนประกอบของบุคคลที่สาม

1.0.0

ดาวน์โหลด

Bay.js

Bay.js คืออะไร?

Bay.js เป็นห้องสมุดส่วนหน้าที่ออกแบบมาเพื่ออำนวยความสะดวกในการสร้างองค์ประกอบเว็บที่นำกลับมาใช้ใหม่ได้รวมถึงการเพิ่มสถานะและการโต้ตอบกับ HTML หากต้องการดูการดำเนินการคุณสามารถเยี่ยมชม Bayjs.org และสำรวจตัวอย่าง

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

ขั้นตอนการสร้างเสริม: เพียงเพิ่มแท็กสคริปต์เพื่อเริ่มต้นใช้งาน
ความเข้ากันได้ของนโยบายความปลอดภัยเนื้อหา (CSP) ที่เข้มงวดแม้ว่าจะไม่มีขั้นตอนการสร้าง
การเรนเดอร์อเนกประสงค์: รูปแบบ DOM ปกติหรือเว็บองค์ประกอบปกติ
การพึ่งพาศูนย์สำหรับการใช้งานที่มีน้ำหนักเบา
ความสามารถในการรวมกลุ่มไฟล์เดียวสำหรับส่วนประกอบที่มีความคล่องตัว
การบูรณาการอย่างไร้รอยต่อกับเฟรมเวิร์กที่ออกแบบมาสำหรับการแสดงผลส่วนประกอบเว็บ
เทมเพลต URL-based: เปิดใช้งานการเรนเดอร์ฝั่งเซิร์ฟเวอร์ (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@ <version> /bay.min.mjs หมายเลขรุ่นเป็นทางเลือก หรือถ้าใช้ node_modules: './node_modules/@dunks1980/bay.js/bay.min.mjs';
ตัวอย่างโมดูล 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. เทมเพลตที่มีแอตทริบิวต์ BAY ใน DOM

ใน HTML ของคุณสร้างเทมเพลตแบบอินไลน์และใช้แอตทริบิวต์ Bay และอุปกรณ์ประกอบฉากอื่น ๆ :

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

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

2. เทมเพลตที่มี ID ใน DOM

ใน HTML ของคุณสร้างเทมเพลตแบบอินไลน์และ Supply Bay.js ID เทมเพลต:

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

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

3. เทมเพลตในไฟล์

สร้างไฟล์และการจัดหา 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

ผ่าน 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" ] ) ;

หรือสร้างเทมเพลตและส่งผ่าน: ($ และ `ภายในสตริงจะต้องใช้ escaping ถ้าสตริงตัวอักษร)

 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 ของคุณสร้างองค์ประกอบแบบอินไลน์ที่มีแม่แบบภายในจากนั้นเพิ่ม bay-hydrate ลงในองค์ประกอบที่มี:

 < 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 (Declarative Shadow DOM)

ใน HTML ของคุณสร้างองค์ประกอบแบบอินไลน์ที่มีเทมเพลตภายในจากนั้นเพิ่ม bay = "dsd" ลงในองค์ประกอบและ shadowrootmode = "เปิด" ไปยังองค์ประกอบเทมเพลต:

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

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

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

แท็กในส่วนประกอบ:

ไวยากรณ์	คำอธิบาย	ตัวอย่าง
`<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>">` พารามิเตอร์และการเข้าร่วมเป็นตัวเลือกพารามิเตอร์เริ่มต้นคือ: `element, index, array`	การทำซ้ำ
`<for array="this.arr">...</for>`	Foreach Loop เพื่อวนซ้ำอาร์เรย์ `<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>`	เพื่อแสดงผลไปยัง Dom Light หากแอตทริบิวต์ `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` ค่า A จะทำให้เกิดการแสดงผลในส่วนประกอบของ BAY ทั้งหมดที่มี `$global` เพื่อรับ/ตั้งค่านี้จากภายนอกส่วนประกอบ: `bay.global.xxx = 'hello'; console.log(bay.global);`	ทั่วโลก
`$bay.querySelector('xxx');`	ใช้ `$bay` เพื่อกำหนดเป้าหมาย Shadow Dom Shadow Dom vs. Light Dom	ตัวแปร
`$el.querySelector('xxx');`	ใช้ `$el` เพื่อกำหนดเป้าหมาย DOM แสง Shadow Dom vs. Light Dom	ตัวแปร
`$parent.xxx = 'xxx';`	การกำหนด `$parent.xxx` ค่า A จะอัปเดต `this.xxx` ในพาเรนต์หากพาเรนต์เป็นส่วนประกอบของเบย์อื่นและ inturn ทำให้เกิดการแสดงผล	พ่อแม่
`$details.changed;` `$details.element;`	รายละเอียดจากแอตทริบิวต์สคริปต์สคริปต์ว่ามีการเปลี่ยนแปลงอะไร	ช่องเสียบ
`$route`	รายละเอียดจากตำแหน่งหน้าต่าง	เราเตอร์
`$path`	: ตัวแปรจากเส้นทางการค้นหา `:xxx/:xxx`	เราเตอร์

คุณลักษณะของส่วนประกอบ:

ไวยากรณ์	คำอธิบาย	ตัวอย่าง
`bay="#my-template"` `bay="/my-template.html"` `bay="dsd"`	เมื่อกำหนดไว้ในแท็ก `<custom-element bay="...">` tag มันจะเป็นเทมเพลตที่จะใช้สามารถเป็น ID เทมเพลตหรือเส้นทางไปยังไฟล์ DSD เป็นการทดลอง	ใช้ id ใช้ไฟล์ DSD
`bay="my-template-name"`	เมื่อกำหนดไว้ใน `<template bay="custom-element">` มันจะเป็นชื่อแท็ก `<custom-element>`	ใช้ชื่อ
`fouc`	ใช้เพื่อซ่อนแสงไฟภายในส่วนประกอบจนกว่าจะโหลดเต็มที่	ฟู
`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"`	ใช้สำหรับการเชื่อมข้อมูลแบบ 2 ทางบน `<inputs>` , `<selects>` และ `<textareas>`	ผูก
`slot="slot-name"`	ใช้เพื่อกำหนดสล็อตตามองค์ประกอบเว็บมาตรฐาน	ช่องเสียบ
`ref="xxx"`	`$ref('xxx').onclick = (e) => {...` ดูฟังก์ชั่นภายในด้านล่างสำหรับการใช้งาน	ผู้อ้างอิง
`this-attribute="xxx"`	จะแทนที่ this-attribute = "xxx" ด้วยสิ่งที่ส่งคืนจากค่าแอตทริบิวต์	คุณลักษณะนี้
`:click.prevent="xxx"`	ตัวดัดแปลงเหตุการณ์. passive, .capture, .once,. stop,. prevent, .self,.	ตัวดัดแปลงเหตุการณ์

วงจรชีวิตสคริปต์:

ไวยากรณ์	คำอธิบาย	ตัวอย่าง
`<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();`	Refresh Bay หลังจากองค์ประกอบที่กำหนดเองใหม่ถูกนำไปใช้กับ DOM แบบไดนามิก	รีเฟรช

ฟังก์ชั่นภายใน:

ไวยากรณ์	คำอธิบาย	ตัวอย่าง
`$bay.encode('string');`	เข้ารหัส/หลบหนีสตริง	เข้ารหัส
`$bay.decode('string');`	DECODE/Un-Escape A String	ถอดรหัส
`$bay.emit('custom-event', {key: value});`	ปล่อยกิจกรรมที่กำหนดเอง (ในทุกองค์ประกอบ)	ปล่อยออกมา
`$bay.on('custom-event', (e) => {console.log(e.detail);});`	ฟังเหตุการณ์ที่กำหนดเอง (ในทุกองค์ประกอบ)	ปล่อยออกมา
`$ref('xxx').onclick = (e) => {...` `$ref('xxx').forEach((el) => {...`	รับองค์ประกอบด้วยแอตทริบิวต์ ref = "xxx" สามารถใช้ในสคริปต์ที่ติดตั้งเท่านั้น	ผู้อ้างอิง