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項目
