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>