javascript - 如何在多个函数中返回相同的变量

Question

如何返回__plugin里面add和css没有return __plugin的功能在他们里面。我可以使用更高阶的函数吗？一切都按预期工作，但我想知道并可能重构此代码。

我不想写return __plugin每次只有一次。

const $ = (el) => {
  let _plugin = {};
  const element = document.querySelector.bind(document);
  const css = (style) => {
    Object.assign(element(el).style, style)
    return _plugin;
  }
  const add = (c) => {
    element(el).classList.add(c)
    return _plugin;
  }
  _plugin = { add, css }
  return  _plugin
}

谢谢。

Answer 1

您可以创建一个高阶函数来包装 _plugin 对象中的每个函数，这将使您的所有函数都可链接。

const chainable = (obj) => {
  for (const key in obj) {
    const func = obj[key];
    if (typeof func === 'function') {
      obj[key] = function () {
        const val = func.apply(this, arguments);
        return val === undefined ? this : val;
      };
    }
  }
  return obj;
};

const $ = (el) => {
  const element = document.querySelector(el);
  const css = (style) => {
    Object.assign(element.style, style);
  };
  const add = (c) => {
    element.classList.add(c);
  };
  return chainable({ add, css });
};

/* Testing code */

$('#test')
  .add('testClass')
  .css({ 'background-color': 'black' });

.testClass { color: red; }

<div id="test">Testing</div>