Javascript 如何使jQuery代码最优化？

我正在寻找如何简化jQuery代码并避免重复的帮助。我知道它可以通过OOP实现，但我没有足够的知识来正确地做到这一点。有没有办法避免身体重复（'click'）

这是我的JavaScript代码：（已更新）

---

我使用属性选择器“合并”类似的函数

它没有经过测试，但应该可以工作

jQuery( document ).ready( function($) {

  /* WordPress Media Uploader
  -------------------------------------------------------*/
  var imgSign = "";
  var attachment;

  mediaUploader.on('select', function() {
    attachment = mediaUploader.state().get('selection').first().toJSON();
    console.log(attachment);
    $('.deo-'+imgSign+'-hidden-input').val(attachment.url);
    $('.deo-'+imgSign+'-media').attr('src', attachment.url);
  });

  // Image or signature click
  $('body').on('click', '[class*="-upload-button"]', function(e) {
    e.preventDefault();

    $(this).hasClass("deo-image-upload-button") ? imgSign = "image" : imgSign = "signature";

    if ( mediaUploader ) {
      mediaUploader.open();
    }

    // Empty attachements.
    attachment = "";
    var mediaUploader = wp.media.frames.file_frame = wp.media({
      title: 'Select an Image',
      button: {
        text: 'Use This Image'
      },
      multiple: false
    });



    mediaUploader.open();
  });

  // Image or signature delete
  $('body').on('click', '[class*="-delete-button"]', function(e) {
    $(this).hasClass("deo-image-delete-button") ? imgSign = "image" : imgSign = "signature";
    $('.deo-'+imgSign+'-hidden-input').val('');
    $('.deo-'+imgSign+'-media').attr('src', '');
  });

});

---

我不知道关于

mediaUploader.open（）。。。经常调用它真的有用吗？
我使用属性选择器“合并”类似的函数

它没有经过测试，但应该可以工作

jQuery( document ).ready( function($) {

  /* WordPress Media Uploader
  -------------------------------------------------------*/
  var imgSign = "";
  var attachment;

  mediaUploader.on('select', function() {
    attachment = mediaUploader.state().get('selection').first().toJSON();
    console.log(attachment);
    $('.deo-'+imgSign+'-hidden-input').val(attachment.url);
    $('.deo-'+imgSign+'-media').attr('src', attachment.url);
  });

  // Image or signature click
  $('body').on('click', '[class*="-upload-button"]', function(e) {
    e.preventDefault();

    $(this).hasClass("deo-image-upload-button") ? imgSign = "image" : imgSign = "signature";

    if ( mediaUploader ) {
      mediaUploader.open();
    }

    // Empty attachements.
    attachment = "";
    var mediaUploader = wp.media.frames.file_frame = wp.media({
      title: 'Select an Image',
      button: {
        text: 'Use This Image'
      },
      multiple: false
    });



    mediaUploader.open();
  });

  // Image or signature delete
  $('body').on('click', '[class*="-delete-button"]', function(e) {
    $(this).hasClass("deo-image-delete-button") ? imgSign = "image" : imgSign = "signature";
    $('.deo-'+imgSign+'-hidden-input').val('');
    $('.deo-'+imgSign+'-media').attr('src', '');
  });

});

我不知道关于
mediaUploader.open（）。。。经常这么叫真的有用吗？
您可以将这样的点击事件最小化

 $('body').on('click', '.deo-image-upload-button, .deo-signature-upload-button, .deo-image-delete-button, .deo-signature-delete-button', function() {
    if ($(this).hasClass('deo-image-upload-button')) {
      upload('image');
    } else if ($(this).hasClass('deo-signature-upload-button')) {
      upload('signature');
    } else if ($(this).hasClass('deo-image-delete-button')) {
      $('.deo-image-hidden-input').val('');
      $('.deo-image-media').attr('src', '');
    } else if ($(this).hasClass('deo-signature-delete-button')) {
      $('.deo-signature-hidden-input').val('');
      $('.deo-signature-media').attr('src', '');
    }
  }); 

下面是一个供您测试的方法
您可以最小化这样的点击事件

 $('body').on('click', '.deo-image-upload-button, .deo-signature-upload-button, .deo-image-delete-button, .deo-signature-delete-button', function() {
    if ($(this).hasClass('deo-image-upload-button')) {
      upload('image');
    } else if ($(this).hasClass('deo-signature-upload-button')) {
      upload('signature');
    } else if ($(this).hasClass('deo-image-delete-button')) {
      $('.deo-image-hidden-input').val('');
      $('.deo-image-media').attr('src', '');
    } else if ($(this).hasClass('deo-signature-delete-button')) {
      $('.deo-signature-hidden-input').val('');
      $('.deo-signature-media').attr('src', '');
    }
  }); 

下面是一个供您测试的函数，如
函数上载（type）
，并使用
upload（'image'）
或
upload（'signature'）
调用，根据需要将其连接到类中。谢谢：）我已经更新了我的代码，有没有办法改进$（'body'）。在（'click'）重复上？创建一个函数，像
函数上传（type）
和调用
upload（'image'）
或
upload（'signature'）
，根据需要将其连接到类中。谢谢：）我已经更新了我的代码，有没有办法改进$（'body'）。关于（'click'）重复？谢谢。但我在控制台Uncaught SyntaxError中有错误：意外令牌。可能是因为WordPress正在使用jQuery1.4.1.mmm。。。我想这是我的错。。。我删除了三元运算符上的
if
和括号。这实际上是可行的，但问题是每次单击“上载”按钮，它都会在附件变量中创建越来越多的对象：），所以第一次使用它；它是一个对象，单击5次后，它是5个对象。每次单击按钮并选择图像时，请检查上面的“我的更新代码”以存储1个对象。这就是WordPress的工作原理：）好的。。。然后，
var mediahuploader
块应该返回到upload click处理程序中。我把它弄出来了，首先，因为这个处理程序在每次点击时都会被覆盖。。。我教的没用…；）另一种方法是不使用click处理程序，只清空
attachement
变量。。。试试看。我又编辑了一遍，谢谢。但我在控制台Uncaught SyntaxError中有错误：意外令牌。可能是因为WordPress正在使用jQuery1.4.1.mmm。。。我想这是我的错。。。我删除了三元运算符上的
if
和括号。这实际上是可行的，但问题是每次单击“上载”按钮，它都会在附件变量中创建越来越多的对象：），所以第一次使用它；它是一个对象，单击5次后，它是5个对象。每次单击按钮并选择图像时，请检查上面的“我的更新代码”以存储1个对象。这就是WordPress的工作原理：）好的。。。然后，
var mediahuploader
块应该返回到upload click处理程序中。我把它弄出来了，首先，因为这个处理程序在每次点击时都会被覆盖。。。我教的没用…；）另一种方法是不使用click处理程序，只清空
attachement
变量。。。试试看。我再次编辑。它正在工作：）不知道可以传递这么多类以单击事件：）乐于帮助：）它正在工作：）不知道可以传递这么多类以单击事件：）乐于帮助：）