MaskJS
1.0.0
MASKJS - 마크 업입니다 | 템플릿 | 최신 및 빠른 웹 ( 브라우저 ), 서버 ( Nodejs ) 또는 모바일 ( PhoneGap ) 애플리케이션 용 모듈 식 HMVC 엔진. 구성 요소 기반 아키텍처는 느슨하게 결합 된 독립적 인 요소를 단일 애플리케이션으로 정의, 구현 및 구성하는 것을 단순화합니다.
자원:
? atma.js
? Maskfiddle
위키
예
도구
1 마크 업1.1 마스크1.2 HTML2 라이브러리2.1 구성 요소2.2 바인딩2.3 Jmask2.4 jQuery2.5 종속성 주입3 성능4 nodejs5 브라우저 지원6 플러그인7 빠른 시작8 기여8.1 빌드8.2 테스트9 Changelog1 마크 업 우리는 템플릿을 작성하기위한 mask 및 html 구문을 지원합니다. 그리고 각각의 장점이 있기 때문에 하나의 템플릿 내에서 혼합 할 수도 있습니다.
1.1 마스크 구문[Template → Mask AST → Shadow DOM → Live DOM][Template → Mask AST → HTML] import CustomComponent from ' Foo.mask '
.container {
h4 > ' Title '
section .content {
span > ' Hello ~ name ! '
if ( admins . includes (name) ) {
em > ' Admin '
}
}
CustomComponent {
button x-tap = ' changeName ' >
' ~[ bind: name ] '
for ( tag of tags ) {
h4 > ' ~ tag.title '
}
}
}1.2 HTML 구문여기에 새로운 것이 없습니다. 템플릿을 정의하기 위해 오래된 좋은 HTML 구문. 그러나 템플릿이 더 작고 깨끗하고 추가 기능을 갖추기 때문에 마스크 구문을 사용하는 것이 좋습니다.
< h4 > ~[name] </ h4 >
< Dialog >
< div > Hello Foo </ div >
</ Dialog > 1.3 HTML마스크 구문에서 HTML 블록을 사용할 수도 있습니다.
ul {
< li > Foo
< li > Bar
}MaskJS에는 인터페이스 및 계약을 기반으로 매우 확장 가능한 API가 있습니다. 사용자 정의 태그 처리기, 사용자 정의 속성 처리기, 모델 Utils를 지원합니다.
Maskjs 기본 빌드에는
CompoJS,Bindings,jMask하위 프로젝트가 포함됩니다.
2 리바리? 모든 패키지는 이미 MaskJS 소스에 포함되어 있습니다.
2.1 구성 요소? 더 읽기 ... ↵
HMVC 엔진의 핵심. 간단한 컴포 샘플 :
export class CustomComponentCtr {
// slots example
@ mask . deco . slot ( )
onRefreshDate ( ) {
this . model . date = new Date ( ) ;
}
@ mask . deco . slot ( )
domInsert ( ) {
alert ( this . $ . innerWidth ( ) ) ;
}
// events example
@ mask . deco . event ( 'click: button' )
onButtonClicked ( ) {
alert ( this . model . date ) ;
}
onRenderStart ( model , ctx ) {
// override model
this . model = { date : new Date ( ) ; }
}
onRenderEnd: function ( elements , model , ctx ) {
this . $ // is a domLibrary (jQuery-lite, jQuery/Zepto/Kimbo) wrapper over `elements`
}
dispose ( ) {
// do some cleanup
}
} ; import ' ./CustomComponent.less '
import CustomComponentCtr from ' ./CustomComponentCtr.ts '
define CustomComponent extends CustomComponentCtr {
h1 {
' Date ~[ bind: _ . formatDate (date) ] '
}
button .btn x-tap = ' onRefreshDate ' {
i .material-icons > ' update '
' Refresh '
}
}2.2 바인딩 ? 더 읽기 ... ↵ IE9+
MaskJS 자체는 간단한 보간을 지원합니다. 이는 모델이 렌더링하는 동안에 만 액세스되지만이 기능을 사용하면 단일 또는 듀얼 바인딩을 정의 할 수 있습니다. MaskJS는 DOM 기반 엔진이므로 바인딩은 즉각적입니다.
간단한 바인딩 샘플 :
h4 > ' ~[ bind: fooDate . getSeconds () * barAge ] '
input type = date >
dualbind value = ' fooDate ' ;
input type = number >
dualbind value = ' barAge ' ;
/*
* `dualbind` component also supports much more properties and configurations
*/2.3 Jmask? 더 읽기 ... ↵
Jmask는 동적 마스크 조작을위한 jQuery-allike 구문을 제공합니다.
2.4 jQueryMaskJS는 jQuery-Zepto-Kimbo와 같은 DOM 라이브러리와 느슨하게 결합됩니다. 그것은 DOM 라이브러리에 의존하지 않지만 하나를 사용하는 것이 좋습니다. 또한 몇 가지 확장 기능이 있습니다
$ . fn . appendMask
$ . fn . prependMask
$ . fn . beforeMask
$ . fn . afterMask
$ . fn . emptyAndDispose
$ . fn . removeAndDispose
//e.g.
$ ( '.foo' ) . appendMask ( 'h4 > "~[title]"' , { title : 'Hello' } ) ;따라서 HTML을 사용할 필요가 없습니다.
2.5 종속성 주입? 더 읽기 ... ↵
선언 define 또는 생성자에 대한 인수를 주석을 달 수 있으며 초기화 값을 제공하지 않으면 Maskjs가 등록 된 IOC 컨테이너를 사용하여 수행합니다.
라이브러리에는 포함되지 않으며 다른 DI 라이브러리를 사용할 수 있습니다. Maskjs는 단일 방법을 가진 IOC 컨테이너 만 필요합니다. .resolve(Type):Any .
import * as IStore from services;
define UserList (store: IStore) {
foreach ( user of store . getUsers () ) {
div > ' ~ user.username '
}
// or in constructor
function constructor ( store : IStore ) {
this . store = store;
}
}3 성능우리는 특히 모바일 CPU에서 성능에주의를 기울입니다. DOM 기반과 그림자 DOM 접근법은 계층 적 구성 요소 구조를 만드는 가장 빠른 방법입니다.
일부 벤치 마크 :
4 node.js서버에서 maskjs
? Mask.Node ↵ Server.lib ↵
server , client 또는 both5 브라우저 지원6 플러그인이미 많은 플러그인, 구성 요소 및 유용한 유틸리티가 있습니다. 그들 중 일부는 확인할 가치가 있습니다.
7 빠른 시작가장 간단한 Maskjs 샘플은 어디서부터 시작할 수 있는지 보여줍니다.
<!DOCTYPE html >
< html >
< body >
< script type =' text/mask ' data-run =' auto ' >
import Counter from './Counter' ;
h4 > 'Counter with 1 second step'
Counter x - interval = 1 ;
h4 > 'Counter with 5 seconds step'
Counter x - interval = 5 ;
</ script >
< script src =' https://unpkg.com/maskjs ' > </ script >
</ body >
</ html > // Create the file `Counter.mask`
define Counter {
var meta = {
attributes : {
' x-interval ' : ' number '
}
};
var scope = {
counter : 0 ,
timer : null
};
slot domInsert () {
this . scope . timer = setTimeout (() => {
++ this . scope . counter ;
}, this . xInterval )
}
function dispose () {
clearTimeout ( this . scope . timer );
}
div > ' ~[ bind: this . scope . counter ]
}8 기여8.1 빌드 $ git submodule init && git submodule update
$ npm install
$ npm run build8.2 테스트 $ npm install
$ npm test9 Changelog ? 전체 목록보기 ... 소리 @latest
0.64.0
속성
div [style .backgroundColor ] = 'red'; @latest
0.60.0
진술, 구성 요소 및 모듈을 기다리고 있습니다
define Foo {
function async onRenderStart () {
this . model = await LoadUserExample ();
}
h4 > ' ~ userName '
}
// Component
await Foo {
@progress > i > ' Loading user ' ;
}
// Promises
await ( this . getCurrentUser () ) {
@progress > i > ' Loading user ' ;
@done ( user ) {
h4 > ' ~ user.userName '
}
@fail ( error ) {
.danger > ' ~ error.message '
}
}
// Modules
import async Foo from ' ./Foo ' ;
heading > ' Some heading '
await Foo {
@progress > ' Loading and initilizing the module '
} 0.58.0
방법과 노드를위한 데코레이터
[ IsAuthorized ]
div > ' Hello ~ user '
[ LogCall ]
function doSmth () {
// ...
} 비동기 및 개인 방법. 아직 async/await ES2017 기능을 지원하지 않는 브라우저의 경우 postmask-babel 플러그인을 사용하십시오.
slot private async upload () {
await MyService . doSmth ();
} 0.57.13
모듈
네임 스페이스 라우팅
import FooService from services;
h4 > ' ~ FooService.doSmth () ' 또한 라우팅의 기본 경로 (예 : mask.Module.cfg('baseNs', '/src/')
모듈이로드되지 않았거나 네임 스페이스 리포지토리에 설정되지 않은 경우, 우리는 해결 된 경로 (예 :
'/src/services/FooService.js'로 당신을 위해로드합니다.
접두사 라우팅
import MyButton from ' @controls/MyButton ' ;
MyButton x-tap = ' clicked ' ;먼저 접두사를 구성해야합니다.
mask . Module . cfg ( 'prefixes.controls' , '/src/controls/{0}/{1}.mask' ) ; 0.57.0
인수에 대한 오타 주석 : (argumentName: argumentType, ...)
import * as IFoo from ' /service/IFoo.js ' ;
import * as IBar from ' /service/IBar.js ' ;
define MyCompo (foo: IFoo) {
function constructor ( bar : IBar ) {
this . bar = bar;
}
span > `~[foo .someMethod ()]`
} 0.56.5
기능 범위 : 인수 가져 오기 및 정의
import * as Service from ' /services/UserService.js ' ;
define UserEditor (user) {
slot save () {
Service
. changeUserName ( user . id , user . name )
. then (() => console . log ( ' saved! ' ));
}
input > dualbind value = ' user.name ' ;
button x-tap = save > ' Save '
} 더 나은 성능을위한 가져 오기 sync 이 평행하지만 묶음은 모든 리소스를 등록하므로 번들을 동기화해야합니다.
import sync from ' ./MyComponentsBundle ' ;
import FooCompo from ' ./Foo ' ;
// ... 0.55.1
0.55.0
비동기 수입.
import async Foo from ' ./Foo.mask ' ;
h4 > ' MyHeader '
await Foo ; h4 헤더는 Foo 여전히로드 될 수있는 동안 렌더링됩니다.
논쟁을 define 하고 let
define Foo (user) {
h4 > ' ~ user.name '
}
Foo ( me ) ; mask . render ( template , { me : { name : 'TestUser' } } ) ;© ️ MIT -2021 ATMA.JS 프로젝트
