javascript ecmascript typescript

es_thips.md

A-Z配列

var charAry = (()=>{
var i = 0;
var chars = [];
while (i <= 25) {
  chars.push(String.fromCharCode(65 + i));
  i++;
}
return chars;
})();

resouce timing

リソースの取得時間計測

(()=>{
  // https://www.w3.org/TR/2016/WD-resource-timing-20160225/#processing-model
  var resources: Array<PerformanceResourceTiming> = performance.getEntriesByType("resource");
  resources.forEach((res: PerformanceResourceTiming, index: number) => {
    console.log(res.name, res.responseEnd - res.startTime);
  });
})();

navigation timing & d3js

(()=>{
  //http://w3c.github.io/navigation-timing/#processing-model
  let pef: Object = {
    redirect: (): number => performance.timing.redirectEnd - performance.timing.redirectStart,
    unload: (): number =>  performance.timing.unloadEventEnd - performance.timing.unloadEventStart,
    appCache: (): number => performance.timing.domainLookupStart - performance.timing.fetchStart,
    DNS: (): number => performance.timing.domainLookupEnd - performance.timing.domainLookupStart,
    TCP: (): number => performance.timing.connectEnd - performance.timing.connectStart,
    Request: (): number => performance.timing.redirectEnd - performance.timing.redirectStart,
    Processing: (): number => performance.timing.loadEventStart - performance.timing.responseEnd,
    DOMContentLoaded: (): number => performance.timing.domContentLoadedEventEnd - performance.timing.domContentLoadedEventStart,
    Load: (): number => performance.timing.loadEventEnd - performance.timing.loadEventStart,
  }
  
  
  let lineRender = (_glaph: d3.Selection<any>, timing: string ,col: number, width: number) => {
    _glaph.append('text').attr("x", 1).attr("y", (12 * col) - 2).attr('font-size', '9px').text(`${timing}(${width})`);
    _glaph.append('line').attr('stroke-width', 2).attr('stroke', 'red')
      .attr('x1', 1).attr('x2', width + 1)
      .attr('y1', 12 * col).attr('y2', 12 * col)
  }
  
  let glaph = d3.select('body').append('svg');
  glaph.attr('width', 500);
  glaph.attr('height', 300);
  var idx = 1;
  for (var fnc in pef) {
    console.log(fnc, (<any>pef)[fnc]());
    lineRender(glaph, fnc, idx++, (<any>pef)[fnc]())
  }
  
})();

IPAddress.md

/** IPアドレス */
export interface IIPAddress {
  /** 第１オクテット */
  octet1: number,
  /** 第２オクテット */
  octet2: number,
  /** 第３オクテット */
  octet3: number,
  /** 第４オクテット */
  octet4: number,
}

/** IPアドレス帯域 */
export interface ISegment {
  ip: IIPAddress,
  /** サブネットマスク */
  subnet: number,
}

/** セグメント内か確認する */
export const isSegmentRangeBetween = (range: ISegment, ip: IIPAddress): boolean => {
  return ip2byte(range.ip) <= ip2byte(ip) &&
    (ip2byte(range.ip) + segmentRange[range.subnet]) > ip2byte(ip)
};

/** ip一致チェック */
export const matched = (A: IIPAddress, B: IIPAddress): boolean =>
  A.octet1 === B.octet1 &&
  A.octet2 === B.octet2 &&
  A.octet3 === B.octet3 &&
  A.octet4 === B.octet4;

/** ip compare */
export const compare = (A: IIPAddress, B: IIPAddress): number => {
  if (ip2byte(A) < ip2byte(B)) return -1;
  if (ip2byte(A) > ip2byte(B)) return 1;
  return 0;
};
/** ip object -> number */
export const ip2byte = (ip: IIPAddress): number =>
  (ip.octet1 * 16777216) +
  (ip.octet2 * 65536) +
  (ip.octet3 * 256) +
  (ip.octet4);

/** number -> ip object */
export const byte2ip = (ipByte: number): IIPAddress => ({
  octet1: ((ipByte & 0xFF000000) / 16777216) + (ipByte & 0x80000000 ? 256 : 0),
  octet2: (ipByte & 0xFF0000) / 65536,
  octet3: (ipByte & 0xFF00) / 256,
  octet4: (ipByte & 0xFF)
});

const segmentRange: {
  [index: number]: number
} = {
  4: 240435456,
  5: 134217728,
  6: 67108864,
  7: 33554432,
  8: 16777216,
  9: 8388608,
  10: 4194304,
  11: 2097152,
  12: 1048576,
  13: 524288,
  14: 262144,
  15: 131072,
  16: 65534,
  17: 32768,
  18: 16384,
  19: 8192,
  20: 4096,
  21: 2048,
  22: 1024,
  23: 512,
  24: 256,
  25: 128,
  26: 64,
  27: 32,
  28: 16,
  29: 8,
  30: 4,
  31: 2,
  32: 1
};

observer.md

/**

 * @example setting ovserve function
 *   global.myOvserve.observe('xxxxx_xxxxx_xxxxx', function(updateJson){
 *     console.log('DATA:', updateJson.param); // -> DATA:PARAM
 *   });
 *
 * @example nofify method (parameter single only)
 *   global.myOvserve.notify('xxxxx_xxxxx_xxxxx', { param: 'PARAM' }); // execute global.myOvserve.observe function
 **/

// browser: window
// nodejs: global
global.myOvserve = global.myOvserve || (function () {

  function Ovserve() {
    this._Map = new Map();
  }

  // set ovserver
  Ovserve.prototype.observe = function (name, fnc) {
    var funcs = this._Map.get(name) || [];
    funcs.push(fnc);
    this._Map.set(name, funcs);
  };

  // remove ovserver
  Ovserve.prototype.unobserve = function (name, func) {
    var funcs = this._Map.get(name) || [];
    this._Map.set(name, funcs.filter(function (_func) {
      return _func !== func;
    }));
  };

  // notify ovserve
  Ovserve.prototype.notify = function (name) {
    var args = Array.prototype.slice.call(arguments, 1);
    /* istanbul ignore next */
    (this._Map.get(name) || []).forEach(function (func, index) {
      func.apply(null, args);
    });
  };

  return new Ovserve();
})();

WebWorker.md

組み込みワーカーさんぷる

• core

import * as conv from '../blobConvert';
import * as Rx from 'rxjs';

/**
 * @example use

import * as workerUtil from '../utils/workerUtil';
wUtil.worker.onmessage = (e: MessageEvent): void => {
  var data = wUtil.ab2json(e.data);
  console.log('result', data);
};
wUtil.postMessageJson({ foo: 3 });

 * 
 * @example create worker

var wUtil = workerUtil.CreateWorker(function() {
  const workerUtil = {
    ab2json: (dataBuffer: Uint16Array): Object => JSON.parse(String.fromCharCode.apply(null, new Uint16Array(dataBuffer))),
    json2ab: (jsonData: Object): Uint16Array => {
      var strJson = JSON.stringify(jsonData);
      var uInt8Array = new Uint16Array(new ArrayBuffer(strJson.length * 2));
      for (var i = 0, strLen = strJson.length; i < strLen; i++) uInt8Array[i] = strJson.charCodeAt(i);
      return uInt8Array;
    },
  }

  onmessage = function(e: MessageEvent) {
    var data = workerUtil.ab2json(e.data);
    console.log('Message received from main script', data);

    var ab = workerUtil.json2ab({ result: data });

    this.postMessage(ab.buffer, [ab.buffer]);
  }
});

*/

export interface IIpResult {
  command: string,
  symbol: number,
  result: any,
}

export interface IWorkerUtill {
  worker: Worker,
  postMessageJson: (json: Object) => void,
  messageObserver: Rx.Observable<{}>,
}

export function CreateWorker(workerFunc: (ev: MessageEvent) => void): IWorkerUtill {
  var worker = new Worker(URL.createObjectURL(new Blob([
    '(',
    workerFunc.toString(),
    ')()'
    ], { type: 'application/javascript' })));

  const service = {
    worker: worker,
    postMessageJson: (json: Object) => {
      var ab = conv.json2ab(json);
      service.worker.postMessage(ab.buffer, [ab.buffer]);
    },
    messageObserver: new Rx.Subject(),
  }
  
  worker.onmessage = ( me: MessageEvent )=>
    service.messageObserver.next(conv.ab2json(me.data))
  
  return service;
}

• ArrayBuffer to JSON

export interface IBlobConvertor {
  ab2json: (dataBuffer: Uint16Array) => Object,
  json2ab: (jsonData: Object) => Uint16Array,
}

export const ab2json = (dataBuffer: Uint16Array): Object => JSON.parse(String.fromCharCode.apply(null, new Uint16Array(dataBuffer)))
export const json2ab = (jsonData: Object): Uint16Array => {
      var strJson = JSON.stringify(jsonData);
      var uInt8Array = new Uint16Array(new ArrayBuffer(strJson.length * 2));
      for (var i = 0, strLen = strJson.length; i < strLen; i++) uInt8Array[i] = strJson.charCodeAt(i);
      return uInt8Array;
    }

ReactiveWorker

import * as workerFactory from './factory';
import * as conv from '../blobConvert';

import * as Rx from 'rxjs';

var hoge = new Rx.Subject()

interface IRxScales {
  scale?: number,
  x?: number,
  y?: number,
  transition?: number,
}

interface IRxCommand {
  command: string,
  symbol: number,
  args: IRxScales,
}
// https://npmcdn.com/@reactivex/rxjs@5.0.0-beta.6/dist/global/Rx.umd.js
const rxWorker = {
  currentWorker: workerFactory.CreateWorker(function () {
    importScripts('https://npmcdn.com/@reactivex/rxjs/dist/global/Rx.umd.js');
    /** worker util */
    const workerUtil = {
      ab2json: (dataBuffer: Uint16Array): Object => JSON.parse(String.fromCharCode.apply(null, new Uint16Array(dataBuffer))),
      json2ab: (jsonData: Object): Uint16Array => {
        var strJson = JSON.stringify(jsonData);
        var uInt8Array = new Uint16Array(new ArrayBuffer(strJson.length * 2));
        for (var i = 0, strLen = strJson.length; i < strLen; i++) uInt8Array[i] = strJson.charCodeAt(i);
        return uInt8Array;
      },
    }

    const observers = {
      scale: <Rx.Subject<any>>new Rx.Subject(),
      bundleObserver: <any>null
    }

    var pre = {
      scale: 1,
      x: 1,
      y: 1,
    }

    observers.scale
      .subscribe((p: IRxCommand) => {

        let ab = workerUtil.json2ab(<workerFactory.IIpResult>{
          command: p.command,
          symbol: p.symbol,
          result: {
            scale: p.args.scale || pre.scale,
            x: p.args.x || pre.x,
            y: p.args.y || pre.y,
            transition: p.args.transition,
          },
        });

        this.postMessage(ab.buffer, [ab.buffer]);

        pre.scale = p.args.scale || pre.scale;
        pre.x = p.args.x || pre.x;
        pre.y = p.args.y || pre.y;
      })

    /** command pattern */
    onmessage = (e: MessageEvent) => observers.scale.next(<IRxCommand>workerUtil.ab2json(e.data))
  })
}

export {rxWorker};