milo 다운로드 milo 소스 코드 다운로드

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 }) 사용하여 생산 에서이 점검을 끄는 것이 좋습니다.

응용 프로그램에 따라 성능을 두 번 이상 향상시킬 수 있습니다.

샘플/튜토리얼

시작하기

바인딩 소개

데이터 패싯 소개

메신저 소개

모델 소개

Minder 소개

목록 소개

Tuts+에서 자신의 프레임 워크를 굴리는 Milo 생성에 관한 기사

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

또한 프로젝트에서 Grunt를 설정하여 Milo 번들이 변경 될 때마다 재건 할 수 있습니다.

커밋하기 전에 grunt tests 실행해야합니다 (Travisci가 자동으로 실행하는 grunt test 뿐만 아니라 브라우저 테스트를 포함한 모든 테스트를 실행합니다.

개념

모듈 식 디자인

Milo는 하나의 번들로 패키지되어 있지만 매우 모듈 식 구조를 가지고 있습니다. 함께 또는 별도로 사용할 수 있으며 특정 응용 프로그램 구조를 만들기보다는 일반적인 응용 프로그램 작업을 단순화하도록 설계된 여러 독립 모듈로 구성됩니다.

Milo 의 일부 모듈은 브라우저 (Component, ComponentFacet, Milo.binder), 일부 브라우저 및 Nodejs (메신저 및 관련 클래스, 모델, 커넥터, Milo.Minder)에서만 사용할 수 있습니다.

Milo 자체는 Browserify를 패키지 번들에 사용하지만 Milo -Milo 를 사용하는 앱에서 모든 모듈 시스템을 사용할 수 있습니다.

요소

구성 요소는 DOM의 관리를 단순화하도록 설계되었습니다. 구성 요소는 특정 DOM 요소에 연결됩니다. 동일한 DOM 요소에 여러 구성 요소를 첨부하는 것은 일반적으로 응용 프로그램 (또는 MILO) 설계 실수이므로 발생하면 오류가 콘솔에 로그인됩니다.

구성 요소는 구성된 "패싯"모음으로 정의 된 서브 클래스를 매우 쉽게 생성 할 수 있습니다. 예를 들어, mlSelect UI 구성 요소의 정의를 참조하십시오.

자신의 구성 요소의 생성을 단순화하기위한 구성 요소 템플릿이 있습니다.

구성 요소 문서를 참조하십시오.

구성 요소 패싯

ComponentFacet은 기본 클래스이며, 그 중 서브 클래스는 구성 요소의 동작과 관련된 그룹 방법입니다.

패싯을 인스턴스화 할 필요가 거의 없습니다. 구성 요소가 생성되면 모든 패싯을 만듭니다.

Milo 에는 다음과 같은 측면이 있습니다.

컨테이너 - 구성 요소의 범위를 만드는 특수 패싯
DOM- 구성 요소 요소의 DOM 조작 단순화를 단순화하는 도우미 방법 모음
이벤트 - DOM 이벤트에 가입하기위한 편리한 API를 제공합니다.
데이터 - 구성 요소 내부의 DOM 트리를 데이터로 조작하는 API, 한 번에/DOM 요소에서 구조화 된 데이터를 얻거나 설정하고 모델의 반응성 데이터 연결 (아래 참조)을 DOM으로 만들 수 있습니다.
목록 및 항목 - 데이터의 Arays에서 Dom에서 목록을 작성할 수 있습니다. 이러한 패싯을 사용하는 구성 요소 클래스에는 목록 데이터를 가져 오거나 반응성 데이터 연결을 생성하는 데 사용해야하는 데이터 패싯 (자동으로 추가)이 필요합니다.
템플릿 - 템플릿에서 구성 요소 dom 요소의 렌더링을 단순화합니다.
CSS- 패싯 구성에서 선언 규칙을 사용하여 DOM 데이터 또는 모델을 CSS 클래스에 바인딩 할 수 있습니다.
프레임 - iframe으로오고 나오는 메시지 보내기/수신을 관리합니다.
드래그 - 드래그 가능한 DOM 요소를 쉽게 관리 할 수 있습니다.
드롭 - 드롭 대상 생성에 도움이됩니다.
모델 - MILO 모델 용 간단한 래퍼 (아래 참조), 구성 요소에 데이터를 저장하는 데 도움이됩니다.

자신의 패싯의 생성을 단순화하기위한 구성 요소 패싯 템플릿이 있습니다. 구성 요소의 모든 측면은 ComponentFacet의 서브 클래스 여야합니다.

구성 요소 인스턴스의 DOM 바인딩 및 생성

구성 요소 인스턴스는 일반적으로 ml-bind 속성의 구성 요소 클래스, 패싯 및 구성 요소 이름에 대한 정보를 기반으로 MILO.BINDER를 호출 할 때 자동으로 생성됩니다 (MILO.CONFIG를 통해 변경할 수 있음).

MILO 에 구성 요소를 사용할 수 있도록 해당 클래스는 Components Registry (Milo.registry.comPonents)에 등록해야합니다. 새면을 정의하는 경우 클래스도 등록해야합니다 (Milo.registry.facets).

구성 요소 및 패싯 클래스의 등록은 일반적으로 클래스를 정의하는 동일한 모듈 (파일)에서 발생 하므로이 모듈을 실행해야합니다. 모듈 관리에 Broserify를 사용하는 경우 사용하기에 충분합니다.

 require('my_component');

실행되거나 필요한 다른 모듈에서.

전령

MILO는 응용 프로그램 요구에도 사용할 수있는 내부 메시징 클래스를 공급합니다. Milo 의 모든 측면에는 메신저 인스턴스가 부착되어 있으며, 대부분의 경우 일부 외부 소스 (일반적으로 DOM 이벤트)에 연결되는 메시징 API를 정의합니다.

메신저 인스턴스는 MessageSource 서브 클래스 인스턴스를 사용하여 외부 소스 및 MessengerAPI 서브 클래스 인스턴스에 연결하여 더 높은 수준의 내부 메시지를 생성하고 메시지 데이터를 변환합니다. 이 아키텍처를 통해 몇 줄의 코드로 고급 기능을 생성 할 수 있습니다.

메신저 문서를 참조하십시오.

모델

MILO는 모델을 정의하여 데이터가 설정되었는지 걱정하지 않고도 데이터에 안전하게 액세스 할 수 있도록 모델을 정의하고 (정의되지 않은 객체의 속성을 얻을 때 데이터에 액세스 할 때는 절대 던지지 않음) 실험 객체와 유사한 데이터 변경 사항을 구독 할 수있는 가능성을 가능하게합니다.

모델을 사용하려면 이러한 API가 필요하지 않으며 이러한 API와 달리 모델의 속성에 대한 변경 사항이 모든 깊이로 구독 할 수 있습니다.

모델 데모 및 모델 문서를 참조하십시오.

커넥터

MILO는 이 클래스를 정의하여 데이터 메시징 API를 구현하는 객체 간의 반응성 연결을 관리합니다. 데이터면과 모델의 인스턴스는 그러한 객체입니다.

하나 또는 양방향 연결을 생성하고, 관찰하려는 데이터 구조의 깊이를 정의하고, 이러한 연결을 끄십시오.

이러한 연결에는 angularjs 와 마찬가지로 루프에서 데이터를 비교하는 오버 헤드가 없으며 많은 연결된 객체가 존재할 때 성능 저하를 유발하지 않습니다.

곧 커넥터 인스턴스는 구조 변환을 지원하여 고정 구조를 가진 모델과 유연한 구조를 가진 DOM 트리간에 반응성 연결을 생성 할 수 있습니다.

MILO.MINDER로 하나 또는 다중 반응성 연결을 만들 수 있습니다.

커넥터 문서를 참조하십시오.

견해 및 응용 프로그램 관리

milo.loader- 하위 뷰를 페이지에로드합니다.
MILO.MAIL- domready 이벤트를 정의하고 IFRAME 간의 메시지 라우팅을 단순화하는 Applicateon 레벨 메신저 (프레임 패싯 참조).
MILO.CONFIG- MILO 설정 구성.

유용

확인 - 매개 변수 유형 확인 (유성 프레임 워크의 점검 패키지에서 포장).
로거 - 로그 레벨이있는 구성 가능한 로거.
요청 -HTTP 요청 라이브러리.
DOM- DOM 요소를 조작하는 라이브러리.

왜 밀로?

Milo 이름은 Catch 22의 전쟁 수익자 인 Milo Minderbinder로 인해 선정되었습니다. 혼란 운영 관리를 시작한 그는 모든 사람과 모든 사람을 연결하는 수익성있는 거래 기업으로 확장했으며 Milo와 다른 모든 사람들이 "공유"를 확대했습니다.

MILO 프레임 워크는 모듈 바인더를 가지고 있으며, DOM 요소를 구성 요소 (특수 ML- 결합 속성을 통해)에 바인딩하고 다양한 데이터 소스 (구성 요소의 모델 및 데이터 측면)간에 실시간 반응 연결을 설정할 수있는 모듈 Minder가 있습니다 .

우연히도 Milo는 온라인 메일 의 약어로 읽을 수 있습니다.

브라우저 프레임 워크가 충분하지 않습니까?

우리가 손에 닿을 수있는 모든 프레임 워크는 너무 원시적이어서 우리 자신의 (jQuery, 백본)의 너무 많은 코드를 작성하거나 너무 제한적이지만 간단한 애플리케이션을 실제로 빠르게 구축하기에 충분한 마법이 있지만 프레임 워크 (Angular, Ext)의 정확한 기능에 대한 제한적인 제어를 제공합니다.

우리가 항상 원했던 것은

뷰에 모델의 반응성 결합으로 선언적 방식으로 응용 프로그램 개발
응용 프로그램에서 다른 모델간에 반응성 데이터 바인딩 생성 명령 적 스타일이 아닌 선언적으로 데이터 전파를 관리합니다.
이러한 바인딩에 유효성 검사기 와 번역기를 삽입하므로 AngularJS와 같은 모델을 보지 않고 데이터 모델에 뷰를 바인딩 할 수 있습니다.
DOM 요소에 연결된 구성 요소에 대한 정확한 제어 .
뷰 관리의 유연성 모델 변경에서 DOM을 자동으로 조작 하고 __ 템플릿 엔진 __를 사용하여 일부 섹션을 다시 렌더링 할 수있는 유연성
UI를 동적으로 생성하는 기능
데이터 반응성의 메커니즘 에 연결하고 보기 업데이트 및 데이터 흐름을 정확하게 제어 할 수 있습니다.
프레임 워크에서 제공하는 구성 요소의 기능을 확장 하고 새로운 구성 요소를 생성 할 수 있습니다.

우리는 그러한 프레임 워크를 찾을 수 없었기 때문에 그것을 사용하는 응용 프로그램과 병렬로 MILO를 개발하기 시작했습니다.

건축학

### 프로토 타입 기반 상속

Milo는 JavaScript 프로토 타입에 의존하여 프레임 워크 블록을 구축합니다.

JavaScript는 매우 역동적 인 언어입니다. 클래스 ( Component.createComponentClass )를 생성하는 작문 기능을 허용하는 각 구성 요소 클래스가 구성된 클래스에 특정한 측면을 구성하여 사전 정의 된 블록 (패싯)의 모음으로 만들어지는 구성 패턴을 구현할 수 있습니다 (블록에서 생성되지는 않지만 Ext 구성 요소와 유사합니다).

런타임 코드 "생성"

JavaScript를 사용하면 기능을 생성하는 생성자 기능을 생성 할 수 있으며 모델 객체에 대한 매우 표현력있는 구문과 모델 액세스 경로의 "컴파일"을 함수로 런타임에 사용할 수 있습니다.

측면 객체

구성 요소 클래스는 패싯 모음을 통해 객체를 표현할 수있는 도메인에 적용될 수있는 추상 FacetedObject 클래스를 기반으로합니다 (패싯은 특정 클래스의 객체이며 자체 구성, 데이터 및 방법을 보유합니다).

어떤면에서, 패킷 패턴은 어댑터 패턴의 역전이다. 후자는 특정 기능을 갖는 클래스/메소드를 찾을 수있게되며, 패싯 된 물체는 단순히 이러한 기능을 갖도록 구성된다. 이러한 방식으로 클래스의 높은 계층 구조가없는 채로 제한된 수의 빌딩 블록을 가진 사실상 무제한 수의 구성 요소 클래스를 만들 수 있습니다. 대부분의 구성 요소는 구성 요소 클래스에서 직접 상속됩니다.

동시에 MILO는 서브 클래스가 이미 슈퍼 클래스에있는 패싯을 추가하고 상속 된 패싯의 구성을 재정의 할 수있는 상속 메커니즘을 지원합니다.

믹스 인

또한 Mixin Pattern을 사용하지만 MILO 의 Mixin은 호스트 객체의 특성에 저장된 별도의 객체로 구현되며 필요한 경우 호스트 오브젝트에 프록시 메소드를 생성 할 수 있습니다. 클래스 메신저, MessessOURCE 및 DataSource는 Mixin Abstract 클래스의 서브 클래스입니다.

레지스트리 : 의존성 반전

구성 요소 및 패킷은 한 모듈에서 요구하지 않도록 레지스트리에 등록합니다. 모듈 사이의 원형 의존성을 방지합니다.

의존성

MILO의 종속성은 객체 조작 라이브러리 인 Proto 및 템플릿 엔진 (MILO 번들에 포함)입니다.

jQuery, Zepto 등이 없습니다.

우리는 DOM Traversal 라이브러리를 사용하지 않습니다.

Dom API는 훨씬 빠릅니다 (경우에 따라 30 배 더 빠릅니다)
브라우저 호환성 코드가 프레임 워크의 일부가되기를 원하지 않습니다. 일부 애플리케이션에 필요한 경우 폴리 필로 구현할 수 있습니다. 우리는 필요하다면 Milo를 위해 그것들을 개발할 수 있지만 자유롭게 기여하십시오.
응용 프로그램 시작 시간이 눈에 띄게 빠릅니다

대신, MILO 구성 요소는 DOM 요소를 조작하기위한 몇 가지 편의 기능을 포함하는 DOM 패싯을 가질 수 있으며 milo.util.dom 요소없이 사용할 수있는 유사한 기능 모음이 있습니다.