javascript - 如何在 Javascript 中的函数之间共享变量？

Question

我的应用程序中有许多不同的 Javascript 函数，它们共享相同的变量和功能。如何简化这些？我是否必须创建一个我的函数继承自的类，还是有更简单或更好的选择？

function CreditCard() {

  const tag = document.querySelector('meta[name=stripe-publishable-key]');

  if (!tag) {
    return;
  }

  const key = tag.getAttribute('content');
  const stripe = Stripe(key);

  const form = document.querySelector('#credit_card_form');

  if (!form) {
    return;
  }

  const name = document.querySelector('#name');
  const email = document.querySelector('#email');

  const spinner = document.querySelector('#spinner');

  const fontName = document.querySelector('#server_side_constants').getAttribute('data-font-name');
  const fontColor = document.querySelector('#server_side_constants').getAttribute('data-font-color');
  const fontSource = document.querySelector('#server_side_constants').getAttribute('data-font-source');
  const locale = document.querySelector('html').getAttribute('lang');

  const errorMessage = document.querySelector('#stripe_error_message');
  const clientSecret = document.querySelector('#client_secret');
  const submitButton = document.querySelector('input[type=submit]');

  const elements = stripe.elements({
    fonts: [{
      family: fontName,
      src: fontSource
    }],
    locale: locale
  });

  const style = {
    base: {
      fontFamily: fontName,
      color: fontColor
    }
  };

  ...

}

---

function DirectDebit() {

  const tag = document.querySelector('meta[name=stripe-publishable-key]');

  if (!tag) {
    return;
  }

  const key = tag.getAttribute('content');
  const stripe = Stripe(key);

  const form = document.querySelector('#direct_debit_form');

  if (!form) {
    return;
  }

  const name = document.querySelector('#name');
  const email = document.querySelector('#email');

  const spinner = document.querySelector('#spinner');

  const fontName = document.querySelector('#server_side_constants').getAttribute('data-font-name');
  const fontColor = document.querySelector('#server_side_constants').getAttribute('data-font-color');
  const fontSource = document.querySelector('#server_side_constants').getAttribute('data-font-source');
  const country = document.querySelector('#server_side_constants').getAttribute('data-country');
  const locale = document.querySelector('html').getAttribute('lang');

  const errorMessage = document.querySelector('#stripe_error_message');
  const clientSecret = document.querySelector('#client_secret');
  const submitButton = document.querySelector('input[type=submit]');

  const elements = stripe.elements({
    fonts: [{
      family: fontName,
      src: fontSource
    }],
    locale: locale
  });

  const style = {
    base: {
      fontFamily: fontName,
      color: fontColor
    }
  };

  ...

}

标签： javascript