el.js
1.0.0
実用的な再利用性を備えた合理的なマイクロアプリ フレームワーク。
el.jsは、マイクロアプリを構築するための Riot.js テンプレート上に構築されたフレームワークです。
Web フレームワークでは、開発者は、すべてではないにしても、ほとんどの Web ページを動的 Web アプリとして構築する必要があります。これにより、開発者は、Web ページ上のすべてが、推論可能な単一の一貫性のある予測可能なレンダリング フローに従っていることを確認できます。ただし、従来の静的 Web サイトと比較すると、より複雑なキャッシュ スキーム、長い読み込み時間、SEO の問題など、多くの欠点もあります。マイクロアプリは、これらの欠点に対する強力な解決策を提供します。巨大なモノリシック Web アプリケーションを構築する代わりに、小さなアプリを構築し、静的なページに埋め込みます。
マイクロアプリは、何度でも再利用できる、小規模で非常に限定された機能を実行します。マイクロアプリは、フレームワークが標準になる前の埋め込み可能なウィジェットのアイデアとあまり変わりませんが、合理的なフレームワークへの依存と実用的な再利用性を強調するという点で実行が異なります。
HTML:index.html
< html >
< head >
<!-- Head Content -->
< link rel =" stylesheet " src =" https://cdn.jsdelivr.net/gh/hanzo-io/el-controls/theme.css " />
</ head >
< body >
< my-form >
< div >
< label > Type Your Name </ label >
<!-- bind my-input to parent(my-form).data.name, parent.data is implicit for what is supplied to bind attribute -->
< my-input bind =' name ' />
</ div >
< div >
< span > Your Name Is </ span >
< span > { data.name } </ span >
</ div
</ my-form >
<!-- el.js Library -->
< script src =" https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js " > </ script >
< script src =" my-script.js " > </ script >
</ body >
</ html >JS: my-script.js
// window.El is the global value
// El.Form extends El.View and validates bound El.Inputs
class Form extends El . Form {
constuctor ( ) {
// data contains your state
this . data = {
name : '?' ,
}
// your custom tag name
this . tag = 'my-form'
super ( )
}
}
Form . register ( )
// El.Input extends El.View and binds to updating El.Form values
class Input extends El . Input {
constructor ( ) {
// your custom tag name
this . tag = 'my-input'
// the default this.change function works with all basic html inputs(<input>, <textarea>, ...).
this . html = '<input onkeydown="{ change }" />'
super ( )
}
}
Input . register ( )
El . mount ( '*' ) このタグをカスタム スクリプトと deps および参照 window.El の前の下部に追加します。
< script src =" https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js " > </ script >NPM 経由でインストールする
npm install el . js -- saveCommonJSをサポート
var El = require ' el.js 'または ES6 インポート
import El from ' el.js 'この型は、 nameに関連付けられたフィールドの検証に使用される情報を格納するためにEl.Formによって参照されます。
| 名前 | タイプ | デフォルト | 説明 |
|---|---|---|---|
| 構成 | MiddlewareFunctionまたは [ MiddlewareFunction ] | 未定義 | この型には、validate()の作成に使用される元のMiddlewareFunctionが格納されます。 |
| 名前 | 弦 | 」 | これは、この型の残りの部分が参照するEl.Formのデータプロパティのフィールドの名前です。 |
| 参照 | 参照ツリー | 未定義 | これは、 this.ref.get( name ) を呼び出すことでnameの値を取得できる可変データ ツリーへのリンクです。 |
| 名前 | タイプ | 説明 |
|---|---|---|
| 検証する | (参照ツリー、文字列) => Promise | このメソッドは、Promise を使用してすべてのMiddlwareFunction をシリアルに呼び出します。 |
このタイプは、 El.Formのミドルウェアを定義するために使用されます。次のような関数を使用して検証と入力のサニタイズを実行します。
function isRequired ( value ) {
value = value . trim ( )
if ( value && value != '' ) {
return value
}
throw new Error ( 'Required' )
} この型は、参照による Promise の返しを容易にするために内部で使用されます。
これはすべての El クラスの基本クラスです。各El.View はカスタム タグに対応します。このクラスを拡張して独自のカスタム タグを作成します。
| 名前 | タイプ | デフォルト | 説明 |
|---|---|---|---|
| css | 弦 | 」 | これはタグの CSS を表す文字列です。これは、マウント時にタグの下部にクラスごとに 1 回挿入されます。 |
| データ | 参照ツリー | 未定義 | このプロパティはタグの状態を保存します。 |
| html | 弦 | 」 | これはタグの内部 HTML を表す文字列です。 |
| 根 | HTML要素 | 未定義 | このプロパティは、マウントされたビューがバインドされている Web ページ内のタグへの参照を保存します。 |
| タグ | 弦 | 」 | これはカスタムタグ名です。 |
| 名前 | タイプ | 説明 |
|---|---|---|
| 初期化前 | () => | ここのコードは、タグが初期化される前に実行されます。 |
| 初期化 | () => | ここのコードは、タグが初期化されるとき、マウントされる前に実行されます。推奨- タグのライフサイクルにバインドする必要がある場合は、ここで実行します。 |
| スケジュール更新 | () => 約束 | このメソッドは、非同期更新呼び出しをスケジュールします。ネストされたビューがある場合は、最上位のビューで更新呼び出しをバッチ処理します。更新が実行されるときの Promise を返します |
| アップデート | () => | このメソッドはタグを更新します。これは、Web ページからイベントがトリガーされた後に暗黙的に呼び出されます。このような場合については、「単純なフォームの例」の onkeydown を参照してください。このメソッドを手動で呼び出してタグを更新します。推奨- 同期更新カスケードを防ぐために、代わりに手動でscheduleUpdate()を呼び出すことをお勧めします。 |
各El.View はイベント エミッターです。詳細なドキュメントについては、riot.observable (http://riotjs.com/api/observable/) を参照してください。
| 名前 | タイプ | 説明 |
|---|---|---|
| El.View.register | () => | これにより、現在のカスタム タグがレンダリング エンジンに登録されます。タグを定義した後に呼び出します |
このクラスは、フォームだけでなく、より複雑な IO 駆動のマイクロアプリを表すために使用されます。このクラスは、共通のフォーム検証とフォーム送信ロジックを提供します。
| 名前 | タイプ | デフォルト | 説明 |
|---|---|---|---|
| 構成 | 物体 | 未定義 | MiddlewareFunctionまたはMiddlewareFunctionsの配列に名前のマップを提供します。詳細については、 「MiddlewareFunction」を参照してください。 |
| 入力 | 物体 | ヌル | configsの各要素はinputsの要素に変換されます。これを直接変更することはお勧めできません。 |
| 名前 | タイプ | 説明 |
|---|---|---|
| 初期化 | () => | ここのコードは、タグが初期化されるとき、マウントされる前に実行されます。 initInputs()を呼び出すので、手動で呼び出すか、ES6 で super() を呼び出します。推奨- タグのライフサイクルにバインドする必要がある場合は、ここで実行します。 |
| 初期入力 | () => | 構成をコンパイルし、出力された構造体をinputsに割り当てます。 configなどの入力には、 data内の名前付きフィールドへの参照が含まれます。 |
| 提出する | (イベント) => 約束 | このメソッドは、 configsで定義されているデータの各フィールドの検証をトリガーします。このメソッドはイベント ハンドラー/リスナーとして呼び出す必要があります。検証が成功した場合はsubmit()を呼び出し、検証が成功または失敗したときの Promise を返します。 |
| _提出する | () => | ここのコードは、 submit()呼び出し中にフォームが検証されるときに実行されます。 |
これは、フォーム入力および IO コントロールを構築するための基本クラスです。
| 名前 | タイプ | デフォルト | 説明 |
|---|---|---|---|
| バインド | 弦 | 」 | このプロパティは、親フォームのデータのどのフィールドにバインドするかを決定します。 |
| 見上げる | 弦 | 」 | bindingと同じですが、非推奨です。 |
| エラーメッセージ | 弦 | 」 | このプロパティは、this.input.validate から返された Promise がキャッチした最初のエラー メッセージに設定されます。 |
| 入力 | 入力タイプ | ヌル | このプロパティは、親データのフィールドバインドの指定に基づいて、親フォームのinputsプロパティから取得されます。 |
| 有効 | ブール | 間違い | このプロパティは、入力の検証状態を決定するために使用されます。このプロパティは、this.input.validate が呼び出されたときに設定され、this.input.validate で返された Promise が完全に実行された場合にのみ true に設定されます。 |
| 名前 | タイプ | 説明 |
|---|---|---|
| 変化 | (イベント) => | このメソッドは入力を更新してから検証します。このメソッドはイベント ハンドラー/リスナーによって呼び出される必要があります。 |
| 変わった | () => | このメソッドは、this.input.validate から返された Promise が完全に実行されたときに呼び出されます。 |
| クリアエラー | () => | このメソッドはerrorMessageを '' に設定し、検証の前に呼び出されます。 |
| エラー | (エラー) => | このメソッドはerrorMessageを設定し、検証が失敗したときに呼び出されます。 |
| getValue | (イベント) => 任意 | このメソッドは入力から値を取得します。デフォルトでは、このメソッドはEventの target.value を返します。 |
| 検証する | (PromiseReference?) => 約束 | このメソッドは入力を検証し、参照 (内部的に必要) と値の両方によって検証の成功と失敗を表す Promise を返します。 |
| 名前 | タイプ | 説明 |
|---|---|---|
| El.scheduleUpdate | () => | ページ上のすべてのマイクロアプリの更新をスケジュールします。 |
el.jsのライフサイクル関数は Riot.js から継承されています。
el.js参照ツリーを使用してフォーム データを保存します。
独自のデータ構造の参照から get、set、on、once、off メソッドを実装し、データ プロパティとしてドロップします。
コンテナは、内部テンプレートに使用するメソッドを提供するカスタム タグであり、そのコンテンツは完全に上書きできます (1 つ以上のタグのコンテンツのみが含まれます)。コントロールは、興味深い方法で情報を表示したり、入力、選択、GoogleMaps の埋め込みなどの入力を取得したりする目的でユーザーと対話するコンポーネントです。
密結合した方法でウィジェットを構築する代わりに、再利用性を最大限に高めるためにウィジェットをコンテナとコントロールに分解します。最も意味のある方法で内部 HTML を構造化します。次に、完成したウィジェット、コンテナ、コントロールをユーザーにリリースして、ユーザーがさまざまな要件に合わせてウィジェットをカスタマイズできるようにします。
このように ui 要素を抽象化すると、他の人がコードを再利用したりカスタマイズしたりすることがはるかに簡単になります。実装については shop.js を参照してください。
Web ページまたは Web サイト全体の状態の保存と復元を簡素化するには、単一の高レベルの状態ストアを使用するのが最善です。
これは、ページ上のすべての最上位コンテナに同じデータフィールドを提供することで実現できます。最初のマウント呼び出し経由
var data = {
state0 : 0 ,
state1 : 1 ,
}
El . mount ( '*' , { data : data } )通常の Riot レンダリングとは異なり、 el.jsレンダリング コンテキストのプロトタイプ継承を介して this.parent および this.parent...parent の値に暗黙的にアクセスできます。これは、エラーが発生しやすく、冗長すぎるため、ネストされたコンテナーを介して同じデータを繰り返し渡すことを避けるために行われます。これにより、コンテナーとコントロールの構築も容易になります。
データ変数を明示的に渡す場合:
< my-container-1 >
< my-container-2 data =' { data } ' >
< my-container-3 data =' { data } ' >
value: { data.value1 }
</ my-container-3 >
< my-container-3 data =' { data } ' >
value: { data.value2 }
</ my-container-3 >
</ my-container-2 >
< my-container-2 data =' { data } ' >
< my-container-3 data =' { data } ' >
value: { data.value3 }
</ my-container-3 >
< my-container-3 data =' { data } ' >
value: { data.value4 }
</ my-container-3 >
</ my-container-2 >
</ my-container-1 > // El.mount passes data to the top level container of each micro-app
El . mount ( '*' , data : { value1 : 1 , value2 : 2 , value3 : 3 , value4 : 4 } )データ変数を暗黙的に参照することと同じです。
< my-container-1 >
< my-container-2 >
< my-container-3 >
value: { data.value1 }
</ my-container-3 >
< my-container-3 >
value: { data.value2 }
</ my-container-3 >
</ my-container-2 >
< my-container-2 >
< my-container-3 >
value: { data.value3 }
</ my-container-3 >
< my-container-3 >
value: { data.value4 }
</ my-container-3 >
</ my-container-2 >
</ my-container-1 > // El.mount passes data to the top level container of each micro-app
El . mount ( '*' , data : { value1 : 1 , value2 : 2 , value3 : 3 , value4 : 4 } ) BSD
