MaskJS
1.0.0
MaskJs - é uma marcação | modelo | Motor HMVC modular para aplicativos modernos e rápidos da Web ( navegador ), servidor ( NodeJS ) ou móveis ( PhoneGAP ). A arquitetura baseada em componentes simplifica a definição, a implementação e a composição de elementos independentes pouco acoplados em um único aplicativo.
Recursos:
? Atma.js
? Maskfiddle
Wiki
Exemplos
Ferramentas
1 marcação1.1 máscara1.2 HTML2 bibliotecas2.1 componentes2.2 Ligações2.3 JMASK2.4 JQuery2.5 Injeção de dependência3 desempenho4 nodejs5 Suporte ao navegador6 plugins7 Início rápido8 Contribua8.1 Build8.2 Teste9 Changelog1 marcação Apoiamos mask e a sintaxe html para escrever seus modelos. E você pode até misturá -los em um modelo, pois cada um deles tem suas vantagens.
1.1 Sintaxe de máscara[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 Sintaxe HTMLAqui não há nada de novo para você. A velha sintaxe HTML para definir os modelos. Mas muito incentivamos a usar a sintaxe da máscara, pois os modelos são menores, mais limpos e com recursos adicionais.
< h4 > ~[name] </ h4 >
< Dialog >
< div > Hello Foo </ div >
</ Dialog > 1.3 HTML dentro da máscaraVocê pode até usar blocos HTML em uma sintaxe de máscara
ul {
< li > Foo
< li > Bar
}MaskJs possui API extremamente extensível com base em interfaces e contratos. Ele suporta manipuladores de tags personalizados , manipuladores de atributos personalizados , utilitários de modelos.
A compilação padrão do MaskJS contém subestrutura:
CompoJS,Bindings,jMask.
2 Libaries? Todos os pacotes já estão incorporados às fontes do MaskJs.
2.1 componentes? Leia mais ... ↵
Núcleo do motor HMVC. Amostra simples de composição:
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 Ligações ? Leia mais ... ↵ IE9+
O próprio MaskJS suporta interpolações simples. Isso significa que os modelos são acessados apenas durante a renderização, mas com esse recurso você pode definir ligações únicas ou duplas. Como o MaskJS é um mecanismo baseado em DOM, as ligações são instantâneas.
Amostra simples de encadernas:
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? Leia mais ... ↵
O JMask oferece sintaxe de jQuery para as manipulações dinâmicas de máscara.
2.4 JQueryMaskJs é vagamente acoplado à biblioteca DOM, como JQuery-Zepto-Kimbo. Isso significa que não depende de nenhuma biblioteca DOM, mas é altamente recomendável usar uma. Além disso, existem algumas extensões, como
$ . fn . appendMask
$ . fn . prependMask
$ . fn . beforeMask
$ . fn . afterMask
$ . fn . emptyAndDispose
$ . fn . removeAndDispose
//e.g.
$ ( '.foo' ) . appendMask ( 'h4 > "~[title]"' , { title : 'Hello' } ) ;Então você nunca precisaria usar o HTML.
2.5 Injeção de dependência? Leia mais ... ↵
Você pode anotar argumentos para define a declaração ou para o seu construtor e se você não fornecer os valores na inicialização que as MaskJs o farão por você usando o contêiner IOC registrado.
A biblioteca não está incluída, você pode usar qualquer outra biblioteca de DI. MaskJs requer apenas um contêiner do IOC com um único método: .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 desempenhoPrestamos completamente a atenção ao desempenho, especialmente na CPU móvel. A abordagem baseada em DOM e a sombra DOM é a maneira mais rápida de criar uma estrutura de componentes hierárquicos.
Alguns benchmarks:
4 node.jsMaskJs no servidor
? Mask.Node ↵ Server.lib ↵
server , client ou both5 Suporte ao navegador6 pluginsJá existem muitos plugins, componentes e utilitários úteis. Alguns deles valem a pena verificar:
7 Início rápidoA amostra mais simples do MaskJs para mostrar de onde você poderia começar:
<!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 Contribua8.1 Build $ git submodule init && git submodule update
$ npm install
$ npm run build8.2 Teste $ npm install
$ npm test9 Changelog ? Ver Lista Completa ... ↵ @latest
0.64.0
Propriedades
div [style .backgroundColor ] = 'red'; @latest
0.60.0
Aguarde declarações, componentes e também módulos
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
Decoradores para métodos e nós
[ IsAuthorized ]
div > ' Hello ~ user '
[ LogCall ]
function doSmth () {
// ...
} Métodos assíncronos e privados. Para os navegadores que ainda não suportam o recurso async/await ES2017, use o plugin postmask-babel .
slot private async upload () {
await MyService . doSmth ();
} 0.57.13
Módulos
Roteamento de namespace
import FooService from services;
h4 > ' ~ FooService.doSmth () ' Você também pode configurar o caminho base para o roteamento, por exemplo mask.Module.cfg('baseNs', '/src/')
Se o módulo não for carregado ou não for definido para o repositório de namespace, o carregaremos para você pelo caminho resolvido, por exemplo,
'/src/services/FooService.js'
Roteamento de prefixo
import MyButton from ' @controls/MyButton ' ;
MyButton x-tap = ' clicked ' ;Você precisa configurar o prefixo primeiro, por exemplo:
mask . Module . cfg ( 'prefixes.controls' , '/src/controls/{0}/{1}.mask' ) ; 0.57.0
Anotações de Typa para argumentos: (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
Escopo de função: importações e definir argumentos
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 '
} As importações sync , pois o carregamento de importação para melhor desempenho é paralelo, mas os pacotes devem ser carregados em sincronia, pois registram todos os recursos.
import sync from ' ./MyComponentsBundle ' ;
import FooCompo from ' ./Foo ' ;
// ... 0.55.1
0.55.0
Importações assíncronas.
import async Foo from ' ./Foo.mask ' ;
h4 > ' MyHeader '
await Foo ; O cabeçalho h4 é renderizado durante o Foo ainda pode ser carregado.
define e let apoiar argumentos
define Foo (user) {
h4 > ' ~ user.name '
}
Foo ( me ) ; mask . render ( template , { me : { name : 'TestUser' } } ) ;© ️ MIT - 2021 ATMA.JS Project
