我是如何编写一个js插件的

编写插件的目的

• 更好的复用
• 方便维护
• 支持配置

插件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_ 原型也是一个对象，通过原型可以实现对象的属性和方法继承