どのようにjsプラグインを作成しましたか?
7734 ワード
プラグインを作成する目的より良い多重化 便利なメンテナンス サポート構成 プラグイン1.0は、つまり、挿入用の です.は構成 をサポートしていません.
プラグイン2.0は、実用化をサポートしています. サポート構成 にはapiがありません.チェーンコールはサポートされていません.
プラグイン3.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);
}
});
特徴:プラグイン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/' //
};
this.resultImg = '';
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;
that.resultImg = remoteImg;
// 3.
// that.success();
// that.config.success && that.config.success(remoteImg);
}
};
},
success: function(cb) {
cb(this.resultImg);
return this;
}
};
// 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);