el.js
1.0.0
실용적인 재사용성을 갖춘 합리적인 마이크로앱 프레임워크입니다.
el.js 는 마이크로 앱 구축을 위해 Riot.js 템플릿을 기반으로 구축된 프레임워크입니다.
웹 프레임워크에서는 개발자가 웹페이지 전체가 동적 웹앱이 아니더라도 대부분을 구축해야 합니다. 이를 통해 개발자는 웹페이지의 모든 내용이 추론할 수 있는 일관되고 예측 가능한 단일 렌더링 흐름을 따르도록 할 수 있습니다. 그러나 더 복잡한 캐싱 방식, 긴 로드 시간, SEO 문제 등 기존 정적 웹사이트에 비해 많은 단점도 있습니다. 마이크로앱은 이러한 단점에 대한 강력한 솔루션을 제공합니다. 거대한 모놀리식 웹 애플리케이션을 구축하는 대신 작은 앱을 구축하고 정적인 페이지에 삽입하세요.
마이크로앱은 반복해서 재사용할 수 있는 작고 매우 제한된 범위의 기능을 수행합니다. 마이크로앱은 프레임워크가 표준이 되기 전의 내장형 위젯 개념과 크게 다르지 않지만, 합리적인 프레임워크와 실용적인 재사용성에 대한 의존을 강조한다는 점에서 실행 면에서 다릅니다.
HTML: index.html
< html >
< head >
<!-- Head Content -->
< link rel =" stylesheet " src =" https://cdn.jsdelivr.net/gh/hanzo-io/el-controls/theme.css " />
</ head >
< body >
< my-form >
< div >
< label > Type Your Name </ label >
<!-- bind my-input to parent(my-form).data.name, parent.data is implicit for what is supplied to bind attribute -->
< my-input bind =' name ' />
</ div >
< div >
< span > Your Name Is </ span >
< span > { data.name } </ span >
</ div
</ my-form >
<!-- el.js Library -->
< script src =" https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js " > </ script >
< script src =" my-script.js " > </ script >
</ body >
</ html >JS: my-script.js
// window.El is the global value
// El.Form extends El.View and validates bound El.Inputs
class Form extends El . Form {
constuctor ( ) {
// data contains your state
this . data = {
name : '?' ,
}
// your custom tag name
this . tag = 'my-form'
super ( )
}
}
Form . register ( )
// El.Input extends El.View and binds to updating El.Form values
class Input extends El . Input {
constructor ( ) {
// your custom tag name
this . tag = 'my-input'
// the default this.change function works with all basic html inputs(<input>, <textarea>, ...).
this . html = '<input onkeydown="{ change }" />'
super ( )
}
}
Input . register ( )
El . mount ( '*' ) 사용자 정의 스크립트와 deps 및 참조 window.El 앞의 맨 아래에 이 태그를 추가하세요.
< script src =" https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js " > </ script >NPM을 통해 설치
npm install el . js -- saveCommonJS를 지원합니다.
var El = require ' el.js '또는 ES6 가져오기
import El from ' el.js '이 유형은 El.Form 에서 참조되어 name 과 연관된 필드의 유효성을 검사하는 데 사용되는 정보를 저장합니다.
| 이름 | 유형 | 기본 | 설명 |
|---|---|---|---|
| 구성 | MiddlewareFunction 또는 [ MiddlewareFunction ] | 한정되지 않은 | 이 유형은 유효성 검사()를 생성하는 데 사용된 원래 MiddlewareFunction 또는 MiddlewareFunction을 저장합니다. |
| 이름 | 끈 | '' | 이는 이 유형의 나머지 부분이 참조하는 El.Form 의 데이터 속성에 있는 필드의 이름입니다. |
| 심판 | 참조 트리 | 한정되지 않은 | 이것은 this.ref.get( name )을 호출하여 name 값을 검색할 수 있는 변경 가능한 데이터 트리에 대한 링크입니다. |
| 이름 | 유형 | 설명 |
|---|---|---|
| 검증하다 | (참조 트리, 문자열) => 약속 | 이 메서드는 Promise를 사용하여 모든 MiddlwareFunction을 직렬로 호출합니다. |
이 유형은 El.Form 에 대한 미들웨어를 정의하는 데 사용됩니다. 다음과 같은 기능을 사용하여 유효성 검사 및 입력 삭제를 수행합니다.
function isRequired ( value ) {
value = value . trim ( )
if ( value && value != '' ) {
return value
}
throw new Error ( 'Required' )
} 이 유형은 참조에 의한 약속 반환을 용이하게 하기 위해 내부적으로 사용됩니다.
모든 El 클래스의 기본 클래스입니다. 각 El.View는 사용자 정의 태그에 해당합니다. 이 클래스를 확장하여 자신만의 맞춤 태그를 만드세요.
| 이름 | 유형 | 기본 | 설명 |
|---|---|---|---|
| CSS | 끈 | '' | 이는 태그의 CSS를 나타내는 문자열입니다. 마운트 시 태그 하단에 클래스당 1회 주입됩니다. |
| 데이터 | 참조 트리 | 한정되지 않은 | 이 속성은 태그의 상태를 저장합니다. |
| HTML | 끈 | '' | 이는 태그의 내부 HTML을 나타내는 문자열입니다. |
| 뿌리 | HTML요소 | 한정되지 않은 | 이 속성은 탑재된 뷰가 바인딩된 웹페이지의 태그에 대한 참조를 저장합니다. |
| 꼬리표 | 끈 | '' | 이는 사용자 정의 태그 이름입니다. |
| 이름 | 유형 | 설명 |
|---|---|---|
| 초기화 전 | () => | 여기의 코드는 태그가 초기화되기 전에 실행됩니다. |
| 초기화 | () => | 여기의 코드는 태그가 초기화될 때 실행되지만 태그가 마운트되기 전에 실행됩니다. 권장 사항 - 태그의 수명 주기에 바인딩해야 하는 경우 여기에서 수행하세요. |
| 일정업데이트 | () => 약속 | 이 메서드는 비동기 업데이트 호출을 예약합니다. 중첩된 뷰가 있는 경우 최상위 뷰에서 업데이트 호출을 일괄 처리합니다. 업데이트 실행 시기에 대한 약속을 반환합니다. |
| 업데이트 | () => | 이 메서드는 태그를 업데이트합니다. 이는 웹페이지에서 이벤트가 트리거된 후에 암시적으로 호출됩니다. 그러한 경우는 '간단한 형식 예'의 onkeydown을 참조하세요. 태그를 업데이트하려면 이 메서드를 수동으로 호출하세요. 권장 - 동기 업데이트 계단식을 방지하려면 대신 수동으로 ScheduleUpdate()를 호출하는 것이 좋습니다. |
각 El.View는 이벤트 방출자입니다. 추가 문서는 riot.observable(http://riotjs.com/api/observable/)을 참조하세요.
| 이름 | 유형 | 설명 |
|---|---|---|
| El.View.등록 | () => | 그러면 현재 사용자 정의 태그가 렌더링 엔진에 등록됩니다. 태그를 정의한 후 호출하세요. |
이 클래스는 양식은 물론 더 복잡한 IO 기반 마이크로 앱을 나타내는 데 사용됩니다. 이 클래스는 일반적인 양식 유효성 검사 및 양식 제출 논리를 제공합니다.
| 이름 | 유형 | 기본 | 설명 |
|---|---|---|---|
| 구성 | 물체 | 한정되지 않은 | MiddlewareFunction 또는 MiddlewareFunctions 배열에 이름 맵을 제공합니다. 자세한 내용은 MiddlewareFunction을 참조하세요. |
| 입력 | 물체 | null | configs 의 각 요소는 inputs 의 요소로 변환됩니다. 이를 직접 수정하는 것은 권장되지 않습니다. |
| 이름 | 유형 | 설명 |
|---|---|---|
| 초기화 | () => | 여기의 코드는 태그가 초기화될 때 마운트되기 전에 실행됩니다. initInputs()를 호출하므로 수동으로 호출하거나 ES6에서는 super()를 호출합니다. 권장 사항 - 태그의 수명 주기에 바인딩해야 하는 경우 여기에서 수행하세요. |
| 초기화입력 | () => | 구성을 컴파일하고 내보낸 구조체를 inputs 에 할당합니다. 구성 과 같은 입력에는 data 의 명명된 필드에 대한 참조가 포함됩니다. |
| 제출하다 | (이벤트) => 약속 | 이 메서드는 configs 에 정의된 대로 데이터 의 각 필드에 대한 유효성 검사를 트리거합니다. 이 메소드는 이벤트 핸들러/리스너로 호출되어야 합니다. 유효성 검사가 성공하면 submit()을 호출하고 유효성 검사 성공/실패에 대한 약속을 반환합니다. |
| _제출하다 | () => | 여기의 코드는 submit() 호출 중에 양식의 유효성이 검사될 때 실행됩니다. |
이는 양식 입력 및 IO 컨트롤을 구축하기 위한 기본 클래스입니다.
| 이름 | 유형 | 기본 | 설명 |
|---|---|---|---|
| 묶다 | 끈 | '' | 이 속성은 이것이 바인딩되는 상위 양식 데이터 의 필드를 결정합니다. |
| 조회 | 끈 | '' | 바인딩 과 동일하며 더 이상 사용되지 않습니다 . |
| 오류 메시지 | 끈 | '' | 이 속성은 this.input.validate의 반환된 Promise가 포착하는 첫 번째 오류 메시지로 설정됩니다. |
| 입력 | 입력 유형 | null | 이 속성은 상위 데이터 의 필드 바인딩이 지정하는 내용을 기반으로 상위 양식의 입력 속성에서 가져옵니다. |
| 유효한 | 부울 | 거짓 | 이 속성은 입력의 유효성 검사 상태를 결정하는 데 사용됩니다. this.input.validate가 호출될 때 설정되며, this.input.validate의 반환된 Promise가 완전히 실행되는 경우에만 true로 설정됩니다. |
| 이름 | 유형 | 설명 |
|---|---|---|
| 변화 | (이벤트) => | 이 메서드는 입력을 업데이트한 다음 유효성을 검사합니다. 이 메소드는 이벤트 핸들러/리스너에 의해 호출되어야 합니다. |
| 변경됨 | () => | 이 메소드는 this.input.validate의 반환된 Promise가 완전히 실행될 때 호출됩니다. |
| 클리어오류 | () => | 이 메서드는 errorMessage를 ''로 설정하고 유효성 검사 전에 호출됩니다. |
| 오류 | (오류) => | 이 메서드는 errorMessage를 설정하고 유효성 검사가 실패할 때 호출됩니다. |
| getValue | (이벤트) => 임의 | 이 메서드는 입력에서 값을 가져옵니다. 기본적으로 이 메소드는 Event 의 target.value를 반환합니다. |
| 검증하다 | (PromiseReference?) => 약속 | 이 메서드는 입력의 유효성을 검사하고 참조(내부적으로 필요함)와 값으로 유효성 검사 성공 및 실패를 나타내는 Promise를 반환합니다. |
| 이름 | 유형 | 설명 |
|---|---|---|
| El.일정 업데이트 | () => | 페이지의 모든 마이크로앱에 대한 업데이트를 예약합니다. |
el.js 의 라이프사이클 기능은 Riot.js에서 상속되었습니다.
el.js 참조 트리를 사용하여 양식 데이터를 저장합니다.
자신의 데이터 구조 주변 참조에서 get, set, on, Once, off 메소드를 구현하고 이를 데이터 속성으로 놓습니다.
컨테이너는 내부 템플릿에 사용할 방법을 제공하고 해당 콘텐츠를 완전히 덮어쓸 수 있는 사용자 정의 태그입니다(하나 이상의 태그에 있는 콘텐츠만 포함). 컨트롤 은 흥미로운 방식으로 정보를 표시하거나 입력, 선택 또는 GoogleMaps 삽입과 같은 입력을 얻기 위해 사용자와 상호 작용하는 구성 요소입니다.
긴밀하게 결합된 방식으로 위젯을 구축하는 대신 위젯을 컨테이너와 컨트롤로 분해하여 재사용성을 극대화하세요. 가장 적합한 방식으로 내부 HTML을 구성하십시오. 그런 다음 완성된 위젯, 컨테이너 및 컨트롤을 사용자에게 공개하여 사용자가 다양한 요구 사항에 맞게 위젯을 사용자 지정할 수 있도록 하세요.
이와 같이 UI 요소를 추상화하면 다른 사람이 코드를 재사용하고 사용자 정의하는 것이 훨씬 쉬워집니다. 구현은 shop.js를 참조하세요.
웹 페이지 또는 전체 웹 사이트의 상태 저장 및 복원을 단순화하려면 단일 상위 수준 상태 저장소를 사용하는 것이 가장 좋습니다.
이는 페이지의 모든 최상위 컨테이너에 동일한 데이터 필드를 제공하여 수행할 수 있습니다. 초기 마운트 호출을 통해
var data = {
state0 : 0 ,
state1 : 1 ,
}
El . mount ( '*' , { data : data } )일반 Riot 렌더링과 달리 el.js 렌더링 컨텍스트의 프로토타입 상속을 통해 this.parent 및 this.parent...parent 값에 대한 암시적 액세스를 허용합니다. 이는 오류가 발생하기 쉽고 지나치게 장황하기 때문에 중첩된 컨테이너를 통해 동일한 데이터를 반복적으로 전달하는 것을 피하기 위해 수행됩니다. 또한 이를 통해 컨테이너와 컨트롤을 더 쉽게 만들 수 있습니다.
데이터 변수를 명시적으로 전달:
< my-container-1 >
< my-container-2 data =' { data } ' >
< my-container-3 data =' { data } ' >
value: { data.value1 }
</ my-container-3 >
< my-container-3 data =' { data } ' >
value: { data.value2 }
</ my-container-3 >
</ my-container-2 >
< my-container-2 data =' { data } ' >
< my-container-3 data =' { data } ' >
value: { data.value3 }
</ my-container-3 >
< my-container-3 data =' { data } ' >
value: { data.value4 }
</ my-container-3 >
</ my-container-2 >
</ my-container-1 > // El.mount passes data to the top level container of each micro-app
El . mount ( '*' , data : { value1 : 1 , value2 : 2 , value3 : 3 , value4 : 4 } )데이터 변수를 암시적으로 참조하는 것과 동일합니다.
< my-container-1 >
< my-container-2 >
< my-container-3 >
value: { data.value1 }
</ my-container-3 >
< my-container-3 >
value: { data.value2 }
</ my-container-3 >
</ my-container-2 >
< my-container-2 >
< my-container-3 >
value: { data.value3 }
</ my-container-3 >
< my-container-3 >
value: { data.value4 }
</ my-container-3 >
</ my-container-2 >
</ my-container-1 > // El.mount passes data to the top level container of each micro-app
El . mount ( '*' , data : { value1 : 1 , value2 : 2 , value3 : 3 , value4 : 4 } ) BSD
