bay.js
1.0.0
Bay.js是一個前端庫，旨在促進可重複使用的Web組件的創建，並為HTML添加狀態和交互性。要查看行動，您可以訪問bayjs.org並探索其示例。
<template>作為模板源。bay.js可以通過腳本標籤或導入作為模塊使用。
< script src =" //cdn.jsdelivr.net/npm/@dunks1980/bay.js/bay.min.js " > </ script >腳本標籤示例
< 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@ <版本> /bay.min.mjs的版本號是可選的，可以從轉到NPM包裝頁面獲得。或者如果使用node_modules：'./node_modules/@dunks1980/bay.js/bay.min.mjs';
ES模塊示例
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中定義組件：
在您的HTML中，創建一個內聯模板並應用BAY屬性和任何其他道具：
< template bay =" my-component-name " message >
< h1 > ${this.message} </ h1 >
</ template >
< my-component-name message =" Hello world! " > </ my-component-name >在您的html中，創建一個內聯模板和供應灣。 JS模板ID：
< template id =" my-template " >
< h1 > ${this.message} </ h1 >
</ template >
< my-component bay =" #my-template " message =" Hello world! " > </ my-component >創建一個文件和供應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 >通過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" ] ) ;或創建模板並傳遞：（字符串中的$和`如果字符串字符字體，則需要 eScap）
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 >在您的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>標籤將沒有效果。
在您的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 >元素在加載時將看到元素，但如果它們用noscript標籤包裹，則不會可見。創建組件並將刪除NoScript元素後，將刪除DSD元素及其子女，但將保留其內容，並將其內容解析和分散。道具將無法使用此方法可用，但是您可以使用設置。內容渲染到主DOM，因此不會封裝樣式。
可以在HTML中的任何地方使用組件，但內聯模板必須在文檔的正文中。 “ my-component”可以是您喜歡的任何東西，但根據自定義元素規範的名稱必須具有破折號。
| 句法 | 描述 | 例子 |
|---|---|---|
<if this="this.xxx">...</if> | 如果語句，則僅呈現<if>標籤之間的內容，則此屬性為true。 | 有條件 |
<else-if this="this.xxx">...</else-if> | 否則，如果僅渲染<else-if>標籤之間的內容，則此屬性是正確的，並且以前的<if> <else-if>為false。 | 有條件 |
<else>...</else> | 否則，如果所有先前的<if> <else-if>標籤都是false，則僅渲染<else>標籤之間的內容。 | 有條件 |
<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> | 渲染到光DOM。如果組件上存在inner-html屬性，它將在該元素內部呈現：<my-comp bay="..." inner-html="#render-target"> 。如果組件上不存在Inner-HTML屬性，則可以使用插槽來查看Inner-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值將觸發Bay組件渲染。從組件外部獲取/設置此值： 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針對陰影dom。陰影dom vs.光 | 變量 |
$el.querySelector('xxx'); | 使用$el來瞄準光DOM。陰影dom vs.光 | 變量 |
$parent.xxx = 'xxx'; | 分配$parent.xxx一個值將在父級是另一個灣組件並觸發渲染的情況下，在父級中更新this.xxx 。 | 父母 |
$details.changed;$details.element; | 從slotchange腳本屬性中的詳細信息有關發生了什麼變化。 | 老虎機 |
$route | 窗口位置的詳細信息。 | 路由器 |
$path | ：來自搜索路徑的變量:xxx/:xxx 。 | 路由器 |
| 句法 | 描述 | 例子 |
|---|---|---|
bay="#my-template"bay="/my-template.html"bay="dsd" | 當在<custom-element bay="...">標籤將是要使用的模板，可以是模板ID或文件的路徑，DSD是實驗性的。 | 使用ID 使用文件 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>的2條數據綁定。 | 綁定 |
slot="slot-name" | 用於根據標準網絡組件定義插槽。 | 老虎機 |
ref="xxx" | $ref('xxx').onclick = (e) => {...有關使用情況，請參見下面的內部功能。 | 參考 |
this-attribute="xxx" | 將用從其屬性值返回的內容替換this-attribute =“ xxx”。 | 此屬性 |
:click.prevent="xxx" | 事件修飾符。通道，.capture，.once，。 -stop，.privent，.self | 事件修飾符 |
| 句法 | 描述 | 例子 |
|---|---|---|
<script imports>...</script> | 定義模塊導入腳本。 | 進口 |
<script mounted>...</script> | 腳本將模板安裝到DOM之後。 | 安裝 |
<script props>...</script> | Props更改時運行的腳本。 | 道具 |
<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。 | 重新整理 |
| 句法 | 描述 | 例子 |
|---|---|---|
$bay.encode('string'); | 編碼/逃脫字符串。 | 編碼 |
$bay.decode('string'); | 解碼/un-escape a字符串。 | 解碼 |
$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”的元素。只能在安裝腳本中使用。 | 參考 |
