@johnnywang/data-box v1.0.7

data-box

A tiny data handling library, just like vuejs,

which is also cross environment, you can easily require

this library with Nodejs or browser environment.

參考 Vue 物件導向方式開發，用於資料間之互動處理，自動

帶入getter, setter，便於使用，減少繁雜變數命名。

Install

Install By npm

npm install --save @johnnywang/data-box 

Require Library

const DataBox = require('@johnnywang/data-box');

const myBox = new DataBox({
  // ...
})

Usage

data

• Type: Object(writable, enumerable)-(可改變值, 可枚舉)

Define writable data, which for later using.

內部定義可變動數據，或初始化變數位置供後續 Functions 使用與輸出存放。

Computed

• Type: Object(unwritable, unenumerable)-(不可改變值, 不可枚舉)

Each value could be a function or object, when is function,

it will act as getter by default, when is object, it can only

has get, set property inside for use.

每個 key 項目可以為 函數 或 物件，為函數之場合，預設為設定 getter。

若為物件之場合，僅接受 get, set 這兩個子項目，其值皆須為 函數。

Functions

• Type: Object(unwritable, unenumerable)-(不可改變值, 不可枚舉)

define methods for use, only can be as function.

定義方法專用，內部 key 只能為函數。

• Once Usage: (case-sensitive)

if you define a function's name like once_xxx or onceXxx,

that function will be trigger only for one time.

若函式名稱以 once 開頭時，不論是 once_xxx 或 onceXxx，該函數

只會被執行一次。

Modules

• Type: Array

use to combine the instance between DataBox or an object.

items inside can be a DataBox instance, or a native object which with the same structure.

Will execute by the array's order.

用以定義模組化 DataBox，可自由與其他DataBox合併使用，或是與一般據相同結構的Object合併。

• Notice:

1. In order not to let modules become too complex to maintain,

   you can only combine modules in one level, which means modules in each module

   will be ignored automatically.

   為了避免模組過於複雜難以維護，僅可於第一層使用 modules，意即在模組中的模組將被自動忽略。

2. wins event in instance modules will also be trigger once, if you dont want to see that,

   use native object instead.

   在 DataBox 實例模組中的 wins 事件，仍會被觸發一次，若不希望此效果，則請使用一般物件類型作為模組。

Wins - Only support in browser environment

• Type: Object(Execute once with addEventListener)-(僅使用 addEventListener 執行一次)

addEventListener to window Object once. The value only can be as function.

對 window 物件添加事件監聽處理。

• Supported Event: load, resize, scroll, beforeunload

支援事件: load, resize, scroll, beforeunload

Basic - DEMO

const myBox = new DataBox({
  data: {
    name: 'Johnny',
    age: 30
  },
  computed: {
    info: {
      get() {
        return this.name + ',' + this.age;
      },
      set(nv) {
        nv = nv.split(',');
        this.name = nv[0];
        this.age = nv[1];
      }
    },
    hello() {
      return 'Hello' + this.name;
    }
  },
  functions: {
    Add(a, b) {
      return a + b;
    },
    // This function could only be trigger once
    onceAdd(a, b) {
      return a + b;
    }
  },
  wins: {
    load(e) {
      console.log(this); // myBox
      console.log(e); // event object
    },
    resize(e) {
      console.log(this); // myBox
      console.log(e); // event object
    }
  }
})

Modules - DEMO

const module01 = {
  data: {
    menu: {
      name: 'Fish',
      price: 80,
      source: {
        salt: 20,
        sugar: 15
      }
    }
  },
  computed: {
    info() {
      return this.menu.name + ':' + this.menu.price;
    }
  },
  functions: {
    Add(a, b) {
      return a + b;
    }
  },
  wins: {
    load() {
      console.log('One: ', this.menu.name);
    }
  }
};

const module02 = {
  data: {
    menu: {
      name: 'Potato',
      price: 50,
      source: {
        salt: 10
      }
    }
  },
  wins: {
    load() {
      console.log('Two: ', this.menu.name);
    }
  }
};

const myBox = new DataBox({
  data: {
    menu: {
      name: 'Cherry',
      price: 40,
      source: {
        salt: 0
      }
    }
  },
  modules: [
    module01,
    module02
  ],
  wins: {
    load() {
      const self = this;
      console.log('Use a fn by module: ' + self.Add(1, 2));
    }
  }
});

// Use a fn by module: 3