要點：

1、理清自己的思路，你要做什麽的步驟

2、你的操作需要用到jquery的哪些方法

3、頁面需要引入jquery包，和你自己插件的包

步驟：

1、插件的包裝

編寫一個jQuery插件開始於給jQuery.fn加入??新的功能屬性，此處添加的對象屬性的名稱就是你插件的名稱：

為了避免和其他JavaScript庫沖突，我們最好將jQuery傳遞給一個自我執行的封閉程序，jQuery在此程序中映射為符號，這樣可以避免$號被其他庫覆寫。

. 代碼如下:

;(function ($) {
$.fn.m??yPlugin = function () {
//你自己的插件代碼
};
})(jQuery);

2、環境

現在，我們可以開始編寫實際的插件代碼。 但是，在這之前，我們必須得對插件所處的環境有個概念。 在插件的範圍裏， this關鍵字代表了這個插件將要執行的jQuery對象， 這裏容易產生一個普遍的誤區，因為在其他包含callback的jQuery函數中，this關鍵字代表了原生的DOM元素。這常常會導致開發者誤將this關鍵字無謂的包在jQuery中，如下所示。

. 代碼如下:
?
1
2
3
4
5
6
7
8
9
10

(function ($) {
$.fn.m??yPlugin = function () {
//此處沒有必要將this包在$號中如$(this)，因為this已經是一個jQuery對象。
//$(this)等同於 $($(‘#element‘));
this.fadeIn(‘normal‘, function () {
//此處callback函數中this關鍵字代表一個DOM元素
});
};
})(jQuery);
$(‘#element‘).myPlugin();

3、默認值和選項

對於比較復雜的和提供了許多選項可定制的的插件，最好有一個當插件被調用的時候可以被拓展的默認設置(通過使用$.extend)。 因此，相對於調用一個有大量參數的插件，你可以調用一個對象參數，包含你了你想覆寫的設置。

. 代碼如下:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

(function ($) {
$.fn.tooltip = function (options) {
var opts;
//創建一些默認值，拓展任何被提供的選項

//創建一些需要用到的參數,這裏可以根據自己需要的參數多做擴展,

//這裏我只添加一些本人需要用到的公共參數，當然也可以有回調函數

var defaluts = {
location: ‘top‘,
background-color: ‘blue‘
};
opts = $.extend({},defaluts, options); //使用jQuery.extend 覆蓋插件默認參數

return this.each(function () {
// Tooltip插件代碼
});
};
})(jQuery);
$(‘div‘).tooltip({
‘location‘: ‘left‘
});

在這個例子中，調用tooltip插件時覆寫了默認設置中的location選項，background-color選項保持默認值，所以最終被調用的設定值為：

. 代碼如下:
?
1
2
3
4

{
‘location‘: ‘left‘,
‘background-color‘: ‘blue‘
}

這是一個很靈活的方式，提供一個高度可配置的插件，而無需開發人員定義所有可用的選項
4、插件裏面可以有多個自定義方法

在任何情況下，一個單獨的插件不應該在jQuery.fnjQuery.fn對象裏有多個命名空間。

. 代碼如下:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14

(function ($) {
$.fn.tooltip = function (options) {
// this
};
$.fn.tooltipShow = function () {
// is
};
$.fn.tooltipHide = function () {
// bad
};
$.fn.tooltipUpdate = function (content) {
// !!!
};
})(jQuery);

這是不被鼓勵的，因為它.fn使.fn命名空間混亂。 為了解決這個問題，你應該收集對象文本中的所有插件的方法，通過傳遞該方法的字符串名稱給插件以調用它們。

. 代碼如下:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

(function ($) {
var methods = {
init: function (options) {
// this
},
show: function () {
// is
},
hide: function () {
// good
},
update: function (content) {
// !!!
}
};
$.fn.tooltip = function (method) {
// 方法調用
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === ‘object‘ || !method) {
return methods.init.apply(this, arguments);
} else {
$.error(‘Method‘ + method + ‘does not exist on jQuery.tooltip‘);
}
};
})(jQuery);
//調用init方法
$(‘div‘).tooltip();
//調用init方法
$(‘div‘).tooltip({
foo: ‘bar‘
});
// 調用hide方法
$(‘div‘).tooltip(‘hide‘);
//調用Update方法
$(‘div‘).tooltip(‘update‘, ‘This is the new tooltip content!‘);


最後加一個自己在項目中用到的上傳圖片之前做壓縮處理的案例，第一次寫，可能有不好的地方，哈哈

;(function ($) {
$.fn.fileUpload = function (options) {
var $this = $(this);
var opts;
//初始化
function init(){
//默認參數
//創建一些需要用到的參數,這裏可以根據自己需要的參數多做擴展,這裏我只添加一些本人需要用到的公共參數
var defaluts = {
url: ‘‘,//上傳路勁
fileObj: $this[0].files[0],//文件對象
success:function(){},//成功回調
error: function(){}//失敗回調
};
opts = $.extend({},defaluts, options); //使用jQuery.extend 覆蓋插件默認參數
}
//返回值
var xhr = null;
this.on(‘change‘, function () {
//初始化
init();
// 上傳文件方法
var form = new FormData(); // FormData 對象
if (opts.fileObj.size / 1024 > 1025) { //大於1M，進行壓縮上傳
photoCompress(opts.fileObj, {
quality: 0.2
}, function (base64Codes) {
//console.log("壓縮後：" + base.length / 1024 + " " + base);
var bl = convertBase64UrlToBlob(base64Codes);
form.append("file", bl, "file_" + Date.parse(new Date()) + ".jpg"); // 文件對象
xhr = new XMLHttpRequest(); // XMLHttpRequest 對象
xhr.open("post", opts.url, true); //post方式，url為服務器請求地址，true 該參數規定請求是否異步處理。
xhr.onload = opts.success; //請求b 完成
xhr.onerror = opts.error; //請求失敗
xhr.upload.onloadstart = function () {//上傳開始執行方法
ot = new Date().getTime(); //設置上傳開始時間
oloaded = 0;//設置上傳開始時，以上傳的文件大小為0
};
xhr.send(form); //開始上傳，發送form數據
});
} else { //小於等於1M 原圖上傳
form.append("file", opts.fileObj); // 文件對象
xhr = new XMLHttpRequest(); // XMLHttpRequest 對象
xhr.open("post", opts.url, true); //post方式，url為服務器請求地址，true 該參數規定請求是否異步處理。
xhr.onload = opts.success; //請求完成
xhr.onerror = opts.error; //請求失敗

xhr.upload.onloadstart = function () {//上傳開始執行方法
ot = new Date().getTime(); //設置上傳開始時間
oloaded = 0;//設置上傳開始時，以上傳的文件大小為0
};
xhr.send(form); //開始上傳，發送form數據
}
/*
三個參數
file：一個是文件(類型是圖片格式)，
w：一個是文件壓縮的後寬度，寬度越小，字節越小
objDiv：一個是容器或者回調函數
photoCompress()
*/
function photoCompress(file, w, objDiv) {
var ready = new FileReader();
/*開始讀取指定的Blob對象或File對象中的內容. 當讀取操作完成時,readyState屬性的值會成為DONE,如果設置了onloadend事件處理程序,則調用之.同時,result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內容.*/
ready.readAsDataURL(file);
ready.onload = function () {
var re = this.result;
canvasDataURL(re, w, objDiv)
}
}
function canvasDataURL(path, obj, callback) {
var img = new Image();
img.src = path;
img.onload = function () {
var that = this;
// 默認按比例壓縮
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默認圖片質量為0.7
//生成canvas
var canvas = document.createElement(‘canvas‘);
var ctx = canvas.getContext(‘2d‘);
// 創建屬性節點
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 圖像質量
if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
quality = obj.quality;
}
// quality值越小，所繪制出的圖像越模糊
var base64 = canvas.toDataURL(‘image/jpeg‘, quality);
// 回調函數返回base64的值
callback(base64);
}
}
/**
* 將以base64的圖片url數據轉換為Blob
* @param urlData
* 用url方式表示的base64圖片數據
*/
function convertBase64UrlToBlob(urlData) {
var arr = urlData.split(‘,‘), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type: mime});
}
});
}
})(jQuery);

$(‘#licensePic‘).fileUpload(
{
url: ctx+"/auth/imageUpload",
success: function(evt){
//成功響應
$.hideLoading();
var data = JSON.parse(evt.target.responseText);
if(data.status==0) {
$("#photo1").attr("value",data.data.filePath)
$("#photo1").attr("src",ctx+"/auth/show/"+data.data.filePath+"/2")
}else{
// mui.alert(data.describe);
alert(data.describe);
}
},
error: function(evt) {
//失敗響應
// mui.alert("上傳失敗");
alert("上傳失敗");
}
}
);

jquery封裝插件