feat: add some code

.gitignore

@@ -98,3 +98,11 @@ typings/
 
 # End of https://www.gitignore.io/api/node
 n
+
+# * ================================================================================ 
+
+yarn.lock
+draft/
+draft.*
+draft-*.*
+tempCodeRunnerFile.*

js/reimplement/es5-new-class.js

@@ -0,0 +1,47 @@
+// * 就不用 TS 了，别折腾自己
+// * https://2ality.com/2014/01/new-operator.html
+
+// * ------------------------------------------------ new
+
+const myNew = (clsFn, ...args) => {
+  const prototypedObj = Object.create(clsFn.prototype);
+  const constructorResult = clsFn.call(prototypedObj, ...args);
+  return typeof constructorResult === 'object' && constructorResult !== null
+    ? constructorResult
+    : prototypedObj;
+};
+
+// * ------------------------------------------------ usage
+
+// * Class constructor MyClass cannot be invoked without 'new'
+// * deal with it bitch!
+// {
+//   class MyClass {
+//     constructor(val) {
+//       this.val = val;
+//     }
+//     log() {
+//       console.log('log', this.val);
+//     }
+//   }
+
+//   const inst = myNew(MyClass, 233);
+
+//   inst.log();
+// }
+
+// * --------------------------------
+
+{
+  function MyClass(val) {
+    this.val = val;
+  }
+
+  MyClass.prototype.log = function () {
+    console.log('log', this.val);
+  };
+
+  const inst = myNew(MyClass, 233);
+
+  inst.log();
+}

js/reimplement/ex5-extends.js

@@ -0,0 +1,101 @@
+// * ================================================================================ class
+
+{
+  class MyBase {
+    constructor(val) {
+      this.val = val;
+      console.log('base_init', val, this.val);
+    }
+    log() {
+      console.log('base_val', this.val);
+    }
+    solid() {
+      console.log('solid_val', this.val);
+    }
+  }
+
+  class MyExt extends MyBase {
+    constructor(val) {
+      super(val);
+      this.val = 'ext' + val;
+      console.log('init', val, this.val);
+    }
+    log() {
+      console.log('ext_val', this.val);
+    }
+  }
+
+  // * ----------------
+
+  const inst = new MyExt(233);
+  inst.log();
+  inst.solid();
+
+  // * ----------------
+
+  console.log([
+    MyExt.prototype === inst.__proto__,
+    MyExt.prototype === Object.getPrototypeOf(inst),
+    MyExt.prototype.constructor === MyExt,
+    MyExt.prototype.__proto__ === MyBase.prototype,
+  ]);
+
+  // * ----------------
+}
+
+console.log('--------');
+
+// * ================================================================================ es5
+
+{
+  function MyBase(val) {
+    this.val = val;
+    console.log('base_init', val, this.val);
+  }
+
+  MyBase.prototype.log = function () {
+    console.log('base_val', this.val);
+  };
+  MyBase.prototype.solid = function () {
+    console.log('solid_val', this.val);
+  };
+
+  // * ----------------
+
+  const es5extends = (subFn, superFn) => {
+    // * 原型链寄生组合继承
+    subFn.prototype = Object.create(superFn.prototype);
+    subFn.prototype.constructor = subFn;
+  };
+
+  // * ----------------
+
+  function MyExt(val) {
+    // * 模拟 super
+    MyBase.call(this, val);
+
+    this.val = 'ext' + val;
+    console.log('init', val, this.val);
+  }
+
+  es5extends(MyExt, MyBase);
+
+  MyExt.prototype.log = function () {
+    console.log('ext_val', this.val);
+  };
+
+  // * ----------------
+
+  const inst = new MyExt(233);
+  inst.log();
+  inst.solid();
+
+  // * ----------------
+
+  console.log([
+    MyExt.prototype === inst.__proto__,
+    MyExt.prototype === Object.getPrototypeOf(inst),
+    MyExt.prototype.constructor === MyExt,
+    MyExt.prototype.__proto__ === MyBase.prototype,
+  ]);
+}

js/reimplement/template-string.ts

@@ -0,0 +1,26 @@
+// * https://handlebarsjs.com/guide/#what-is-handlebars
+
+// * ------------------------------------------------ template
+
+const template = <T extends Record<any, any>>(str: string, data: T = {} as Record<any, any>) =>
+  str.replace(/{{(.+?)}}/g, (e, slot) => (slot in data ? data[slot] : ''));
+
+// * ------------------------------------------------ usage
+
+console.log('--------');
+
+{
+  const result = template(`Hello {{name}}`, { name: 'LC' });
+  console.log(result);
+  console.assert(result === 'Hello LC');
+}
+
+console.log('--------');
+
+{
+  const result = template(`Hello {{name}}`);
+  console.log(result);
+  console.assert(result === 'Hello LC');
+}
+
+console.log('--------');

js/util/deep-clone.ts

@@ -0,0 +1,31 @@
+// * ------------------------------------------------ deepClone simple
+
+const deepClone = <T = any>(data: T): T => {
+  if (Array.isArray(data)) {
+    // @ts-ignore Just Works Programming LOL
+    return data.map((e) => deepClone(e)) as T;
+  } else if (typeof data === 'object') {
+    return Object.fromEntries(Object.entries(data).map(([k, v]) => [k, deepClone(v)])) as T;
+  } else {
+    return data;
+  }
+};
+
+// * ------------------------------------------------ usage
+
+{
+  const data = { children: [{ id: 2 }, { id: 3 }, { id: 4 }] };
+  const result = deepClone(data);
+
+  console.log(result);
+
+  console.assert(result !== data);
+  console.assert(result.children !== data.children);
+  console.assert(JSON.stringify(result) === JSON.stringify(data));
+}
+
+{
+  const data = [{ id: 2 }, { id: 3 }, { id: 4 }];
+  const result = deepClone(data);
+  console.log(result);
+}

js/util/event-emitter.ts

@@ -0,0 +1,55 @@
+// * https://github.com/primus/eventemitter3
+// * https://nodejs.org/api/events.html
+
+// * ------------------------------------------------ EventEmitter simple
+
+class EventEmitter {
+  private handlers: Record<string, Function[]> = {};
+  on(event: string, handler: Function) {
+    if (!this.handlers[event]) this.handlers[event] = [];
+    this.handlers[event].push(handler);
+  }
+  off(event: string, handler?: Function) {
+    if (!handler) {
+      this.handlers[event] = [];
+    } else {
+      this.handlers[event] = this.handlers[event].filter((fn) => fn !== handler);
+    }
+
+    if (!this.handlers[event]) delete this.handlers[event];
+  }
+  emit(event: string, data: any) {
+    if (!this.handlers[event]) return;
+
+    this.handlers[event].forEach((fn) => fn(data));
+  }
+}
+
+// * ------------------------------------------------ usage
+
+{
+  const bus = new EventEmitter();
+
+  bus.on('radio', (e: number) => console.log('log1', e));
+
+  const handler = (e: number) => console.log('log2', e);
+  bus.on('radio', handler);
+
+  console.log('--------');
+
+  bus.emit('radio', 333);
+  bus.emit('useless', 333);
+
+  console.log('--------');
+
+  bus.off('radio', handler);
+  bus.emit('radio', 666);
+
+  console.log('--------');
+
+  bus.off('useless');
+  bus.off('radio');
+  bus.emit('radio', 999);
+
+  console.log('--------');
+}

js/util/to-thousand.ts

@@ -0,0 +1,7 @@
+// * ------------------------------------------------ toThousand simple
+
+const toThousand = (str: string | number) => String(str).replace(/\B(?=(\d{3})+\b)/g, ',');
+
+// * ------------------------------------------------ usage
+
+console.warn('lcdebug 617c7a', toThousand('123456789.12345'));

js/util/uniq-by.ts

@@ -0,0 +1,49 @@
+// * try ramda https://ramdajs.com/docs/#uniqBy
+
+// * ------------------------------------------------ uniqBy (key) simple
+
+const uniqBy = <T, K extends any>(arr: T[], byKey: (ele: T) => K = (e) => e as any): T[] => {
+  const map = new Set<K>();
+  const result = arr.filter((e) => {
+    const key = byKey(e);
+    if (map.has(key)) {
+      return false;
+    } else {
+      map.add(key);
+      return true;
+    }
+  });
+
+  return result;
+};
+
+// * ------------------------------------------------ usage
+
+{
+  const data = [
+    { key: 1, val: 'Lorem' },
+    { key: 2, val: 'ipsum' },
+    { key: 3, val: 'dolor' },
+    { key: 1, val: 'sit' },
+    { key: 1, val: 'amet' },
+    { key: 2, val: 'consectetur' },
+    { key: 4, val: 'adipisicing' },
+  ];
+
+  const expected = [
+    { key: 1, val: 'Lorem' },
+    { key: 2, val: 'ipsum' },
+    { key: 3, val: 'dolor' },
+    { key: 4, val: 'adipisicing' },
+  ];
+
+  const result = uniqBy(data, (e) => e.key);
+
+  console.log('--------');
+
+  console.assert(JSON.stringify(result) === JSON.stringify(expected));
+
+  console.log(result);
+
+  console.log('--------');
+}

package.json

@@ -6,6 +6,7 @@
   "author": "seognil-lab <[email protected]>",
   "license": "MIT",
   "devDependencies": {
+    "@types/node": "^14.0.27",
     "parcel": "^1.12.4"
   }
 }