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

概述

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

我的背景

我是一个自学成才的程序员，所以我很容易犯很多错误，用完全不合逻辑的方式做事，再加上在一行就足够了的情况下编写上千行代码

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

我想我会加上一点历史，这样我就不会与历史相抵触了。我在网页上有4个地方，访问者可以上传到该网站。其中3个是图像上传，应该允许访问者“裁剪”图像。我正在使用jQuery插件，并且为了提供功能

最初，我试图以这样一种方式编写代码：页面在执行时在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等

问题

我有这样的代码（只是一个示例）：

HTML示例

<div id="mainCropDivID<?php echo $this->dynamicPartOfVar; ?>">
    <div class="outerCropDiv">

    <div id="innerCropDivID<?php echo $this->dynamicPartOfVar; ?>" class="innerCropDiv">
    <img class="croppingImage" id="croppingImageID<?php echo $this->dynamicPartOfVar; ?>" alt="Cropping Image" src="<?php echo $currentURL; ?>"/>

    <div class="JTcentreDiv">
    <form id="cropimg<?php echo $this->dynamicPartOfVar; ?>" name="cropimg" method="post" action="<?php echo $getPartOfURL; ?>">
    <input type="hidden" id="x_<?php echo $this->dynamicPartOfVar; ?>" name="x">
    <input type="hidden" id="y_<?php echo $this->dynamicPartOfVar; ?>" name="y">
    <input type="hidden" id="w_<?php echo $this->dynamicPartOfVar; ?>" name="w">
    <input type="hidden" id="h_<?php echo $this->dynamicPartOfVar; ?>" name="h">
    <input type="hidden" name="typeOfImage" value="<?php echo $this->typeOfImage; ?>">
    <input type="hidden" id="imageIDtoCrop<?php echo $this->dynamicPartOfVar; ?>" name="imageIDtoCrop" value="">

    <input id="performCropButton<?php echo $this->dynamicPartOfVar; ?>" type="submit" value="Crop Image">
    </form>
    </div>

    </div><!-- @end #innerCropDivID -->  
    </div><!-- @end .outerCropDiv --> 
    <div style="clear:both;">&nbsp;</div>   

</div> <!-- @end #mainCropDivID --> 

---

您需要创建一个新的JS文件（它将成为您的插件）
这需要一段代码

(function ($) {
$.fn.myFunctionPlugin= function (options) {
var defaults = {
    };
    var settings = $.extend(true, {}, defaults, options);
}

function dosomthing()
{
//CODE HERE
}
} (jQuery));

在页面上添加对插件的引用（与添加对jquery或任何其他第三方js的引用的方式相同）



在同一页上添加另一个脚本段

<script type="text/javascript">
$(function() {
    var options = {actionToPerform:"...",//This may be a controller action performed
 idcalss="....." //Class of the item on the view you want to pass in}

 $('.someclass').jsFunction(options);
 });


$（函数（）{
var options={actionToPerform:“…”，//这可能是执行的控制器操作
idcalss=“…”//要传入的视图上的项的类}
$（'.someclass'）.jsFunction（选项）；
});

注：请参阅第205页的《JQuery在行动》第二版

参考一个简单的jquery插件：那么你想把插件绑定到主图像元素？html结构看起来如何（预览、上传div等）？@Johan我添加了一些html的示例。绘制所需的元素都在单独的函数中。例如，绘制“打开裁剪”窗口按钮的功能，仅当“裁剪”功能可用时才需要该按钮。希望对您有所帮助。如果你需要更多的信息，请告诉我。嗨，杰克，谢谢你的回答。我正在努力了解如何链接$（'.someclass'.jsFunction（选项）页面上的函数调用到$.fn.myFunctionPlugin？它怎么知道myFunctionPlugin在哪里？如果我在这里遗漏了一些明显的东西，很抱歉。谢谢。因为你已经在你想使用它的页面中添加了对你的插件的引用。基本上，当你想使用它时，它和jquery是一样的。你把对jquery的引用放在页面上，然后编写java脚本代码包括jquery函数。因此，用插件替换jquery以了解其工作原理。如果您使用jquery的源文件，然后执行一个小的js函数来更改颜色，那么就很容易了。实际上，您应该使用
$.fn.extend（{myFunctionPlugin'：function（）{[…]}）；
或
$.fn.prototype.myFunctionPlugin=function（）{[…]}
。这种方式可行，但这一种更为正确。我是否正确地认为可以从插件内调用其他插件（即，我可以使用plupload/jcrop等，但在插件封装内使用相同的插件？）但是，当您使用JQuery时，您已经在这样做了，但是如果它是您为应用程序编写的插件，那么这将是一个非常糟糕的编码，请参考可靠的原则
<script src="...Reference" type="text/javascript"></script>

<script type="text/javascript">
$(function() {
    var options = {actionToPerform:"...",//This may be a controller action performed
 idcalss="....." //Class of the item on the view you want to pass in}

 $('.someclass').jsFunction(options);
 });