jquery封装插件

Posted 2021-02-06 zhangfu

要点：

        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("上传失败");
      }
   }
);