MaskJS
1.0.0
Maskjs - es un marcado | plantilla | Motor HMVC modular para aplicaciones Web ( navegador ), servidor ( NODEJS ) o móviles modernas y rápidas. La arquitectura basada en componentes simplifica definir, implementar y componer elementos independientes libremente acoplados en una sola aplicación.
Recursos:
? Atma.js
? Maskfiddle
Wiki
Ejemplos
Herramientas
1 marcado1.1 máscara1.2 html2 bibliotecas2.1 componentes2.2 ANIFICACIONES2.3 JMASK2.4 jQuery2.5 inyección de dependencia3 rendimiento4 nodejs5 soporte de navegador6 complementos7 Inicio rápido8 Contribuir8.1 construir8.2 Prueba9 Changelog1 marcado Apoyamos la sintaxis mask y html para escribir sus plantillas. E incluso puede mezclarlos dentro de una plantilla, ya que cada una de ellas tiene sus ventajas.
1.1 Sintaxis 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 sintaxis HTMLAquí no hay nada nuevo para ti. Vieja sintaxis HTML buena para definir las plantillas. Pero recomendamos mucho usar la sintaxis de la máscara, ya que las plantillas son más pequeñas, más limpias y con características adicionales.
< h4 > ~[name] </ h4 >
< Dialog >
< div > Hello Foo </ div >
</ Dialog > 1.3 html dentro de la máscaraIncluso puede usar bloques HTML en una sintaxis de máscara
ul {
< li > Foo
< li > Bar
}MaskJS tiene una API extremadamente extensible basada en interfaces y contratos. Admite manejadores de etiquetas personalizados , manejadores de atributos personalizados , utilizadores de modelos.
La construcción predeterminada de MaskJS contiene subyos:
CompoJS,Bindings,jMask.
2 Libias? Todos los paquetes ya están integrados en fuentes de MaskJS.
2.1 componentes? Leer más ... ↵
Núcleo del motor HMVC. Muestra de composición simple:
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 ANIFICACIONES ? Leer más ... ↵ IE9+
Maskjs en sí admite interpolaciones simples. Significa que solo se accede a los modelos mientras se renderizan, pero con esta característica puede definir enlaces simples o duales. Como MaskJS es un motor basado en DOM, las fijaciones son instantáneas.
Muestra de enlaces simples:
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? Leer más ... ↵
JMASK ofrece una sintaxis de jQuery para las manipulaciones dinámicas de Maskdom.
2.4 jQueryMaskjs se combina libremente con la biblioteca DOM, como jQuery-zepto-kimbo. Significa que no depende de ninguna biblioteca DOM, pero se recomienda usar una. Además hay algunas extensiones, como
$ . fn . appendMask
$ . fn . prependMask
$ . fn . beforeMask
$ . fn . afterMask
$ . fn . emptyAndDispose
$ . fn . removeAndDispose
//e.g.
$ ( '.foo' ) . appendMask ( 'h4 > "~[title]"' , { title : 'Hello' } ) ;Por lo tanto, nunca necesitaría usar el HTML.
2.5 inyección de dependencia? Leer más ... ↵
Puede anotar argumentos para define la declaración o para su constructor y si no proporciona los valores en la inicialización de Maskjs lo hará por usted utilizando un contenedor IOC registrado.
La biblioteca no se incluye, puede usar cualquier otra biblioteca DI. Maskjs solo requiere un contenedor IOC con un solo 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 rendimientoPrestamos atención al rendimiento, especialmente en la CPU móvil. El enfoque DOM Based y Shadow DOM es la forma más rápida de crear una estructura de componentes jerárquicos.
Algunos puntos de referencia:
4 nodo.jsMaskjs en el servidor
? Mask.node ↵ Server.lib ↵
server , client o both5 soporte de navegador6 complementosYa hay muchos complementos, componentes y utilidades útiles. Algunos de ellos valen la pena visitar:
7 Inicio rápidoLa mayoría de la muestra de MaskJS más simple para mostrar de dónde podría comenzar:
<!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 Contribuir8.1 construir $ git submodule init && git submodule update
$ npm install
$ npm run build8.2 Prueba $ npm install
$ npm test9 Changelog ? Ver Lista completa ... ↵ @latest
0.64.0
Propiedades
div [style .backgroundColor ] = 'red'; @latest
0.60.0
Esperar declaraciones, componentes y también 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 y nodos
[ IsAuthorized ]
div > ' Hello ~ user '
[ LogCall ]
function doSmth () {
// ...
} Async y métodos privados. Para los navegadores que aún no admiten la función async/await ES2017, utilice el complemento postmask-babel .
slot private async upload () {
await MyService . doSmth ();
} 0.57.13
Módulos
Enrutamiento del espacio de nombres
import FooService from services;
h4 > ' ~ FooService.doSmth () ' También puede configurar la ruta base para el enrutamiento, por ejemplo mask.Module.cfg('baseNs', '/src/')
Si el módulo no está cargado o no se establece en el repositorio del espacio de nombres, lo cargaremos por la ruta resuelta, por ejemplo
'/src/services/FooService.js'
Enrutamiento de prefijo
import MyButton from ' @controls/MyButton ' ;
MyButton x-tap = ' clicked ' ;Primero debe configurar el prefijo, por ejemplo:
mask . Module . cfg ( 'prefixes.controls' , '/src/controls/{0}/{1}.mask' ) ; 0.57.0
Anotaciones 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
Alcance de la función: importaciones y 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 '
} Las importaciones sync , ya que la carga de importación para un mejor rendimiento es paralelo, pero los paquetes deben cargarse en sincronización, ya que registran todos los recursos en ese momento.
import sync from ' ./MyComponentsBundle ' ;
import FooCompo from ' ./Foo ' ;
// ... 0.55.1
0.55.0
Importaciones de Async.
import async Foo from ' ./Foo.mask ' ;
h4 > ' MyHeader '
await Foo ; El encabezado h4 se representa durante el Foo aún puede cargarse.
define y let apoyar argumentos
define Foo (user) {
h4 > ' ~ user.name '
}
Foo ( me ) ; mask . render ( template , { me : { name : 'TestUser' } } ) ;© ️ MIT - 2021 ATMA.JS Proyecto
