milo
1.0.0
Браузер/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 - раздвоен от проверки пакета Meteor Framework) для проверки времени выполнения типов параметров. Настоятельно рекомендуется отключить эти проверки в производстве, используя: milo.config({ check: false }) .
В зависимости от вашего приложения он может повысить производительность более чем в два раза.
Введение в обязательство
Введение в аспект данных
Введение в посланников
Введение в модели
Введение в Миндер
Введение в списки
Статья о создании MILO Rolling Your Pramework на Tuts+
Более продвинутый образец - приложение Todos в папке ToDomvc.
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Кроме того, вы можете настроить Grunt в своем проекте, чтобы восстановить его при изменении Milo Bundle.
Пожалуйста, убедитесь, что вы запускаете grunt tests перед совершением (а не только grunt test , который управляет Travisci автоматически) - он будет запускать все тесты, включая тесты браузера.
Хотя Milo упакован как один пакет, он имеет очень модульную структуру. Он состоит из нескольких независимых модулей, которые можно использовать вместе или отдельно, и которые предназначены для упрощения общих задач применения, а не для создания какой -либо конкретной структуры приложения.
Некоторые модули в Milo могут использоваться только в браузере (Component, ComponentFacet, Milo.binder), некоторые как в браузере, так и в Nodejs (Messenger и связанные с ним классы, модель, разъемы, Milo.minder).
Сам Milo использует браузриф для пакета упаковки, но любая система модулей может использоваться в приложении, в котором используется Milo - Milo , не предлагает никакой структуры приложения.
Компонент предназначен для упрощения управления DOM. Компонент прикреплен к определенному элементу DOM. Прикрепление нескольких компонентов к одному и тому же элементу DOM обычно является ошибкой проектирования приложения (или MILO), поэтому, если это произойдет, ошибка будет зарегистрирована в консоли.
Компоненты позволяют очень легко создавать подклассы, которые определяются как набор настроенных «аспектов». Например, см. Определение компонента пользовательского интерфейса MlSelect.
Существует шаблон компонента для упрощения создания ваших собственных компонентов.
См. Компонентная документация.
ComponentFacet - это базовый класс, подклассы, из которых групповые методы, связанные с поведением компонентов.
Вам редко нужно создавать экземпляр аспекта - когда создается компонент, он создает все свои аспекты
В Milo определены следующие аспекты:
Существует компонентный шаблон аспектов, чтобы упростить создание ваших собственных аспектов. Все аспекты компонентов должны быть подклассами ComponentFacet.
Экземпляры ваших компонентов обычно создаются автоматически, когда вы вызовуте Milo.binder на основе информации о классах компонентов, аспектах и имени компонентов в атрибуте ml-bind (можно изменить через Milo.config).
Чтобы сделать ваши компоненты доступными для Milo, их классы должны быть зарегистрированы в реестре компонентов (Milo.registry.components). Если вы определяете новые аспекты, их классы также должны быть зарегистрированы (в Milo.registry.facets).
Поскольку регистрация классов компонентов и аспектов обычно происходит в том же модуле (файл), который определяет класс, вы должны выполнить этот модуль. Если вы используете Broserify для управления модулями, этого достаточно для использования:
require('my_component');
в любом другом модуле, который выполняется или требуется.
Milo поставляет внутренние классы обмена сообщениями, которые также можно использовать для потребностей применения. Все аспекты в Milo имеют экземпляр, прикрепленный к ним мессенджеру, который определяет API обмена сообщениями, специфичный для аспекта, в большинстве случаев, соединяющихся с некоторым внешним источником (обычно события DOM).
Экземпляры Messenger используют экземпляры подклассов MessageSource для подключения к внешним источникам и экземплярам подклассов MessengerAPI для создания внутренних сообщений более высокого уровня и преобразования данных сообщений. Эта архитектура позволяет создавать расширенную функциональность всего за несколько строк кода.
Смотрите документацию по мессенджеру.
MILO определяет модель, чтобы обеспечить безопасный доступ к данным без необходимости беспокоиться о том, были ли заданы данные (она никогда не выбрасывает, когда вы получаете доступ к данным, когда вы получаете свойства неопределенных объектов), и для того, чтобы позволить возможность подписаться на изменения данных, аналогичные тем, что позволяют API -интерфейс array.observe.
Использование модели не требует этих API, и, в отличие от этих API, это позволяет подписаться на изменения на свойствах ваших моделей на любую глубину.
См. Модель демонстрационной и модельную документацию.
Мило определяет этот класс для управления реактивным соединением между объектами, которые реализуют API обмена данными. Оба случая аспекта данных и модели являются такими объектами.
Вы можете создавать одно или двусторонние соединения, определить глубину ваших структур данных, которые вы хотите наблюдать, выключите эти соединения, например, когда вы хотите внести много изменений модели, не вызывая обновления DOM.
Эти соединения не имеют накладных расходов, сравнивая данные в цикле, как angularjs , и не вызывает какого -либо снижения производительности, когда существует много подключенных объектов.
Очень скоро экземпляры разъемов будут поддерживать перевод структуры, позволяющий создавать реактивные соединения между моделями с фиксированными структурами и деревьями DOM с гибкими структурами.
Одно или несколько реактивных соединений могут быть созданы с Milo.minder.
Смотрите документацию по соединению.
domready и упрощает маршрутизацию сообщений между iframes (см. Frame Facet).Имя Milo было выбрано из -за Milo Minderbinder, военного спекулятора от Catch 22. Начав с управления операциями по беспорядку, он расширил их в прибыльное торговое предприятие, которое связало всех со всем, и в этом Майло и всех остальных "есть доля".
MILO. Фреймворк имеет переплет модуля, который связывает элементы DOM с компонентами (с помощью специального атрибута ML-связующего), а модульный мышер , который позволяет устанавливать живые реактивные соединения между различными источниками данных (модель и аспект данных компонентов являются такими источниками данных).
По совпадению, Майло может быть прочитана как аббревиатуру почты онлайн .
Все фреймворки, на которые мы могли бы возложить в руки, были либо слишком примитивными, оставляя нас, чтобы написать слишком много собственного кода (jQuery, Backbone), либо слишком ограничивающим, с достаточным количеством магии, чтобы создать простое приложение очень быстро, но с ограниченным контролем над точным функционированием структуры (Angular, Ext).
Мы всегда хотели
Мы не могли найти такую структуру, поэтому мы начали разрабатывать Milo параллельно с приложением, которое его использует.
### Прототип, основанный на наследстве
Мило полагается на прототипы JavaScript для создания фреймворных блоков.
JavaScript - очень динамичный язык. Он позволяет записать функции, которые создают классы ( Component.createComponentClass ), которые позволяют реализовать шаблон композиции, где каждый класс компонентов создается как сбор предварительно определенных блоков (грани) с конфигурацией аспекта, характерного для построенного класса (он имеет некоторую сходство с компонентами EXT, хотя они не создаются блоками).
JavaScript также позволяет создавать функции конструктора, которые создают функции, которые делают возможным очень выразительный синтаксис для объектов модели, а также «компиляцию времени времени выполнения путей доступа к модели в функции.
Класс компонентов основан на абстрактном классе FacetedObject , который может быть применен к любому домену, где объекты могут быть представлены с помощью сбора аспектов (аспект является объектом определенного класса, он содержит свою собственную конфигурацию, данные и методы).
В некотором смысле, схема аспектов является инверсией паттерна адаптера - в то время как последний позволяет найти класс/методы, которые имеют специфическую функциональность, аспектный объект просто построен для того, чтобы иметь эти функции. Таким образом, можно создать практически неограниченное количество классов компонентов с очень ограниченным количеством строительных блоков без высокой иерархии классов - большинство компонентов наследуют непосредственно от класса компонентов.
В то же время MILO поддерживает механизм наследования, когда подкласс может добавлять аспекты к тем, которые уже находятся в суперклассе, и для переопределения конфигурации наследственных грани.
Мы также используем шаблон Mixin, но Mixin в Milo реализован как отдельный объект, который хранится в свойстве объекта хоста и может создавать прокси -методы на объекте хоста, если это необходимо. Занятия Messenger, MessageSource и DataSource являются подклассами класса Abstract Mixin.
Компоненты и аспекты регистрируются в реестрах, которые позволяют избежать требования их от одного модуля. Это предотвращает круговые зависимости между модулями.
Зависимости Milo - это прото , библиотека манипуляций с объектами и точка , шаблон (оба включены в пакет Milo).
Мы не используем ни одной библиотеки DOM Traversal, потому что:
Вместо этого компоненты Milo могут иметь Dom Facet, который включает в себя несколько удобных функций для манипулирования элементами DOM, и есть milo.util.dom - аналогичная коллекция функций, которые можно использовать без компонентов.
Мило использует библиотечный прото , который имеет набор функций утилиты для манипуляции с объектами, прототипами, массивами, функциями и строками. Пожалуйста, посмотрите его хранилище для документов и причин решения, лежащих в основе решения, чтобы не использовать сторонние библиотеки.
Он объединен вместе с Milo , и все его функции доступны в качестве свойств _ объекта, вам не нужно загружать его отдельно.
http://opensource.org/licenses/bsd-2-clause
Смотрите релизы
