MaskJS

---

maskjs - เป็นมาร์กอัป | เทมเพลต | เอ็นจิ้น HMVC แบบแยกส่วนสำหรับเว็บที่ทันสมัยและรวดเร็ว ( เบราว์เซอร์ ), เซิร์ฟเวอร์ ( NodeJS ) หรือแอพพลิเคชั่นมือถือ ( PhoneGap ) สถาปัตยกรรมที่ใช้ส่วนประกอบช่วยให้การกำหนดใช้งานและเขียนองค์ประกอบอิสระคู่กันอย่างหลวม ๆ ลงในแอปพลิเคชันเดียว

ทรัพยากร:

• - atma.js

• - หน้ากาก

• วิกิ

• ตัวอย่าง

  • - ตัวอย่าง
  • - แอป todomvc

• เครื่องมือ

  • - ปลั๊กอินดีบั๊ก Chrome
  • - แพ็คเกจประเสริฐ
  • - แพ็คเกจอะตอม

---

• 1 มาร์กอัป
  • หน้ากาก 1.1
  • 1.2 HTML
• 2 ห้องสมุด
  • 2.1 ส่วนประกอบ
  • 2.2 การผูก
  • 2.3 jmask
  • 2.4 jQuery
  • 2.5 การฉีดขึ้นอยู่กับการพึ่งพา
• 3 ประสิทธิภาพ
• 4 nodejs
• 5 รองรับเบราว์เซอร์
• 6 ปลั๊กอิน
• 7 เริ่มต้นอย่างรวดเร็ว
• 8 บริจาค
  • 8.1 สร้าง
  • 8.2 การทดสอบ
• 9 Changelog

---

1 มาร์กอัป

เราสนับสนุน mask และ html ไวยากรณ์สำหรับการเขียนเทมเพลตของคุณ และคุณสามารถผสมมันภายในเทมเพลตเดียวเนื่องจากแต่ละอันมีข้อดี

1.1 หน้ากากไวยากรณ์

• ส่วนประกอบและมาร์กอัปตามองค์ประกอบ
• งบนิพจน์การแก้ไข
• ผลงาน. ไม่จำเป็นต้องมีการตรวจสอบล่วงหน้า
• ขนาดเล็ก ~ 30% เล็กกว่า HTML เพิ่มเติมมีเครื่องมือ minification - Optimizer
• 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 ไวยากรณ์ HTML

นี่คืออะไรใหม่สำหรับคุณ ไวยากรณ์ HTML ที่ดีเก่าเพื่อกำหนดเทมเพลต แต่เราขอแนะนำให้ใช้ไวยากรณ์หน้ากากอย่างมากเนื่องจากเทมเพลตมีขนาดเล็กกว่าสะอาดกว่าและมีคุณสมบัติเพิ่มเติม

 < h4 > ~[name] </ h4 >
< Dialog >
    < div > Hello Foo </ div >
</ Dialog > 

1.3 HTML ภายในหน้ากาก

คุณยังสามารถใช้บล็อก HTML ในไวยากรณ์หน้ากาก

 ul {
    < li > Foo
    < li > Bar
}

MASKJS มี API ที่ขยายได้อย่างมากตามอินเตอร์เฟสและสัญญา รองรับตัวจัดการ แท็กที่กำหนดเอง ตัวจัดการ แอตทริบิวต์ ที่กำหนดเอง

MASKJS Build เริ่มต้นมีโครงการย่อย: CompoJS , Bindings , jMask

2 libaries

- แพ็คเกจทั้งหมดถูกฝังอยู่ในแหล่ง MASKJS แล้ว

2.1 ส่วนประกอบ

- อ่านเพิ่มเติม ... ↵

แกนกลางของเครื่องยนต์ HMVC ตัวอย่าง Compo ง่าย ๆ :

 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+

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 jQuery

Maskjs นั้นมีอยู่อย่างหลวม ๆ กับห้องสมุด 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 การประกาศหรือสำหรับตัวสร้างและหากคุณไม่ได้ให้ค่าในการเริ่มต้น maskjs จะทำเพื่อคุณโดยใช้คอนเทนเนอร์ 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 เป็นวิธีที่เร็วที่สุดในการสร้างโครงสร้างองค์ประกอบแบบลำดับชั้น

มาตรฐานบางอย่าง:

• MASK VS เครื่องยนต์เทมเพลต HTML RAW -: JSPERF
• Mask vs Angular -: JSPerf
• maskdom ast vs json parse -: jsperf
• หน้ากากมาร์กอัปกับ HTML -: JSPERF
• Expressions Mask Vs Eval -: JSPERF

4 node.js

maskjs บนเซิร์ฟเวอร์

- mask.node ↵ Server.lib ↵

• ประโยชน์ HMVC
• แบบจำลองการทำให้เป็นอนุกรม/การลดระดับ
• ส่วนประกอบโหมดเรนเดอร์ - server client หรือ both
• HTML แสดงผลที่แสดงพร้อมกับ bootstrapping เพิ่มเติมบนไคลเอนต์เพื่อให้ส่วนประกอบเริ่มต้นเหตุการณ์และการผูกทั้งหมดจะถูกแนบ
• แอปพลิเคชันเริ่มต้นประสิทธิภาพ: เบราว์เซอร์ได้รับ HTML พร้อมสำหรับการแสดงผล
• SEO

5 รองรับเบราว์เซอร์

• IE7+

6 ปลั๊กอิน

มีปลั๊กอินส่วนประกอบและยูทิลิตี้ที่มีประโยชน์มากมายอยู่แล้ว บางคนคุ้มค่าที่จะตรวจสอบ:

• formatter util
• การแปลเป็นภาษาท้องถิ่น
• ภาพเคลื่อนไหว
• ส่วนประกอบ

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 build

8.2 การทดสอบ

$ npm install
$ npm test

9 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 และวิธีการส่วนตัว สำหรับเบราว์เซอร์ที่ยังไม่รองรับคุณสมบัติ 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

  • มาร์กอัป HTML ภายในเทมเพลตหน้ากาก

• 0.55.0

  • async นำเข้า

     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 Project