xmo下載 - xmo原始碼下載

xmo.js

Extensible Meta Objects (xmo.js) 是一個用於建立 JS 類別和 mixin 的輕量級類別庫。

官方儲存庫 (jsstuff/xmo)
公共領域 (https://unlicense.org)

介紹

xmo.js是一個輕量級的 javascript 函式庫，用於建立 JS 類別和 mixin。與許多其他試圖解決相同問題的程式庫不同， xmo.js被設計為可擴展的，並且僅提供創建新類別或 mixin 的機制，並可以註冊使用者定義的擴充功能和 init 處理程序。

有許多 UI 工具包和 JS 框架提供某種類別子系統，為傳統的 javascript 類別添加屬性、事件和其他功能。這種方法使類別子系統依賴框架，並使其在框架之外無法使用。

xmo.js使用的方法有所不同。它允許註冊初始化處理程序和類別本身的擴展，因此繼承它的任何類別都將提供與基底類別相同的功能。這意味著許多現有的類別框架理論上可以在xmo.js本身之上實現。

那麼要如何創建一個 JavaScript 類別呢？只需導入xmo庫（或者如果您在客戶端工作，則包含它）並使用xmo作為創建您自己的類別的函數。此函數僅接受一個參數def ，該參數用於定義成員、靜態屬性、初始化處理程序和擴充；它將傳回一個新的Class對象，可以透過new關鍵字實例化。一個簡單的例子如下：

 // Create a new class `Class` that doesn't inherit from any object. It
// inherits internally from a pure JavaScript `Object`, which most JS objects
// do. A `constructor` property defines the constructor and other properties
// define class members (that will be added to the prototype object).
const Class = xmo ( {
  constructor ( ) {
    this . text = "Hi!"
  } ,

  toString ( ) {
    return this . text ;
  }
} ) ;

constructor屬性定義類別建構函數，其他屬性定義類別成員。可以簡單地使用new運算子來實例化Class ，如以下範例所示：

 // Create an instance of `Class` defined in previous example.
const instance = new Class ( ) ;

// `instance` is now an instance of `Class`, we can check if the inheritance
// is working as expected by calling `toString` method, which should return
// "Hi!". Another expected behavior is using `instanceof` keyword which should
// return `true` if tested against `Class`.
console . log ( instance . toString ( ) ) ;        // Outputs `Hi!`.
console . log ( instance instanceof Class ) ;  // Outputs `true`.
console . log ( instance instanceof Object ) ; // Outputs `true`.

遺產

基類可以透過$extend屬性指定：

 // `Point` is a base class.
const Point = xmo ( {
  constructor ( x , y ) {
    this . x = x ;
    this . y = y ;
  } ,

  translate ( x , y ) {
    this . x += x ;
    this . y += y ;
  } ,

  toString ( ) {
    return `Point { x: ${ this . x } , y: ${ this . y } }` ;
  }
} ) ;

// `Circle` extends `Point`.
const Circle = xmo ( {
  $extend : Point ,

  constructor ( x , y , radius ) {
    // Has to call superclass constructor.
    Point . call ( this , x , y ) ;
    this . radius = radius ;
  } ,

  // Overrides `toString` of `Point`.
  toString ( ) {
    return `Circle { x: ${ this . x } , y: ${ this . y } , radius: ${ this . radius } }`
  }
} ) ;

// Create instances of `Point` and `Circle` classes.
const point = new Point ( 1 , 1 ) ;
const circle = new Circle ( 10 , 10 , 5 ) ;

console . log ( point . toString ( ) ) ;         // Outputs `Point { x: 1, y: 1 }`.
console . log ( circle . toString ( ) ) ;        // Outputs `Circle { x: 10, y: 10, radius: 5 }`.

// `point` is an instance of `Point`, but not `Circle`.
console . log ( point instanceof Point ) ;   // Outputs `true`.
console . log ( point instanceof Circle ) ;  // Outputs `false`.

// `circle` is an instance of both `Point` and `Circle`.
console . log ( circle instanceof Point ) ;  // Outputs `true`.
console . log ( circle instanceof Circle ) ; // Outputs `true`.

靜態屬性

靜態（類別）成員可以透過$statics屬性定義。

 const Class = xmo ( {
  constructor ( ) {
    this . status = Class . Ready ;
  } ,

  $statics : {
    Ready : 0 ,
    Running : 1
  }
} ) ;

console . log ( Class . Ready ) ;     // Outputs `0`.
console . log ( Class . Running ) ;   // Outputs `1`.

const instance = new Class ( ) ;

console . log ( instance . status ) ; // Outputs `0`.
console . log ( instance . Ready ) ;  // Outputs `undefined` (not a member of `instance`).

擴充

許多 JS 框架，尤其是為 UI takeits 設計的框架，為它們使用的物件模型提供了一組固定的擴展。例如，Qooxdoo 支援 mixins、接口，並允許定義屬性和事件。 xmo.js的目的不是提供所有可以想像到的功能，而是提供一個基礎來向特定類別添加擴展，然後所有繼承它的類別都將包含該擴展。這允許在運行時擴展類系統並支援幾乎任何用戶需求。

目前xmo.js支援 2 個概念：

由$preInit和$postInit屬性定義的初始化處理程序。
由$extensions屬性定義的擴充。

新類別始終透過以下步驟建立：

繼承 init 處理程序和擴充。
呼叫$preInit處理程序。
在類別中新增成員（也處理所有定義的$extensions ）
呼叫$postInit處理程序。

以下範例使用$extensions屬性來定義$property擴充：

 const Point = xmo ( {
  constructor ( x , y ) {
    this . x = x ;
    this . y = y ;
  } ,

  $extensions : {
    // Define extension `$properties`.
    //
    // This function will be called every time when `$properties` is used in
    // class definition that directly or indirectly inherits `Point`. It is
    // also called if `Point` itself uses `$properties` extension.
    //
    // `this` - Class object     (`Point` in our case).
    // `k`    - Property key     ("$properties" string).
    // `v`    - Property value   (`$properties` content).
    $properties ( k , v ) {
      // Iterate over all keys in `$properties`.
      Object . keys ( v ) . forEach ( function ( name ) {
        const upper = name . charAt ( 0 ) . toUpperCase ( ) + name . substr ( 1 ) ;

        // Create getter and setter for a given `name`.
        this . prototype [ `get ${ upper } ` ] = function ( ) { return this [ name ] ; } ;
        this . prototype [ `set ${ upper } ` ] = function ( value ) { this [ name ] = value ; } ;
      } , this /* binds `this` to the callback. */ ) ;
    }
  } ,

  // In our case this will use the defined `$properties` extension.
  $properties : {
    x : true ,
    y : true
  }
} ) ;

// Create an instance of `Point` and call the generated functions.
const point = new Point ( 1 , 2 ) ;

console . log ( point . getX ( ) ) ; // Outputs `1`.
console . log ( point . getY ( ) ) ; // Outputs `2`.

point . setX ( 10 ) ;
point . setY ( 20 ) ;

console . log ( point . getX ( ) ) ; // Outputs `10`.
console . log ( point . getY ( ) ) ; // Outputs `20`.

PreInit 和 PostInit 處理程序

擴充定義了一個函數，如果類別定義中存在給定key ，則呼叫該函數。由於這個概念很好且通常很有用，因此有時能夠在類別設定之前和/或之後呼叫處理程序很方便，無論類別定義def物件中存在哪些屬性。 $preInit和$postInit處理程序皆受支持，可用於一次新增單一或多個處理程序。

以下範例與$properties擴充功能執行相同的操作，但使用$postInit處理程序取代：

 const Point = xmo ( {
  constructor ( x , y ) {
    this . x = x ;
    this . y = y ;
  } ,

  // Add a preInit handler.
  $preInit ( def ) {
    // Does nothing here, just to document the syntax.
  } ,

  // Add a postInit handler, called once on Point and all classes that inherit it.
  //
  // `this` - Class object (`Point` in our case).
  // `def`  - The whole `def` object passed to `xmo(...)`.
  $postInit ( def ) {
    if ( ! def . $properties )
      return ;

    // Iterate over all keys in `$properties`.
    Object . keys ( def . $properties ) . forEach ( function ( name ) {
      const upper = name . charAt ( 0 ) . toUpperCase ( ) + name . substr ( 1 ) ;

      // Create getter and setter for a given `key`.
      this . prototype [ `get ${ upper } ` ] = function ( ) { return this [ name ] ; } ;
      this . prototype [ `set ${ upper } ` ] = function ( value ) { this [ name ] = value ; } ;
    } , this /* binds `this` to the callback. */ ) ;
  } ,

  // This is not necessary. Null extensions are only used to make
  // a certain property ignored (won't be copied to the prototype).
  $extensions : {
    $properties : null
  } ,

  // Will be used by the hook defined above.
  $properties : {
    x : true ,
    y : true
  }
} ) ;

// Create an instance of `Point` and use functions created by the
// `property` extension.
const point = new Point ( 1 , 2 ) ;

console . log ( point . getX ( ) ) ; // Outputs `1`.
console . log ( point . getY ( ) ) ; // Outputs `2`.

point . setX ( 10 ) ;
point . setY ( 20 ) ;

console . log ( point . getX ( ) ) ; // Outputs `10`.
console . log ( point . getY ( ) ) ; // Outputs `20`.

初始化處理程序與擴充功能非常相似，但是，它們不需要定義任何屬性，並且每個類別總是呼叫一次。 Init 處理程序通常更強大，因為它們可以使用任何屬性或多個屬性來為類別本身添加內容。

混入

mixin 是一組可以包含在另一個類別或 mixin 中的函數。 Mixins 是透過使用xmo.mixin(def)來定義的，其中def是與xmo.js本身相容的類似定義，但沒有建構constructor支援（mixins 無法實例化）。 Mixins 也理解$extensions和$preinit/$postInit處理程序，因此可以在 mixin 中定義它們，然後將其包含在其他類別中。

 // Create a mixin that provides `translate(x, y)` function.
const MTranslate = xmo . mixin ( {
  translate ( x , y ) {
    this . x += x ;
    this . y += y ;
    return this ;
  }
} ) ;

// Create a Point class that includes MTranslate mixin.
const Point = xmo ( {
  $mixins : [ MTranslate ] ,

  constructor ( x , y ) {
    this . x = x ;
    this . y = y ;
  } ,

  toString ( ) {
    return `[ ${ this . x } , ${ this . y } ]` ;
  }
} ) ;

// Create a Rect class that includes MTranslate mixin.
const Rect = xmo ( {
  $mixins : [ MTranslate ] ,

  constructor ( x , y , w , h ) {
    this . x = x ;
    this . y = y ;
    this . w = w ;
    this . h = h ;
  } ,

  toString ( ) {
    return `[ ${ this . x } , ${ this . y } , ${ this . w } , ${ this . h } ]` ;
  }
} ) ;

// The translate() functions are provided to both classes.
const p = new Point ( 0 , 0 ) ;
const r = new Rect ( 0 , 0 , 33 , 67 ) ;

p . translate ( 1 , 2 ) ;
r . translate ( 1 , 2 ) ;

console . log ( p . toString ( ) ) ; // Outputs `[1, 2]`.
console . log ( r . toString ( ) ) ; // Outputs `[1, 2, 33, 67]`.

將多個 mixin 組合成一個 mixin：

 // Create two mixins MTranslate and MScale.
const MTranslate = xmo . mixin ( {
  translate ( x , y ) {
    this . x += x ;
    this . y += y ;
    return this ;
  }
} ) ;

const MScale = xmo . mixin ( {
  scale ( x , y ) {
    if ( y == null )
      y = x ;

    this . x *= x ;
    this . y *= y ;
    return this ;
  }
} ) ;

// If a combined mixin is needed, it can be created simply by
// including MTranslate and MScale into another mixin.
const MCombined = xmo . mixin ( {
  $mixins : [ MTranslate , MScale ]
} ) ;

元資訊

xmo.js建立的每個類別都包含一個名為 MetaInfo 的不可枚舉屬性。它包含有關類別本身（和繼承）的基本信息，並且可用於存儲擴展所需的附加信息。

讓我們來示範一下 MetaInfo 的基礎：

 const Class = xmo ( {
  $preInit ( ) {
    console . log ( "PreInit()" ) ;
  } ,

  $postInit ( ) {
    console . log ( "PostInit()" ) ;
  } ,

  $extensions : {
    $ignoredField : null ,

    $customField ( k , v ) {
      console . log ( `CustomField(): ' ${ k } ' with data ${ JSON . stringify ( v ) } ` ) ;
    }
  } ,

  $customField : {
    test : [ ]
  } ,

  $statics : {
    SomeConst : 0
  }
} ) ;

// Firstly, try to instantiate the class:
//   PreInit()
//   CustomField(): '$customField' with data { test: [] }
//   PostInit()
const instance = new Class ( ) ;

// Access MetaInfo of the class.
//   (Alternatively `instance.constructor.$metaInfo`)
const MetaInfo = Class . $metaInfo ;

// Boolean value indicating a mixin:
//   false
console . log ( MetaInfo . isMixin ) ;

// Super class:
//   null (would link to super class if the class was inherited)
console . log ( MetaInfo . super ) ;

// Map of ignored properties:
//   { $ignoredField: true, $customField: true }
console . log ( MetaInfo . ignored ) ;

// Map of all static properties:
//   { SomeConst: true }
console . log ( MetaInfo . statics ) ;

// PreInit handlers:
//   [function(...)]
console . log ( MetaInfo . preInit ) ;

// PostInit handlers:
//   [function(...)]
console . log ( MetaInfo . postInit ) ;

// Extensions:
//   { $customField: function(...) }
console . log ( MetaInfo . extensions ) ;

//

值得一提的是，MetaClass 的所有成員都被凍結（不可變），並且在類別創建後（調用所有 postInit 處理程序後）無法修改。 MetaInfo 只能在類別建立期間透過 init 處理程序和類別擴充進行變更。使用getMutable()成員函式使 MetaInfo 的屬性暫時可變。

以下範例展示如何為 MetaInfo 新增自訂反射資訊：

 // Creates some base class that defines a property system.
const Base = xmo ( {
  $preInit ( ) {
    const meta = this . $metaInfo ;

    // Add `properties` property to MetaInfo object.
    if ( ! meta . properties )
      meta . properties = Object . create ( null ) ;
  } ,

  $extensions : {
    $properties ( k , v ) {
      const defProperties = v ;
      const metaProperties = this . $metaInfo