ブラウザ/nodeJSリアクティブプログラミングとモジュラーコンポーネントを使用したデータ駆動型DOM操作。
ドキュメント:http://milojs.github.io/milo/
npm install milojs
または
bower install milo
npm install
npm install -g grunt-cli
grunt test
ブラウザテストを含むすべてのテストを実行するには:
grunt tests
index.html
< html >
< head >
< title > Binding example </ title >
< script src =" milo.bundle.js " > </ script >
< script src =" index.js " > </ script >
</ head >
< body >
< input type =" text " ml-bind =" [Data]:myField " >
< div ml-bind =" [Data]:myCurrentValue " > </ div >
< button ml-bind =" [Events]:myTestButton " >
Test
</ button >
< div >
< span ml-bind =" :myTestValue " > </ span >
</ div >
< div >
< h2 > I am connected: </ h2 >
< span ml-bind =" [Data]:myTestValue2 " > </ span >
</ div >
</ body >
</ html >index.js
// run when DOM is ready
milo ( function ( ) {
// create and bind components with milo.binder
var scope = milo . binder ( ) ;
// attach subscriber to data change event via data facet
// of myField component
scope . myField . data . on ( '' , function ( msg , data ) {
scope . myCurrentValue . data . set ( data . newValue ) ;
// alternatively:
// scope.myCurrentValue.el.innerHTML = data.newValue;
} ) ;
// attach subscriber to click event via events facet
// of myTestButton component
scope . myTestButton . events . on ( 'click' , function ( msg , event ) {
scope . myTestValue . el . innerHTML = scope . myField . data . value ( ) ;
} ) ;
// connect two components directly via their data facets
// using milo.minder
milo . minder ( scope . myField . data , '->' , scope . myTestValue2 . data ) ;
} ) ;Miloは、パラメータータイプのランタイムチェックにCheck Module( milo.util.check -Check Package of Meteor Frameworkからフォーク)を使用します。 milo.config({ check: false })を使用して、この小切手をオフにすることを強くお勧めします。
アプリケーションに応じて、パフォーマンスを2回以上向上させることができます。
バインディングの紹介
データファセットの紹介
メッセンジャーの紹介
モデルの紹介
Minderの紹介
リストの紹介
ミロの作成に関する記事TUTS+で独自のフレームワークを転がす
より高度なサンプルは、TODOMVCフォルダーのTODOSアプリです。
cd $MILO_FOLDER
npm link
cd $MY_PROJECT
rm -R -f -d node_modules/milojs
npm link milojs # link milo to your current project to use with browserify
cd $MILO_FOLDER
grunt # rebuild milo bundle every time you change any .js fileさらに、MILOバンドルが変更されるたびに、プロジェクトでGruntをセットアップして再構築できます。
コミットする前にgrunt testsを実行することを確認してください(Travisciが自動的に実行するgrunt testだけでなく) - ブラウザテストを含むすべてのテストを実行します。
MILOは1つのバンドルとしてパッケージ化されていますが、非常にモジュール式構造があります。これは、一緒にまたは別々に使用できるいくつかの独立したモジュールで構成され、特定のアプリケーション構造を作成するのではなく、一般的なアプリケーションタスクを簡素化するように設計されています。
Miloの一部のモジュールは、ブラウザ(コンポーネント、コンポーネントファセット、Milo.binder)でのみ使用でき、一部はブラウザーとNodejs(メッセンジャーとその関連クラス、モデル、コネクタ、Milo.minder)の両方で使用できます。
MILO自体はBrowserifyを使用してパッケージバンドルを使用しますが、 MILO -MILOを使用するアプリでは、アプリケーション構造を示唆していないモジュールシステムを使用できます。
コンポーネントは、DOMの管理を簡素化するように設計されています。コンポーネントは特定のDOM要素に接続されています。いくつかのコンポーネントを同じDOM要素に添付することは、通常、アプリケーション(またはMILO)の設計上の間違いであるため、発生するとエラーが記録されます。
コンポーネントにより、構成された「ファセット」のコレクションとして定義されるサブクラスを非常に簡単に作成できます。たとえば、MLSelect UIコンポーネントの定義を参照してください。
独自のコンポーネントの作成を簡素化するコンポーネントテンプレートがあります。
コンポーネントドキュメントを参照してください。
ComponentFacetは基本クラスであり、そのグループメソッドはコンポーネントの動作に関連しています。
ファセットをインスタンス化する必要はめったにありません - コンポーネントが作成されると、すべてのファセットが作成されます
ミロで定義されている次のファセットがあります。
独自のファセットの作成を簡素化するコンポーネントファセットテンプレートがあります。コンポーネントのすべてのファセットは、コンポーネントファセットのサブクラスである必要があります。
コンポーネントのインスタンスは通常、 ml-bind属性のコンポーネントクラス、ファセット、コンポーネント名に関する情報に基づいてMilo.Binderを呼び出すときに自動的に作成されます(Milo.configを介して変更できます)。
MILOでコンポーネントを利用できるようにするには、クラスをコンポーネントレジストリ(Milo.registry.comPonents)に登録する必要があります。新しいファセットを定義する場合、クラスも登録する必要があります(Milo.Registry.facets)。
コンポーネントとファセットの登録クラスは通常、クラスを定義する同じモジュール(ファイル)で発生するため、このモジュールを実行する必要があります。モジュール管理にBroserifyを使用する場合、使用するのに十分です。
require('my_component');
実行または必要な他のモジュールで。
MILOは、アプリケーションのニーズにも使用できる内部メッセージングクラスを提供します。 MILOのすべてのファセットには、ファセットに固有のメッセージングAPIを定義するメッセンジャーのインスタンスが付属しています。ほとんどの場合、外部ソース(通常はDOMイベント)に接続します。
Messenger Instancesは、 MessageSourceのサブクラスのインスタンスを使用して、 MessengerAPIサブクラスの外部ソースとインスタンスに接続して、より高いレベルの内部メッセージを作成し、メッセージデータを変換します。このアーキテクチャにより、わずか数行のコードで高度な機能を作成できます。
メッセンジャーのドキュメントを参照してください。
MILOは、データが設定されているかどうか(未定義のオブジェクトのプロパティを取得したときにデータにアクセスするときに決してスローしない)を心配する必要なく、データに安全にアクセスできるようにモデルを定義し、実験的オブジェクトとarray.observe apis aoveと同様のデータの変更を購読できる可能性を有効にします。
モデルを使用しても、これらのAPIは必要ありません。これらのAPIとは異なり、モデルのプロパティの変更を任意の深さまでサブスクライブできます。
モデルデモとモデルのドキュメントを参照してください。
MILOは、このクラスを定義して、データメッセージングAPIを実装するオブジェクト間のリアクティブ接続を管理します。データファセットとモデルの両方のインスタンスは、そのようなオブジェクトです。
1つまたは双方向の接続を作成したり、観察したいデータ構造の深さを定義したり、これらの接続をオフにしたりできます。
これらの接続には、 angularjsが行うようにループ内のデータを比較するオーバーヘッドはありません。
すぐにコネクタインスタンスが構造翻訳をサポートし、固定構造を持つモデルと柔軟な構造を持つDOMツリー間のリアクティブ接続を作成できるようにします。
Milo.minderで1つまたは複数の反応性接続を作成できます。
コネクタのドキュメントを参照してください。
domreadyイベントも定義し、IFRAME間のメッセージのルーティングを簡素化するApplicAitonレベルのメッセンジャー(フレームファセットを参照)。Milo Nameは、Catch 22の戦争利益者であるMilo Minderbinderのために選ばれました。MessOperationsの管理から始まったため、彼はそれらを有益な取引企業に拡大し、すべての人とすべての人を結びつけ、そのMiloと他のすべての人を「シェアを持っています」。
MILOフレームワークには、DOM要素をコンポーネントにバインドするモジュールバインダー(特別なMLバインド属性を介して)、および異なるデータソース間のライブリアクティブ接続を確立できるモジュールマインダーがあります(コンポーネントのモデルとデータファセットはそのようなデータソースです)。
偶然にも、 Miloはオンラインのメールの頭字語として読むことができます。
私たちが手にすることができるすべてのフレームワークは、私たちが自分自身(jQuery、バックボーン)のコードをあまりにも多く書くことができないほど原始的なものであるか、単純なアプリケーションを非常に速く構築するのに十分な魔法で、フレームワークの正確な機能(Angular、ext)を制御するのに十分な魔法で制限されていました。
私たちがいつも望んでいたのは、許可するフレームワークでした
そのようなフレームワークを見つけることができなかったため、 MILOを使用するアプリケーションと並行して開発を開始しました。
###プロトタイプベースの継承
MILOは、JavaScriptプロトタイプに依存して、フレームワークブロックを構築します。
JavaScriptは非常に動的な言語です。クラス( Component.createComponentClass )を作成する機能を作成できます。これにより、各コンポーネントクラスが、構築されたクラスに固有のファセットの構成を持つ事前定義されたブロック(ファセット)のコレクションとして作成される構成パターンを実装できます(ブロックから作成されていませんが、拡張コンポーネントに類似しています)。
JavaScriptでは、モデルオブジェクトの非常に表現力のある構文を可能にする関数を作成するコンストラクター関数を作成し、モデルアクセスパスの実行時間「コンパイル」を機能させることもできます。
コンポーネントクラスは、ファセットの収集を介してオブジェクトを表現できる任意のドメインに適用できる抽象的なFacetedObjectクラスに基づいています(ファセットは特定のクラスのオブジェクトであり、独自の構成、データ、メソッドを保持します)。
ある意味では、ファセットパターンはアダプターパターンの反転です - 後者は特定の機能を持つクラス/メソッドを見つけることができますが、ファセットオブジェクトは単にこれらの機能を持つように構築されます。このようにして、クラスの背の高い階層を持たずに、非常に限られた数のビルディングブロックを備えた、ほぼ無制限の数のコンポーネントクラスを作成することができます - ほとんどのコンポーネントはコンポーネントクラスから直接継承します。
同時に、MILOは、サブクラスがすでにスーパークラスになっているものにファセットを追加し、継承されたファセットの構成を再定義することができる場合、継承メカニズムをサポートします。
また、Mixinパターンも使用しますが、 MiloのMixinは、ホストオブジェクトのプロパティに保存され、必要に応じてホストオブジェクトにプロキシメソッドを作成できる別のオブジェクトとして実装されます。クラスメッセンジャー、Messagesource、およびDataSourceは、Mixin Abstractクラスのサブクラスです。
コンポーネントとファセットは、1つのモジュールからそれらを要求することを避けることができるレジストリに登録します。モジュール間の循環依存関係を防ぎます。
MILOの依存関係は、オブジェクト操作ライブラリとテンプレートエンジン(両方ともMILOバンドルに含まれている)であるProtoです。
以下のために、DOMトラバーサルライブラリは使用していません。
代わりに、MILOコンポーネントには、DOM要素を操作するためのいくつかの利便性関数を含むDOMファセットを持つことができ、 milo.util.domがあります - コンポーネントなしで使用できる機能の同様のコレクション。
Miloは、オブジェクト、プロトタイプ、配列、関数、文字列の操作のためのユーティリティ関数の成長コレクションを備えたライブラリProtoを使用しています。サードパーティライブラリを使用しないという決定の背後にあるドキュメントと理由については、そのリポジトリをご覧ください。
Miloと一緒にバンドルされており、そのすべての機能は_オブジェクトのプロパティとして使用できます。個別にロードする必要はありません。
http://opensource.org/licenses/bsd-2-clause
リリースを参照してください