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

更改日志

请参阅版本