MaskJS
1.0.0
maskjs - マークアップです|テンプレート|モダンおよび高速Web（ブラウザ）、サーバー（ NodeJS ）、またはモバイル（ PhoneGap ）アプリケーション用のモジュラーHMVCエンジン。コンポーネントベースのアーキテクチャは、ゆるく結合された独立した要素の定義、実装、および構成を単一のアプリケーションに簡素化します。
リソース：
？ atma.js
？マスクフィドル
ウィキ
例
ツール
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.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があります。カスタムタグハンドラー、カスタム属性ハンドラー、モデルUTILをサポートしています。
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-alikeの構文を提供します。
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たり、そのコンストラクターに引数に注釈を付けたり、初期化に値を提供しない場合は、登録されたIOCコンテナを使用してMASKJSを使用します。
ライブラリは含まれていません。他の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
引数のtypaアノテーション：（ (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プロジェクト
