milo

米洛

瀏覽器/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從流星框架的支票包分叉）進行參數類型的運行時檢查。強烈建議使用以下方式關閉生產支票： milo.config({ check: false }) 。

根據您的應用程序，它可以提高性能超過兩次。

樣本/教程

入門

綁定簡介

數據方面簡介

信使簡介

模型簡介

Minder簡介

列表簡介

關於創建Milo在TUTS上滾動框架的文章+

todomvc

更高級的樣本是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

此外，您可以在項目中設置咕unt聲，以在Milo捆綁包更改時重建它。

請確保在進行提交之前進行grunt tests （不僅是由Travisci自動運行的grunt test ） - 它將運行所有測試，包括瀏覽器測試。

概念

模塊化設計

儘管Milo被包裝為一個捆綁包，但它具有非常模塊化的結構。它由幾個獨立的模塊組成，這些模塊可以一起使用，這些模塊旨在簡化常見的應用程序任務，而不是創建任何特定的應用程序結構。

Milo中的某些模塊僅在瀏覽器（組件，ComponentFacet，Milo.binder）中使用，其中一些在瀏覽器和Nodejs中（Messenger及其相關類別，Model，Connector，Milo. -Minder）。

Milo本身使用瀏覽器來包裝捆綁包，但是任何模塊系統都可以在使用Milo -Milo的應用中使用-Milo不建議任何應用程序結構。

成分

組件旨在簡化DOM的管理。組件連接到某個DOM元素。將幾個組件連接到同一DOM元素通常是一個應用程序（或MILO）設計錯誤，因此，如果發生錯誤，則將記錄錯誤。

組件允許非常容易地創建定義為配置“ facets”集合的子類。例如，請參見MLSELECT UI組件的定義。

有一個組件模板來簡化自己的組件的創建。

請參閱組件文檔。

組件面

ComponentFacet是基類，是與組件行為相關的組方法的子類。

您很少需要實例化一個方面 - 創建組件時，它會創建所有方面

Milo中定義了以下各個方面：

• 容器 - 一個特殊的方面，可創建組件範圍
• DOM-輔助方法的集合簡化了組件元素的DOM操縱
• 事件 - 提供方便的API來訂閱DOM事件
• 數據 - 一種用於操縱DOM樹的API作為數據，可以一次/設置從/到許多DOM元素的結構化數據，並創建模型的反應性數據連接（請參見下文）到DOM。
• 列表和項目 - 允許數據中的Arays中的DOM中創建列表。使用以下任何方面的組件類都需要數據構面（將自動添加），該類別應用於獲取/設置列表數據並創建反應性數據連接。
• 模板 - 簡化模板中組件DOM元素的渲染。
• CSS-允許您使用Facet Config中的聲明規則將DOM數據或模型綁定到CSS類。
• 幀 - 管理髮送/接收消息到/從iframe中。
• 拖動 - 允許輕鬆管理可拖動的DOM元素。
• 下降 - 有助於創建下降目標。
• 模型 - Milo模型的簡單包裝器（見下文），有助於將數據存儲在組件上。

有一個組件構圖模板，可以簡化自己的刻面創建。組件的所有方面均應是組成部分的子類。

組件實例的DOM綁定和創建

通常，當您調用Milo.binder時，基於有關組件類別， ml-bind面和組件名稱的信息時，組件的實例通常是自動創建的（可以通過milo.config更改）。

為了使您的組件可用於Milo，他們的課程應在組件註冊表（Milo.Registry.com）中註冊。如果定義新方面，則還應在Milo.Registry.facets中註冊它們的課程。

由於組件和方麵類的註冊通常發生在定義類的同一模塊（文件）中，因此您必須執行此模塊。如果您使用Broserify進行模塊管理，則足以使用：

 require('my_component');

在執行或需要的任何其他模塊中。

信使

Milo提供內部消息傳遞類，也可以用於應用程序需求。米洛（Milo）中的所有方面都有一個附有信使的實例，該實例定義了特定於該方面的消息API，在大多數情況下，連接到某些外部源（通常是DOM事件）。

Messenger實例使用MessageSource子類實例連接到MessengerAPI子類的外部來源和實例，以創建更高級別的內部消息並轉換消息數據。該體系結構允許僅在幾行代碼中創建高級功能。

請參閱Messenger文檔。

模型

MILO定義了模型，以允許安全訪問數據，而無需擔心設置數據是否設置（當您獲得未定義對象的屬性時訪問數據時永遠不會丟棄），並有可能訂閱類似於實驗對象的數據更改。

使用模型不需要這些API，與這些API不同，它允許訂閱模型的屬性更改為任何深度。

請參閱模型演示和模型文檔。

連接器

Milo定義了此類來管理實現數據消息傳遞API的對象之間的反應性連接。數據方面和模型的兩個實例都是這樣的對象。

您可以創建一或雙向連接，定義要觀察的數據結構的深度，關閉這些連接，例如，當您想進行許多模型更改而不引起DOM更新時。

這些連接沒有像angularjs一樣比較循環中數據的開銷，並且在存在許多連接的對象時不會引起任何性能降解。

很快，連接器實例將支持結構翻譯，允許在具有固定結構和具有柔性結構的DOM樹之間創建反應性連接。

可以使用Milo. -Minder創建一個或多個反應性連接。

請參閱連接器文檔。

視圖和應用程序管理

• Milo.Loader-將子視圖加載到頁面上。
• MILO.Mail-申請級信使，還定義了domready事件，並簡化了iframes之間的消息路由（請參閱框架facet）。
• Milo.config-配置Milo設置。

公用事業

• 檢查 - 檢查參數類型（從流星框架的支票套件分叉）。
• Logger-可配置的Logger，具有日誌級別。
• 請求-HTTP請求庫。
• DOM-操縱DOM元素的庫。

為什麼要米洛？

之所以選擇Milo名稱是因為Milo Minderbinder是Catch 22的戰爭掠奪者Milo Minderbinder。從管理Mess運營開始後，他將其擴展到了一個有利可圖的交易企業中，將所有人與所有人聯繫在一起，並在Milo和其他所有人中“有共享”。

Milo框架具有模塊粘合劑，該模塊將DOM元素綁定到組件（通過特殊的ML綁定屬性），並且允許在不同數據源之間建立實時反應性連接的模塊Minder （組件的模型和數據方面是此類數據源）。

巧合的是，米洛可以將其作為郵件在線的首字母縮寫。

沒有足夠的瀏覽器框架嗎？

我們可以放手的所有框架要么太原始，要么使我們寫太多的代碼（jQuery，骨幹），要么過於限制，具有足夠的魔術來真正快速構建簡單的應用程序，但對框架的精確功能（Angular，Ext）的控制有限。

我們一直想要的是一個允許的框架

• 以聲明性的方式開發應用程序，並具有模型的反應性綁定到視圖
• 在應用程序中的不同模型之間創建反應性數據綁定，以用聲明而不是命令方式管理數據傳播
• 在這些綁定中插入驗證器和翻譯器，因此我們可以將視圖綁定到數據模型，而不是在AngularJ中查看模型。
• 對與DOM元素相關的組件的精確控制。
• 視圖管理的靈活性允許在模型更改上自動操縱DOM ，並使用任何__模板引擎__在渲染效率比DOM操作更有效的情況下重新渲染某些部分
• 動態創建UI的能力
• 能夠將數據反應性背後的機制連接到機制，並精確控制查看更新和數據流
• 能夠擴展框架提供的組件功能並創建新組件。

我們找不到這樣的框架，因此我們開始與使用它的應用程序並行開發Milo 。

建築學

###基於原型的繼承

Milo依靠JavaScript原型來構建框架塊。

JavaScript是一種非常動態的語言。它允許創建類（ Component.createComponentClass ）的寫作功能，該功能允許實現組合模式，其中每個組件類都是作為預定塊塊（facet）的集合而創建的，並具有針對構造類的構面配置（儘管不是從塊中創建的）。

運行時代碼“生成”

JavaScript還允許創建創建函數的構造函數函數，使模型對象的表達性語法成為可能，並將模型訪問路徑的運行時間“彙編”成函數。

刻面對象

組件類基於一個抽象的FacetedObject類，該類可以應用於任何可以通過構集的對象表示對象的任何域（一個方面是某個類的對象，它具有其自己的配置，數據和方法）。

從某種意義上說，方面模式是轉移模式的反轉 - 而後者允許找到具有特定功能的類/方法，而刻面對象則簡單地構造為具有這些功能。這樣，就可以創建一個幾乎無限數量的組件類，具有非常有限的構建塊，而不會具有高級別的類別 - 大多數組件直接從組件類中繼承。

同時，米洛（Milo）支持繼承機制時，當子類可以為已經處於超級階級的方面添加方面並重新定義繼承的方面的配置。

混合物

我們還使用Mixin模式，但是Milo中的Mixin被實現為單獨的對象，該對象存儲在主機對象的屬性上，並且可以在主機對像上創建代理方法。類Messenger，MessageRecer和DataSource是Mixin Abstract類的子類。

註冊表：依賴性反轉

組件和方面在註冊表中註冊，允許避免從一個模塊中要求它們。它可以防止模塊之間的循環依賴關係。

依賴性

Milo的依賴性是Proto ，一個對像操縱庫和DOT ，一個模板引擎（兩者都包含在Milo捆綁包中）。

沒有jQuery，Zepto，等。

我們不使用任何DOM遍歷庫，因為：

• DOM API快得多（在某些情況下，30倍）
• 我們不希望瀏覽器兼容性代碼成為框架的一部分。如果需要某些應用程序，則可以用多填充來實現。如果需要的話，我們可能會為米洛開發它們，但可以隨意做出貢獻。
• 申請開始時間明顯更快

取而代之的是，Milo組件可以具有DOM FACET，其中包含幾個方便功能來操縱DOM元素，並且有milo.util.dom類似的功能集合，可以使用，無需組件。

沒有下劃線，Lo-Dash等。

Milo使用庫原始庫，該圖書館具有種植的實用程序功能的收集，以操縱對象，原型，陣列，功能和字符串。請參閱其存儲庫，以獲取不使用第三方庫的決定背後的文檔和原因。

它與Milo捆綁在一起，其所有功能都可以作為_對象的屬性可用，您無需單獨加載它。

執照

http://opensource.org/licenses/bsd-2-clause

更改日誌

請參閱版本