第三步：写一个基本的jQuery插件
让我们开始写一个基本的jQuery插件吧，在写之前，如果读者你从未有写jQuery插件的经历，建议先看看官方给出的插件教程（http://docs.jquery.com/Plugins/Authoring），这个是英文版的，中文版的没找的，写者打算翻译，敬请期待。
打开/resources/js/imageCrop/jquery.imagecrop.js，并且加入如下图所示的js代码
//一般情况下请将所写的插件代码包含在‘(function($) { // 插件代码在这里 }) (jQuery);’
(function($) {
$.imageCrop = function(object, customOptions) {};
$.fn.imageCrop = function (customOptions) {
//Iterate over each object
//对每一个对象进行迭代
this.each(function () {
var currentObject = this,
image = new Image();
//当对象加载完毕时，给予附加上imageCrop剪切的功能
image.onload = function () {
$.imageCrop(currentObject, customOptions);
};
//重设图片的地址，因为有时被缓存的图像不能被很快的加载
image.src = currentObject.src;
});
//除非你的插件返回一个确定的值，那么通常情况下要求函数返回‘this’关键字
//以此来保持编程的链式化
return this;
};
}) (jQuery);
我们刚刚扩展了jQuery，通过在jQuery.fn这个对象上新添加一个方法属性。现在我们完成了对每一个对象进行迭代并当其加载完毕时为其附上imageCrop功能的基本插件。注意到被缓存的图片可能不会被很快的下载，所以重置了它的图片地址。
第四步：加入可定制的选择
通过可以定制的选择，使得对用户来说有了更多的选择以及使插件更加具有灵活性。（备注：以下代码均按照顺序来的）
//将插件的选项封装在一个常量对象中，远远好于传递一长串参数来传递。
//这样使得可以在插件默认的情况下进行扩展
var defaultOptions = {
allowMove: true,
allowResize: true,
allowSelect: true,
minSelect: [0, 0],
outlineOpacity: 0.5,
overlayOpacity: 0.5,
selectionPosition: [0, 0],
selectionWidth: 0,
selectionHeight: 0
};
// 将选项设为默认选项
var options = defaultOptions;
// 然后将其和客户定制的选项合并
setOptions(customOptions);
以上我们通过定义一个包含默认选项的数组，然后通过使用setOption函数来实现将默认选项和定制选项进行合并。现在让我们来写这个合并函数体
// 将默认选项和客户定制的选项合并
function setOptions(customOptions) {
options = $.extend(options, customOptions);
};
$.extend()函数实现了将两个或者多个对象合并到第一个对象中的功能。
选项
下面的列表解释了插件中的每一个选项
allowMove – 指定选择区是否可以移动（默认的值是true.）
allowResize – 指定选择区是否可以被重新指定大小（默认的值是true）
