Javascript 如何使代码在jQuery中可重用？

在我的WordPress项目中，我一次又一次地在我的许多字段中使用以下代码，其中我使用按钮启动WordPress媒体上传程序，并在选择文件时将其路径/url发送到文本字段

var project_field_image_uploader;

$('#button-input').click( function(e) {
        e.preventDefault();

        //if the uploader object has already been created, reopen the dialog
        if( project_field_image_uploader ) {
            project_field_image_uploader.open();
            return;
        }

        //extend the wp.media object
        project_field_image_uploader = wp.media.frames.file_frame = wp.media( {
            title:"Choose an image",
            button:{
                text: "Insert"
            },
            multiple: false
        } );

        //when a file is selected, grab the URL and set it as the text field's value
        project_field_image_uploader.on( 'select', function() {
            attachment = project_field_image_uploader.state().get('selection').first().toJSON();
            $('#text-field').val(attachment.url);
        });

    //Open the uploader dialog
    project_field_image_uploader.open();

});

对于每个字段，我需要编辑以下内容：

第一个变量-

project\u field\u image\u uploader

（它不一定有意义，它只用于创建不同的实例，因此以可重用的方式，它可以是任何东西，但不冲突）

按钮ID-

$（“#按钮输入”）

文本字段的ID-

$（“#文本字段”）

媒体库Modal的标题—

标题：“选择图像”，

媒体库的媒体插入按钮的文本-

文本：“插入”

有没有一种方法可以使这段代码可重用，这样我就可以使用

DRY

思想？jQuery函数可以帮我完成这项工作，但我无法排序，如何排序这项工作。

<script>
$(function(){
    $('#button-input').click(function(e){
        var text_field = $('#text-field');
        ....................
        var mytext = 'my text';

        myfunc(e,project_field_image_uploader,text_field,mytitle,mytext);
    });
   //reuse with any other button click with different parameters

});
function myfunc(e,project_field_image_uploader,text_field,mytitle,mytext){

   e.preventDefault();

    //if the uploader object has already been created, reopen the dialog
    if( project_field_image_uploader ) {
        project_field_image_uploader.open();
        return;
    }

    //extend the wp.media object
    project_field_image_uploader = wp.media.frames.file_frame = wp.media( {
        title:mytitle,
        button:{
            text: mytext
        },
        multiple: false
    } );

    //when a file is selected, grab the URL and set it as the text field's value
    project_field_image_uploader.on( 'select', function() {
        attachment = project_field_image_uploader.state().get('selection').first().toJSON();
        text_field.val(attachment.url);
    });

//Open the uploader dialog
project_field_image_uploader.open();
}
</script>

$（函数（）{
$（“#按钮输入”）。单击（函数（e）{
var text_field=$（“#text field”）；
....................
var mytext='我的文本'；
myfunc（e，项目\字段\图像\上传器，文本\字段，mytitle，mytext）；
});
//使用不同的参数与任何其他按钮单击一起重复使用
});
函数myfunc（e，项目\字段\图像\上传器，文本\字段，我的标题，我的文本）{
e、 预防默认值（）；
//如果已创建uploader对象，请重新打开该对话框
if（项目\字段\图像\上传器）{
project_field_image_uploader.open（）；
返回；
}
//扩展wp.media对象
项目\字段\图像\上传器=wp.media.frames.file\帧=wp.media（{
标题：我的标题，
按钮：{
文本：mytext
},
多重：假
} );
//选择文件后，抓取URL并将其设置为文本字段的值
项目\字段\图像\上传器.on（'select'，function（））{
附件=project\u field\u image\u uploader.state（）.get（'selection'）.first（）.toJSON（）；
text_field.val（attachment.url）；
});
//打开uploader对话框
project_field_image_uploader.open（）；
}

感谢@alamnaryab的回答，他为我指明了正确的方向（+1）。但将变量作为函数参数传递是有问题的。它会产生一个错误：

未定义项目\字段\图像\上传程序

我发现，变量不需要作为函数参数传递就可以唯一，因为函数中的变量是局部变量。因此，我只是在函数内部调用变量，并多次重用该函数。我在这里发布工作示例代码

声明多个变量时，我使用逗号和单个

var

声明。没有必要重复这些事情。再次感谢阿拉姆·纳里亚布先生

<script>
$(function(){
    $('#button-input').click(function(e){
        var text_field = $('#text-field'),
            media_lib_head = 'Choose an image',
            btn_text = 'Insert';

        //using the function where necessary
        project_reusable_repeating_func( e, text_field, media_lib_head, btn_text );
    });
});

/**
 * Reusable function
 * @author alamnaryab
 * @link http://stackoverflow.com/a/32035149/1743124
 */
function project_reusable_repeating_func( e, text_field, media_lib_head, btn_text ){

    //a variable that need not to be unique, because it's local
    var project_field_image_uploader;

    e.preventDefault();

    //if the uploader object has already been created, reopen the dialog
    if( project_field_image_uploader ) {
        project_field_image_uploader.open();
        return;
    }

    //extend the wp.media object
    project_field_image_uploader = wp.media.frames.file_frame = wp.media( {
        title: media_lib_head,
        button:{
            text: btn_text
        },
        multiple: false
    } );

    //when a file is selected, grab the URL and set it as the text field's value
    project_field_image_uploader.on( 'select', function() {
        attachment = project_field_image_uploader.state().get('selection').first().toJSON();
        text_field.val(attachment.url);
    });

    //Open the uploader dialog
    project_field_image_uploader.open();
}
</script>

$（函数（）{
$（“#按钮输入”）。单击（函数（e）{
var text_field=$（“#text field”），
媒体库头='选择图像'，
btn_text='插入'；
//必要时使用该函数
项目重复功能（e，文本字段，媒体库头，btn文本）；
});
});
/**
*可重用函数
*@作者alamnaryab
*@linkhttp://stackoverflow.com/a/32035149/1743124
*/
功能项目\u可重用\u重复\u功能（e、文本字段、媒体库头、btn\u文本）{
//一个不需要唯一的变量，因为它是局部变量
var项目\字段\图像\上传器；
e、 预防默认值（）；
//如果已创建uploader对象，请重新打开该对话框
if（项目\字段\图像\上传器）{
project_field_image_uploader.open（）；
返回；
}
//扩展wp.media对象
项目\字段\图像\上传器=wp.media.frames.file\帧=wp.media（{
标题：媒体负责人，
按钮：{
文本：btn_文本
},
多重：假
} );
//选择文件后，抓取URL并将其设置为文本字段的值
项目\字段\图像\上传器.on（'select'，function（））{
附件=project\u field\u image\u uploader.state（）.get（'selection'）.first（）.toJSON（）；
text_field.val（attachment.url）；
});
//打开uploader对话框
project_field_image_uploader.open（）；
}

挑战在于：如何将变量作为变量传递。您的代码在单击时产生错误：

project\u field\u image\u uploader

未定义。与您的文本相同\u field&mytext已发送