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 ( ) ;このようなバージョン番号を追加して、変更を破るのを防ぐことができます。または、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モジュールでのみ設定でき、文字列である必要があり、コンポーネントを作成する前に1回しか設定できません。設定変数は、テンプレート内のどこでも使用できます。
設定の例
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では、インラインテンプレートと供給Bay.jsを作成します。テンプレートID：
< template id =" my-template " >
< h1 > ${this.message} </ h1 >
</ template >
< my-component bay =" #my-template " message =" Hello world! " > </ my-component >ファイルを作成し、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 > 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" ] ) ;またはテンプレートを作成して渡す：（$ and `in in the stringは文字列のリテラルの場合は逃げる必要があります）
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で、内部にテンプレートを使用したインライン要素を作成し、含有要素にベイ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>タグには効果がありません。
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のどこでも使用できますが、インラインテンプレートはドキュメントの本文にある必要があります。 「私のコンポーネント」はあなたが好きなものにすることができますが、カスタム要素仕様に従って名前にダッシュが必要です。
| 構文 | 説明 | 例 |
|---|---|---|
<if this="this.xxx">...</if> | IFステートメントは、この属性がtrueの場合、 <if>タグ間のコンテンツのみをレンダリングします。 | 条件 |
<else-if this="this.xxx">...</else-if> | それ以外の場合、この属性がtrueであり、以前の<if> <else-if>がfalseである場合、 <else-if>タグ間のコンテンツのみをレンダリングします。 | 条件 |
<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>"> joinはオプションであり、デフォルトのパラメーションはelement, index, arrayです。 | 反復 |
<for array="this.arr">...</for> | foreach loop、array <for params="item, i, array" array="this.arr"> paramsはオプションであり、デフォルトの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> | 標準のWebコンポーネントに従ってスロットを定義するために使用されます。 | スロット |
<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をターゲットにします。 Shadow Dom vs. Light Dom | 変数 |
$el.querySelector('xxx'); | $elを使用して、光domをターゲットにします。 Shadow Dom vs. Light Dom | 変数 |
$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を非表示にするために使用されます。 | 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')" | on（この例でオンクリック）で始まるJavaScriptイベントは、（ oninput="xxx" - > :input="xxx" ）に置き換えます。 | イベント |
:my-event="console.log('my custom event')" | カスタムイベントを聴き、イベントがどこからでもトリガーされたことを検出したときにコードをトリガーします。 | カスタムイベント |
bind="this.xxx" | <inputs> 、 <selects> 、 <textareas>の2ウェイデータバインディングに使用されます。 | バインド |
slot="slot-name" | 標準のWebコンポーネントに従ってスロットを定義するために使用されます。 | スロット |
ref="xxx" | $ref('xxx').onclick = (e) => {...使用については、以下の内部関数を参照してください。 | ref |
this-attribute="xxx" | このaTtribute = "xxx"を属性値から返すものに置き換えます。 | この属性 |
:click.prevent="xxx" | event Modifiers .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(); | 新しいカスタム要素がDOMに動的に適用された後、ベイを更新します。 | リフレッシュします |
| 構文 | 説明 | 例 |
|---|---|---|
$bay.encode('string'); | 文字列をエンコード/エスケープします。 | エンコード |
$bay.decode('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"で要素を取得します。マウントされたスクリプトでのみ使用できます。 | ref |
