Question

概述

我正在开发一个基于Wordpress的网站，允许访问者在页面上的几个不同位置上传图像。我（在经过大量的试验和错误之后）得到了一些有效的代码但是，因为代码只是在每个上传＆＃39;之间略有不同。我试图让它以“插件”的形式重复使用。

我的背景

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

问题的历史（请跳过此部分以查看以下代码）

我以为我会包含一些历史记录，这样我就不会对X-Y Problem犯规。我在网页上有4个地方，访问者可以上传到该网站。其中3个是图片上传，应该允许访问者也“剪切”＃39;图片。我使用jQuery插件plupload和jcrop来提供功能。

最初，我尝试编写代码的方式是页面在执行时包含DOM中的相关代码。为了在同一页面上有多个plupload实例，我创建了一个＆＃34;动态变量＆＃34;然后调用这样的代码...

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

这有点（时尚），但我发现如果代码在DOM中，那么它不会被浏览器缓存。所以我接着为每个上传区域设置一个单独的js文件并且包括＆＃39;他们并通过以下方式传递相关变量：

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

然而，我很快就意识到，如果我可以通过＆＃39;不同的变量到同一个文件我只能制作一组代码，并且（例如）传递一个名为＆＃34; allowCropping＆＃34;的变量。这将启用/禁用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="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 -->

假设将这一切都包含在一个＆＃39;插件中。是要走的路。我该怎么做呢？我希望能够将变量传递到插件中，包括几个DOM元素（即我想将插件传递给保存需要裁剪的图像的div，保存图像预览的div，div保存当前上传的图像等）。加上其他变量，例如是否允许＆＃39;裁剪＆＃39;或不。

感谢您的帮助。

Answer 1

你需要创建一个新的JS文件（这将是你的插件）这需要的代码是

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

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

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

<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);
 });

PS：请参阅第205页的JQuery动作第二版

参考简单的jquery插件编写：jquery plugin example

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

1 个答案: