@jusfoun-vis/common v0.1.1

JavaScript Common Library

Jusfoun Visualization Department.

forge/forge2 混合继承

forge/forge2用于混合继承对象，其中forge用于ES6，forge用于ES5。

class ClassA {
}
class ClassB {
}
class ClassC extends ClassB {
}
forge(ClassC, ClassA);

var ClassA = function () {
};
var ClassB = function () {
};
var ClassC = function () {
};
ClassC.prototype = forge2(ClassB.prototype, ClassA.prototype, {});

EventDispatcher 事件派发器

EventDispatcher实现观察者模式，可用于任意需事件监听的场合。

import {EventDispatcher} from '@jusfoun-vis/common';
class ClassA extends EventDispatcher {
}

const a = new ClassA();
a.on('event1', function (e) { console.log(e); });
a.fire({ type: 'event1' });
a.off('event1');

Timer 定时器

Timer可用于任意需定时调用的场合。

import {Timer} from '@jusfoun-vis/common';

// 每秒执行一次，永不停止。
var timer = new Timer(1000);
timer.on('timer', function () { console.log(1); });
timer.start();

// 以屏幕刷新率执行，永不停止。
var timer = new Timer(Timer.REQUEST_ANIMATION_FRAME);
timer.on('timer', function () { console.log(1); });
timer.start();

// 每秒执行一次，执行10次便停止，在停止后，若不重置定时器，则启动会立刻停止。
var timer = new Timer(1000, 10);
timer.on('timer', function () { console.log(1); });
timer.start();

// 停止、重置、取消事件。
timer.stop();
timer.reset();
timer.off('timer');

UiComponent 元件基类

UiComponent实现基于Tick-tock形式的属性变更优化模型，可实现属性批量提交，达到优化性能的目的。

import {UiComponent} from '@jusfoun-vis/common';

class ClassA extends UiComponent {
  constructor() {
    super();
    this._count1 = 0;
    this._count2 = 0;
  }
  
  _invalidate1Flag = false;
  set paramA(value) {
    this._paramA = value;
    this._invalidate1Flag = true;
    this.invalidateProperties();
  }
  set paramB(value) {
    this._paramB = value;
    this._invalidate1Flag = true;
    this.invalidateProperties();
  }
  _invalidate2Flag = false;
  set paramC(value) {
    this._paramC = value;
    this._invalidate2Flag = false;
    this.invalidateProperties();
  }
  set paramD(value) {
    this._paramD = value;
    this._invalidate2Flag = false;
    this.invalidateProperties();
  }
  
  commitProperties() {
    if (this._invalidate1Flag) {
      this._invalidate1Flag = false;
      // redraw for paramA and paramB
      this._count1++;
    }
    
    if (this._invalidate2Flag) {
      this._invalidate2Flag = false;
      // redraw for paramC and paramD
      this._count2++;
    }
  }

  measure() {
  }

  updateDisplayList() {
  }
}

const a = new ClassA();
for (let i = 0; i < 10000; i++) {
  a.paramA = ...
  a.paramB = ...
  a.paramC = ...
  a.paramD = ...
}
console.log(a._count1, a._count2); // output: 1 1

ElementUtil 元素工具

ElementUtil提供常用的元素处理方法集。

import {
  createElement,
  createElementNS,
  getAttribute,
  setAttributes,
  setStyles,
  
  SVG_NS
} from '@jusfoun-vis/common';

// 创建元素
const canvas = createElement('canvas');
const svg = createElementNS('svg', SVG_NS);

// 批量设置元素属性
setAttributes(canvas, {
  width: 1024,
  height: 1024
});

// 批量设置元素样式
setStyles(canvas, {
  position: 'absolute',
  left: '128px',
  top: '256px'
});