JavaScript慢而不干

Question

我在这里使用这个JavaScript代码来处理不同的结账框，通过我的页面上的Stripe。我的代码似乎减慢了我的页面速度。当我单击按钮时，打开“结帐”框需要3-5秒。我在这里用的东西看上去也不干。您有更好的方法来缩短这段代码吗？

<script>
    var handler = StripeCheckout.configure({
      key: '{{ stripe_pub_key }}',
      image: '{% static "img/payment/paul.jpg" %}',
      locale: 'auto',
      allowRememberMe: false,
      zipCode: true,
      token: function(token) {
        $('#stripeToken').val(token.id);
        $('#stripeEmail').val(token.email);
        $('#paymentForm').submit();
      }
    });

    $('#buyCourseButton1').click(function(e) {
      // Open Checkout with further options:
      handler.open({
        name: 'Brand You',
        description: 'by Paul S.',
        currency: 'eur',
        amount: '4900'
      });
      $('#coursePackage').val('package_1');
      e.preventDefault();
    });

    $('#buyCourseButton2').click(function(e) {
      // Open Checkout with further options:
      handler.open({
        name: 'Brand You',
        description: 'by Paul S.',
        currency: 'eur',
        amount: '9900'
      });
      $('#coursePackage').val('package_2');
      e.preventDefault();
    });

    $('#buyCourseButton3').click(function(e) {
      // Open Checkout with further options:
      handler.open({
        name: 'Brand You',
        description: 'by Paul S.',
        currency: 'eur',
        amount: '79900'
      });
      $('#coursePackage').val('package_3');
      e.preventDefault();
    });

    // Close Checkout on page navigation:
    window.addEventListener('popstate', function() {
      handler.close();
    });
  </script>

Answer 1

下面是一个快速重构，它将单击处理程序生成移动到帮助函数(courseClickHandler)：

<script>
    var handler = StripeCheckout.configure({
      key: '{{ stripe_pub_key }}',
      image: '{% static "img/payment/paul.jpg" %}',
      locale: 'auto',
      allowRememberMe: false,
      zipCode: true,
      token: function(token) {
        $('#stripeToken').val(token.id);
        $('#stripeEmail').val(token.email);
        $('#paymentForm').submit();
      }
    });

    // create a new click event handler for the given course package,
    // and the given amount
    var courseClickHandler = (amount, coursePackage) => {
      return e => {
        // Open Checkout with further options:
        handler.open({
          name: 'Brand You',
          description: 'by Paul S.',
          currency: 'eur',
          amount: amount
        });
        $('#coursePackage').val(coursePackage);
        e.preventDefault();
      }
    }

    $('#buyCourseButton1').click(courseClickHandler("4900", "package_1"));

    $('#buyCourseButton2').click(courseClickHandler("9900", "package_2"));

    $('#buyCourseButton3').click(courseClickHandler("79900", "package_3"));

    // Close Checkout on page navigation:
    window.addEventListener('popstate', function() {
      handler.close();
    });
  </script>