面白そうなことメモ

`getter`/`setter`を宣言後に追加する方法

Objectに対してgetter/setterを追加可能。
一応Class自体に追加してインスタンスにも反映させることはできそう。

Class宣言
getter/setterの追加
インスタンスの作成

これが順番入れ替えたりするとどうなるかは不明
Object.definePropertyの中でのthisが何になるのかも不明

試したコード

class Hoge {
    constructor() {
    this.piyo = "piyo";
  }
};

Object.defineProperty(
  Hoge,
  "fuga",
  {
    set: (val) => {this.piyo = val},
    get: () => {return this.piyo},
    configurable:true,
  }
);

ken7253

Object.create(null);

prototypeを持たない純粋なオブジェクトを作る。

const obj = Object.create(null); 
console.log(obj); // { }

通常のオブジェクトはプロトタイプを持つが上記の方法でオブジェクトを作成するとプロトタイプを持たない純粋なオブジェクトを作成することができる。

Object.create()の引数にはプロトタイプを指定できるのでそれにnullを渡すことでプロトタイプを持たないオブジェクトを作成できる。

ken7253

Proxyを利用して`getter` / `setter`などに処理を挟む。

ken7253

VueのリアクティビティはProxyを使って実現されているらしい。

ken7253

HTMLのコメントを作成する

const comment = new Comment("foo");
console.log(comment);
// <!-- foo -->

new Comment()でコメントオブジェクトを作成できる。

HTMLのコメントは、下記のような継承関係にあるので色々なプロパティを実は持っている。
EventTarget -> Node -> characterData -> Comment

ken7253

計算されたスタイルを参照する方法

単純にCSSの定義を参照するのではなく、要素が本来持つスタイル等とマージして、最終的な計算結果を出力してくれる？

ken7253

特定の関数を通過したことを保証する型

numberを拡張したStrictNumber型はnumberには代入できない型として作成する。
ユーザー定義型ガードとしてisStrictNumberを用意してそれを利用するとStrictNumberを利用できるようにする。

ken7253

イベントの一覧を取得する

const element = document.createElement('a');
let keys = Object.getOwnPropertyNames(element);
let prototype = Object.getPrototypeOf(element);
while (true) {
    keys = keys.concat(Object.getOwnPropertyNames(prototype));
    prototype = Object.getPrototypeOf(prototype);
    if (!prototype) {
        break;
    }
}
const list = keys.filter((v) => /^on/ui.test(v));
console.table(list);

ref: https://burion.net/entry/2022/05/19/230825

ken7253

CSS Typed Object Model API

CSS文字列をParseしたりできるAPI

CSSStyleValue.parse(property: string, cssText: string);

CSSStyleValue.parse("transform","scale(1)");

// result
{
  0: {
    is2D: true,
    x: {value: 1, unit: 'number'}
    y: {value: 1, unit: 'number'}
    z: {value: 1, unit: 'number'}
  },
  is2D: true,
  length: 1
}

ken7253

いい感じに返してくれるプロパティとそうじゃないやつがあるっぽい？

CSSStyleValue.parse("margin", "60px");

// result
{}

ken7253

プロパティとCSS文字列が不正であるかどうかは見てくれるみたい。

プロパティ名が不正な場合

CSSStyleValue.parse("foo", "");

// => Uncaught TypeError: Failed to execute 'parse' on 'CSSStyleValue': Invalid property name

CSS文字列が不正な場合

CSSStyleValue.parse("color", "foo");

// => Uncaught TypeError: Failed to execute 'parse' on 'CSSStyleValue': The value provided ('foo') could not be parsed as a 'color'.