Question

是否可以在对象本身内引用对象变量声明的名称？像这样：

height

编辑：

我正在编写一个动态函数，用于将我的所有CSS类名重写为对象中的BEM。我这样做是为了能够在整个应用程序中集中管理它们。没有该功能，它是这样的：

const foo = {
  bar: `${MAGICTHIS}-bar`,
}

console.log(foo.bar); //foo-bar

因为我想隔离使用情况，所以将它们分隔在不同的对象中。我想优化它，因为我会做很多事情。这就是为什么我要编写一个“ bemmify”功能。所以我可以这样做：

export const button = {
  btn: 'button',
  btnSm: 'button--small',
  btn2: 'button--secondary',

export const alert = { 
  alert: 'alert',
  alertDanger: 'alert--danger',
//etc
}

并且具有与上述对象相同的结果。当然，我总是可以将'base'作为第一个参数（export const button = { btn: bemmify(), btnSm: bemmify('small'), btn2: bemmify('secondary'), export const alert = { alert: bemmify(), alertDanger: bemmify('danger'), //etc }）传递，但是我开始怀疑是否有可能让我的bemmify函数变得如此聪明，以至于它可以识别其所在对象的名称。

Answer 1

每当发现自己写的代码中变量名很重要时，通常应该使用变量名为键的对象。所以你应该有一个像这样的对象：

const bem_data = {
  button: {
    btn: 'button',
    btnSm: 'button--small',
    btn2: 'button--secondary',
  },
  alert: {
    alert: 'alert',
    alertDanger: 'alert--danger',
  }
}

然后您可以使用函数来创建每个元素：

function add_element(data, key, prefix, additional) {
  const obj = {
    [prefix]: key
  };
  Object.entries(additional).forEach(([
    keySuffix,
    valSuffix
  ]) => obj[prefix + keySuffix] = `${key}--${valSuffix}`);
  data[key] = obj;
}

const bem_data = {};
add_element(bem_data, "button", "btn", {
  Sm: "small",
  "2": "secondary"
});
add_element(bem_data, "alert", "alert", {
  Danger: "danger"
});

console.log(bem_data);

然后您导出bem_data并使用bem_data.button，bem_data.alert等。

对象本身内的引用对象变量名称

1 个答案: