编写插件的目的
- 更好的复用
- 方便维护
- 支持配置
插件1.0
;(function (global) {
//上传配置
var config = {
getTokenUrl: "//xxx.xxx.com/api/Active/qintoken?bucket=wnlother", //获取token接口地址
qiniuUpUrl: "//xxx.qiniup.com/putb64/-1", //上传的七牛服务器地址
imgUrlDomain: 'https://xxx.xxx.com/' // 图片域名
};
//定义上传方法
function uploadQN(img, resolve) {
var xhr = new XMLHttpRequest();
xhr.open('GET', config.getTokenUrl, true);
xhr.onreadystatechange = function() {
// readyState == 4说明请求已完成
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
// 从服务器获得数据
var res = JSON.parse(xhr.responseText);
var xhr2 = new XMLHttpRequest();
xhr2.open('POST', config.qiniuUpUrl, true);
xhr2.setRequestHeader('Content-Type', 'application/octet-stream');
xhr2.setRequestHeader('Authorization', 'UpToken ' + res.token);
xhr2.send(img.substring(23));
xhr2.onreadystatechange = function() {
if (xhr2.readyState === 4) {
var resData = JSON.parse(xhr2.responseText);
console.log(resData.key);
var remoteImg = config.imgUrlDomain + resData.key;
resolve(remoteImg);
}
};
}
};
xhr.send();
};
//兼容CommonJs规范
if (typeof module !== "undefined" && module.exports) {
module.exports = uploadQN;
}
//兼容AMD/CMD规范
if (typeof define === "function")
define(function () {
return uploadQN;
});
//注册全局变量,兼容直接使用script标签引入插件
global.uploadQN = uploadQN;
})(window);
//调用方法
uploadQN(imgdata, (res) => {
//do something
});
特点:
- 即插即用
- 不支持配置
插件2.0
;(function (global) {
//定义上传方法
function UploadQN(img, options) {
var config = {
getTokenUrl: "//xxx.xxx.com/api/Active/qintoken?bucket=wnlother", //获取token接口地址
qiniuUpUrl: "//xxx.qiniup.com/putb64/-1", //上传的七牛服务器地址
imgUrlDomain: 'https://xxx.xxx.com/', // 图片域名
success: function(res) {}
};
if (!(this instanceof UploadQN)) {
console.log(0);
return new UploadQN(img, options);
}
// options = options || config;
// 合并参数
for (var k in options) {
if (options.hasOwnProperty (k)) {
config [k] = options [k];
}
}
console.log(config);
// 1.获取token
var xhr = new XMLHttpRequest();
xhr.open('GET', config.getTokenUrl, true);
xhr.onreadystatechange = function() {
// readyState == 4说明请求已完成
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
// 从服务器获得数据
var res = JSON.parse(xhr.responseText);
// 2.上传七牛
var xhr2 = new XMLHttpRequest();
xhr2.open('POST', config.qiniuUpUrl, true);
xhr2.setRequestHeader('Content-Type', 'application/octet-stream');
xhr2.setRequestHeader('Authorization', 'UpToken ' + res.token);
xhr2.send(img.substring(23));
xhr2.onreadystatechange = function() {
if (xhr2.readyState === 4) {
var resData = JSON.parse(xhr2.responseText);
console.log(resData.key);
var remoteImg = config.imgUrlDomain + resData.key;
// 3.执行回调
config.success && config.success(remoteImg);
}
};
}
};
xhr.send();
};
//兼容CommonJs规范
if (typeof module !== "undefined" && module.exports) {
module.exports = UploadQN;
}
//兼容AMD/CMD规范
if (typeof define === "function")
define(function () {
return UploadQN;
});
//注册全局变量,兼容直接使用script标签引入插件
global.UploadQN = UploadQN;
})(window);
//调用方法
UploadQN(imgdata, {
imgUrlDomain: 'https://other.image.cq-wnl.com/',
success: (res) => {
console.log(res);
}
});
或
var loader = new UploadQN(imgdata, {
imgUrlDomain: 'https://other.image.cq-wnl.com/',
success: (res) => {
console.log(res);
}
});
特点:
- 支持实例化
- 支持配置
- 没有api,结构不清晰
插件3.0
/* eslint-disable */
;(function (global) {
//定义上传方法
function UploadQN(img, options) {
this.img = img;
this.config = {
getTokenUrl: "//xxx.xxx.com/api/Active/qintoken?bucket=wnlother", //获取token接口地址
qiniuUpUrl: "//xxx.qiniup.com/putb64/-1", //上传的七牛服务器地址
imgUrlDomain: 'https://xxx.xxx.com/', // 图片域名
success: function(res){}
};
if (!(this instanceof UploadQN)) {
console.log(0);
return new UploadQN(img, options);
}
// options = options || this.config;
// 合并参数
for (var k in options) {
if (options.hasOwnProperty (k)) {
this.config [k] = options [k];
}
}
console.log(this.config);
this.init();
};
UploadQN.prototype = {
init: function() {
this.getToken();
},
getToken: function() {
var that = this;
var xhr = new XMLHttpRequest();
xhr.open('GET', that.config.getTokenUrl, true);
xhr.onreadystatechange = function() {
// readyState == 4说明请求已完成
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
// 从服务器获得数据
var res = JSON.parse(xhr.responseText);
that.upload(res);
}
};
xhr.send();
},
upload: function(res) {
var that = this;
var xhr2 = new XMLHttpRequest();
xhr2.open('POST', that.config.qiniuUpUrl, true);
xhr2.setRequestHeader('Content-Type', 'application/octet-stream');
xhr2.setRequestHeader('Authorization', 'UpToken ' + res.token);
xhr2.send(that.img.substring(23));
xhr2.onreadystatechange = function() {
if (xhr2.readyState === 4) {
var resData = JSON.parse(xhr2.responseText);
console.log(resData.key);
var remoteImg = that.config.imgUrlDomain + resData.key;
// 3.执行回调
that.config.success(remoteImg);
}
};
}
};
//兼容CommonJs规范
if (typeof module !== "undefined" && module.exports) {
module.exports = UploadQN;
}
//兼容AMD/CMD规范
if (typeof define === "function")
define(function () {
return UploadQN;
});
//注册全局变量,兼容直接使用script标签引入插件
global.UploadQN = UploadQN;
})(window);
//调用方法
UploadQN(imgdata, {
imgUrlDomain: 'https://other.image.cq-wnl.com/',
success: (res) => {
console.log(res);
}
});
或
var loader = new UploadQN(imgdata, {
imgUrlDomain: 'https://other.image.cq-wnl.com/',
success: (res) => {
console.log(res);
}
});
特点:
- 面向对象
- 结构清晰
- *
知识点
Obj.hasOwnProperty()
判断对象是否具有指定的属性instanceof
用于检测构造函数的 prototype
属性是否出现在某个实例对象的原型链_prototype_
原型也是一个对象,通过原型可以实现对象的属性和方法继承
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。