Beranda>Terkait pemrograman>Komponen pihak ketiga
Unduh

Maskjs - adalah markup | Template | Mesin HMVC modular untuk aplikasi modern dan cepat ( browser ), server ( nodeJS ) atau seluler ( phoneGap ). Arsitektur berbasis komponen menyederhanakan mendefinisikan, menerapkan, dan menyusun elemen independen yang digabungkan secara longgar ke dalam satu aplikasi.

Sumber daya:

  • ? Atma.js

  • ? Maskfiddle

  • Wiki

  • Contoh

    • ? Sampel
    • ? Aplikasi TODOMVC

  • Peralatan

    • ? Plugin Debug Chrome
    • ? Paket Sublim
    • ? Paket Atom
☰
  • 1 markup
    • 1.1 Topeng
    • 1.2 html
  • 2 perpustakaan
    • 2.1 Komponen
    • 2.2 Binding
    • 2.3 JMASK
    • 2.4 jQuery
    • 2.5 Injeksi ketergantungan
  • 3 kinerja
  • 4 NodeJs
  • 5 Dukungan Browser
  • 6 plugin
  • 7 Mulai Cepat
  • 8 berkontribusi
    • 8.1 Build
    • 8.2 Tes
  • 9 Changelog

1 markup

Kami mendukung sintaks mask dan html untuk menulis templat Anda. Dan Anda bahkan dapat mencampurnya dalam satu templat, karena masing -masing dari mereka memiliki kelebihan.

1.1 Sintaks Topeng
  • Komponen dan markup berbasis elemen
  • Pernyataan, Ekspresi, Interpolasi
  • Pertunjukan. Tidak ada kompilasi yang dibutuhkan
  • Ukuran kecil. ~ 30% lebih kecil dari HTML Addscementasi, ada alat minifikasi - pengoptimal.
  • Dom Builder [Template → Mask AST → Shadow DOM → Live DOM]
  • HTML Builder ( NODEJS ) [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 Sintaks HTML

Ini bukan hal baru untuk Anda. Sintaks HTML tua yang baik untuk menentukan templat. Tapi kami sangat menganjurkan untuk menggunakan sintaks topeng, karena templatnya lebih kecil, lebih bersih dan dengan fitur tambahan. 

 < h4 > ~[name] </ h4 >
< Dialog >
    < div > Hello Foo </ div >
</ Dialog >
1.3 html dalam topeng

Anda bahkan dapat menggunakan blok html dalam sintaks mask 

 ul {
    < li > Foo
    < li > Bar
}

MaskJs memiliki API yang sangat dapat diperpanjang berdasarkan antarmuka dan kontrak. Ini mendukung penangan tag khusus , penangan atribut khusus , util model.

MASKJS Default Build berisi sub proyek: CompoJS , Bindings , jMask .

2 libaries

? Semua paket sudah tertanam ke dalam sumber maskjs.

2.1 Komponen

? Baca lebih lanjut ... ↵

Inti dari mesin HMVC. Sampel Compo Sederhana: 

 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 Binding

? Baca lebih lanjut ... ↵ IE9+

Maskjs sendiri mendukung interpolasi sederhana. Ini berarti model hanya diakses saat render, tetapi dengan fitur ini Anda dapat mendefinisikan binding tunggal atau ganda. Karena maskjs adalah mesin berbasis DOM, bindingnya instan.

Sampel Binding Sederhana: 

 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

? Baca lebih lanjut ... ↵

JMASK menawarkan sintaksis yang sama jQuery untuk manipulasi maskdom dinamis.

2.4 jQuery

Maskjs secara longgar digabungkan dengan perpustakaan DOM, seperti jQuery-zepto-Kimbo. Artinya, tidak tergantung pada pustaka DOM apa pun, tetapi sangat disarankan untuk menggunakannya. Selain itu ada beberapa ekstensi, seperti 

 $ . fn . appendMask
$ . fn . prependMask
$ . fn . beforeMask
$ . fn . afterMask
$ . fn . emptyAndDispose
$ . fn . removeAndDispose
//e.g.
$ ( '.foo' ) . appendMask ( 'h4 > "~[title]"' , { title : 'Hello' } ) ;

Jadi Anda tidak perlu menggunakan HTML.

2.5 Injeksi ketergantungan

? Baca lebih lanjut ... ↵

Anda dapat memberi anotasi argumen untuk define deklarasi atau untuk konstruktornya dan jika Anda tidak memberikan nilai pada inisialisasi maskjs akan melakukannya untuk Anda menggunakan wadah IOC terdaftar.

Perpustakaan tidak termasuk, Anda dapat menggunakan perpustakaan DI lainnya. MaskJs hanya membutuhkan wadah IOC dengan metode tunggal: .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 kinerja

Kami benar -benar memperhatikan kinerja, terutama pada CPU seluler. Pendekatan berbasis DOM dan Shadow DOM adalah cara tercepat untuk membuat struktur komponen hierarkis.

Beberapa tolok ukur:

  • Mesin Template HTML Topeng vs Raw -: JSPERF
  • Topeng vs Angular -: JSPERF
  • Maskdom Ast vs Json Parse -: JSperf
  • Markup Mask vs HTML -: JSPERF
  • Ekspresi topeng vs eval -: jsperf

4 node.js

Maskjs di server

? Mask.node ↵ server.lib ↵

  • Manfaat HMVC
  • Model serialisasi/de-serialisasi
  • Komponen Mode Render - server , client atau both
  • HTML yang diberikan output dengan bootstrap lebih lanjut pada klien, sehingga komponen diinisialisasi, semua peristiwa dan binding terpasang
  • Kinerja Mulai Aplikasi: Browser menerima HTML siap untuk rendering.
  • Seo

5 Dukungan Browser

  • IE7+

6 plugin

Sudah ada banyak plugin, komponen, dan utilitas yang bermanfaat. Beberapa dari mereka layak untuk dicoba:

  • Formatter util
  • Lokalisasi
  • Animasi
  • Komponen

7 Mulai Cepat

Sampel paling sederhana untuk menunjukkan dari mana Anda bisa mulai dari: 

 <!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 berkontribusi

8.1 Build 

$ git submodule init && git submodule update
$ npm install
$ npm run build

8.2 Tes 

$ npm install
$ npm test

9 Changelog

? Lihat daftar lengkap ... ↵ @latest

  • 0.64.0

  • Properti 

     div [style .backgroundColor ] = 'red';

@latest

  • 0.60.0

  • Menunggu pernyataan, komponen, dan juga modul 

     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

  • Dekorator untuk metode dan node 

     [ IsAuthorized ]
div > ' Hello ~ user '

[ LogCall ]
function doSmth () {
    // ...
}

  • Metode async dan pribadi. Untuk browser yang belum mendukung fitur async/await ES2017, silakan gunakan plugin postmask-babel . 

     slot private async upload () {
    await MyService . doSmth ();
}

  • 0.57.13

  • Modul

    • Routing namespace 

       import FooService from services;

h4 > ' ~ FooService.doSmth () '

      Anda juga dapat mengonfigurasi jalur dasar untuk perutean, misalnya mask.Module.cfg('baseNs', '/src/')

      Jika modul tidak dimuat atau tidak diatur ke repositori namespace, kami akan memuatnya untuk Anda dengan jalur yang diselesaikan, misalnya '/src/services/FooService.js'

    • Routing awalan 

       import MyButton from ' @controls/MyButton ' ;
MyButton x-tap = ' clicked ' ;

      Anda harus mengkonfigurasi awalan terlebih dahulu, misalnya: 

       mask . Module . cfg ( 'prefixes.controls' , '/src/controls/{0}/{1}.mask' ) ;

  • 0.57.0

  • Anotasi Tipa untuk Argumen: (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

  • Fungsi Lingkup: Impor dan Tentukan Argumen 

     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 impor, karena pemuatan impor untuk kinerja yang lebih baik adalah paralel, tetapi bundel harus dimuat secara sinkron, karena mereka mendaftarkan semua sumber daya saat itu. 

 import sync from ' ./MyComponentsBundle ' ;
import FooCompo from ' ./Foo ' ;
// ...

  • 0.55.1

    • Markup html dalam template topeng

  • 0.55.0

    • Impor async. 

       import async Foo from ' ./Foo.mask ' ;
h4 > ' MyHeader '
await Foo ;

      Header h4 diberikan selama Foo mungkin masih dimuat.

    • define dan let argumen dukungan 

       define Foo (user) {
    h4 > ' ~ user.name '
}

Foo ( me ) ;
       mask . render ( template , { me : { name : 'TestUser' } } ) ;

© ️ MIT - 2021 ATMA.JS Project

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua