如何将这个常用的javascript代码转换为插件？

概观

我正在开发一个基于Wordpress的网站，允许访问者在页面上的几个不同位置上传图像。 我（经过大量的试验和错误）获得了一些工作代码但是，由于代码在每个“上传”区域之间只略有不同，我考虑尝试以“插件”的forms使其可重复使用。

我的背景

我是一个自学成才的程序员，所以我容易犯很多错误，并且以完全不合逻辑的方式做事情，另外当一行代码足够时，还要编写一千行代码。

问题的历史（请跳过本节以查看下面的代码）

我想我会包含一些历史记录，这样我就不会违背XY问题 。 我在网页上有4个地方，访问者可以上传到该网站。 其中3个是图片上传，应该允许访问者“裁剪”图像。 我正在使用jQuery插件plupload和jcrop来提供function。

最初，我试图以一种方式编写代码，使得页面在执行时包含DOM中的相关代码。 为了在同一页面上有多个plupload实例，我创建了一个“动态变量”，然后调用这样的代码……

var dynamicPartOfVar = "imageUploadAreaOne"; imageManipulationObject["imageUploader"+dynamicPartOfVar] = new plupload.Uploader(plupload_init); 

这工作（时尚）但我发现，如果代码在DOM中，那么它不会被浏览器缓存。 所以我接着为每个上传区域设置一个单独的js文件并“包含”它们并传递相关变量：

 wp_localize_script("imageUploadAreaOne", "inputVar", $relevantVariableArray); wp_enqueue_script("imageUploadAreaOne"); 

但是，我很快意识到，如果我可以将不同的变量“传递”到同一个文件中，我可以只生成一组代码，并且（例如）传递一个名为“allowCropping”的变量，该变量将启用/禁用jCrop等。

问题

我有代码如（只是一个例子）：

 var isAdmin = inputVar.isAdmin; var notAdmin = inputVar.notAdmin; var thisUser = inputVar.thisUser; var ajaxurl = inputVar.ajaxurl; imageManipulationObject["imageUploader"+dynamicPartOfVar] = new plupload.Uploader(plupload_init); imageManipulationObject["ProgressLoader"+dynamicPartOfVar] = $('#ProgressLoader'+dynamicPartOfVar).percentageLoader({width: 170, height: 170, progress:0.0}); /* **************************** */ // HIDE CROPPING DIV WHEN USER SELECTS A DIFFERENT IMAGE /* **************************** */ $('.imageSelection').on('click', function() { closeCropWindow(); }); $('.imageThumb').on('click', function() { closeCropWindow(); }); 

HTML示例

 <div id="mainCropDivIDdynamicPartOfVar; ?>"> 
 <div id="innerCropDivIDdynamicPartOfVar; ?>" class="innerCropDiv"> <img class="croppingImage" id="croppingImageIDdynamicPartOfVar; ?>" alt="Cropping Image" src=""/> 
 <form id="cropimgdynamicPartOfVar; ?>" name="cropimg" method="post" action=""> <input type="hidden" id="x_dynamicPartOfVar; ?>" name="x"> <input type="hidden" id="y_dynamicPartOfVar; ?>" name="y"> <input type="hidden" id="w_dynamicPartOfVar; ?>" name="w"> <input type="hidden" id="h_dynamicPartOfVar; ?>" name="h"> <input type="hidden" name="typeOfImage" value="typeOfImage; ?>"> <input type="hidden" id="imageIDtoCropdynamicPartOfVar; ?>" name="imageIDtoCrop" value=""> <input id="performCropButtondynamicPartOfVar; ?>" type="submit" value="Crop Image">