概述
我正在开发一个基于 Wordpress 的网站,允许访问者在页面上的几个不同位置上传图像。我(经过大量的试验和错误)得到了一些工作代码,但是,由于每个“上传”区域之间的代码仅略有不同,我考虑尝试使其以“插件”的形式重复使用。
我的背景
我是一名自学成才的程序员,所以我很容易犯很多错误,并且以完全不合逻辑的方式做事,而且在一行代码就足够的情况下编写了一千行代码。
问题的历史记录(请跳过本节以查看下面的代码)
我想我应该包括一些历史,这样我就不会违反X-Y Problem 。我的网页上有 4 个位置可供访问者上传到网站。其中 3 个是图像上传,允许访问者“裁剪”图像。我正在使用 jQuery 插件 plupload和 jcrop为了提供功能。
最初,我尝试以页面在执行时在 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="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;"> </div>
</div> <!-- @end #mainCropDivID -->
假设将这一切都封装在一个“插件”中是可行的方法。我该怎么做呢?我希望能够将变量传递到插件中,包括几个 DOM 元素(即我想将保存需要裁剪的图像的 div 、保存图像预览的 div 、div )传递给插件保存当前上传的图像等)。加上其他变量,例如是否允许“裁剪”。
感谢您的帮助。
最佳答案
您需要创建一个新的 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:请引用《JQuery in action 第二版》第 205 页
简单的jquery插件写法引用:jquery plugin example
关于javascript - 如何将这个常用的 javascript 代码变成一个插件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25928807/