MaskJS
1.0.0
maskjs - 是标记|模板|用于现代和快速Web（浏览器），服务器（ NODEJS ）或移动设备（ PhoneGap ）应用程序的模块化HMVC引擎。基于组件的体系结构简化了定义，实现和构成松散的独立元素到一个应用程序中。
资源：
？ atma.js
？ maskFiddle
Wiki
例子
工具
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 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的语法。
2.4 jQueryMaskJS与DOM库相结合，例如JQuery-Zepto-Kimbo。这意味着它不取决于任何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声明或其构造函数的参数，如果您不提供初始化的值，则使用已注册的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完整列表....... @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 ;在Foo期间， h4标头可能仍在加载。
define并let支持参数
define Foo (user) {
h4 > ' ~ user.name '
}
Foo ( me ) ; mask . render ( template , { me : { name : 'TestUser' } } ) ;©️麻省理工学院-2021 ATMA.JS项目
