どのようにjsプラグインを作成しましたか?

7734 ワード

プラグインを作成する目的
  • より良い多重化
  • 便利なメンテナンス
  • サポート構成
  • プラグイン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/' //     
            };
            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);