jquery封裝插件

要點：

        一、理清本身的思路，你要作什麼的步驟

        二、你的操做須要用到jquery的哪些方法

        三、頁面須要引入jquery包，和你本身插件的包

步驟：

一、插件的包裝

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

爲了不和其餘JavaScript庫衝突，咱們最好將jQuery傳遞給一個自我執行的封閉程序，jQuery在此程序中映射爲符號，這樣能夠避免$號被其餘庫覆寫。

. 代碼以下:

;(function ($) {
$.fn.m​​yPlugin = function () {
//你本身的插件代碼
};
})(jQuery);

二、環境

如今，咱們能夠開始編寫實際的插件代碼。 可是，在這以前，咱們必須得對插件所處的環境有個概念。 在插件的範圍裏， 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();

三、默認值和選項

對於比較複雜的和提供了許多選項可定製的的插件，最好有一個當插件被調用的時候能夠被拓展的默認設置(經過使用$.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'
}

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

在任何狀況下，一個單獨的插件不該該在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("上傳失敗");
      }
   }
);