【速記】どのように一行のコードを使って、ラクダのピークスタイルの文字列を中線スタイルの文字列に変換しますか?

1824 ワード

起源
今日はsnabbdom(Virtual DOMライブラリ)の処理要素のカスタム属性について読みましたが、ラクダのピークスタイルの文字列を中線スタイルの文字列に変換する技術が発見されました.datasetによって実際のDOM要素に対応するatributeを除去することができます.DOMオブジェクトのdatasetとHTMLカスタム属性の対応規則は、こちらの文書を読んでもいいです.https://developer.mozilla.org...
コードの位置が見つかりました
ファイルsrc/modules/dataset.ts
import {VNode, VNodeData} from '../vnode';
import {Module} from './module';

export type Dataset = Record;

const CAPS_REGEX = /[A-Z]/g;  //      

function updateDataset(oldVnode: VNode, vnode: VNode): void {
  let elm: HTMLElement = vnode.elm as HTMLElement,
    oldDataset = (oldVnode.data as VNodeData).dataset,
    dataset = (vnode.data as VNodeData).dataset,
    key: string;

  if (!oldDataset && !dataset) return;
  if (oldDataset === dataset) return;
  oldDataset = oldDataset || {};
  dataset = dataset || {};
  const d = elm.dataset;

  for (key in oldDataset) {
    if (!dataset[key]) {
      if (d) {
        if (key in d) {
          delete d[key];
        }
      } else {
        elm.removeAttribute('data-' + key.replace(CAPS_REGEX, '-$&').toLowerCase()); 
      }
    }
  }
  for (key in dataset) {
    if (oldDataset[key] !== dataset[key]) {
      if (d) {
        d[key] = dataset[key];
      } else {
        elm.setAttribute('data-' + key.replace(CAPS_REGEX, '-$&').toLowerCase(), dataset[key]); 
      }
    }
  }
}

export const datasetModule = {create: updateDataset, update: updateDataset} as Module;
export default datasetModule;
コードのサンプル
"theStringYouWanToChange".replace(/[A-Z]/g,'-$&').toLowerCase();
実行結果"the-string-you-wan-to-change"関連文書String.prototype.replace():https://developer.mozilla.org...