要点：
1、理清自己的思路，你要做什么的步骤
2、你的操作需要用到jquery的哪些方法
3、页面需要引入jquery包，和你自己插件的包
步骤：
1、插件的包装
编写一个jQuery插件开始于给jQuery.fn加入新的功能属性，此处添加的对象属性的名称就是你插件的名称：
为了避免和其他JavaScript库冲突，我们最好将jQuery传递给一个自我执行的封闭程序，jQuery在此程序中映射为符号，这样可以避免$号被其他库覆写。
. 代码如下:
;(function ($) {
$.fn.myPlugin = function () {
//你自己的插件代码
};
})(jQuery);
2、环境
现在，我们可以开始编写实际的插件代码。 但是，在这之前，我们必须得对插件所处的环境有个概念。 在插件的范围里， this关键字代表了这个插件将要执行的jQuery对象， 这里容易产生一个普遍的误区，因为在其他包含callback的jQuery函数中，this关键字代表了原生的DOM元素。这常常会导致开发者误将this关键字无谓的包在jQuery中，如下所示。
. 代码如下:
?
1
2
3
4
5
6
7
8
9
10
(function ($) {
$.fn.myPlugin = 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封装插件
猜你喜欢
转载自www.cnblogs.com/zhangfu/p/10336675.html
今日推荐
周排行