js封装常用的函数

获取当前页面url中请求参数

	getUrlParam: function () {
        // let search = top.location.search;
        let search = location.search;
        let _str = search && decodeURIComponent(search.replace(/^\?/, ''));
        let _arr = !_str ? [] : _str.split('&'),
            param = {};
        _arr.forEach(function (item) {
            let key = item.split('=')[0];
            let val = item.split('=')[1];
            param[key] = val;
        });

        return param;
    },

拼接url和参数(json)

	jointUrl: function (url, obj) {
        let rangeArr = [];
        if (obj && typeof obj === 'object') {
            if (rangeArr.length == 0) {
                rangeArr.push(url)
            }

            /\?/g.test(url) ? rangeArr.push('&') : rangeArr.push('?');

            for (let i in obj) {
                if (obj.hasOwnProperty(i)) {
                    // if(obj[i] !== ''){   //导致数据不能修改为空
                    rangeArr.push(i)
                    rangeArr.push('=')
                    rangeArr.push(obj[i])
                    rangeArr.push('&')
                    // }
                }
            }

            return rangeArr.join('').replace(/&$/, '')
        } else {
            return url;
        }
    },

vue中http请求(get)

get: function (url, callback) {
        if (!url) return toast.show('没有请求URL');
        url = this.jointUrl(url, {
            _: (new Date()).getTime()
        });

        Vue.http.get(url)
            .then(function (response) {
                let result = response.data;
                if (0 === result.ret) {
                    callback && callback(result);
                } else {
                    toast.show('接口错误:[ret:' + result.ret + '] ' + result.msg);
                }
            }, function (response) {
                toast.show('服务器错误:[status:' + response.status + '] ' + response.statusText);
            });
    },

原生中http请求(get)

	httpGet(url, data, header = {}, timeout = 30000) {
        return new Promise((resolve, reject) => {
            if (!url) reject(new Error("缺少url"))
            url = this.jointUrl(url, data)
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.withCredentials = true;
            xmlhttp.open('GET', url, true);
            for (let i in header) {
                xmlhttp.setRequestHeader(i, header[i]);
            }
            xmlhttp.timeout = timeout;
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4) {
                    if (xmlhttp.status == 504) {
                        reject(new Error("服务器请求超时.."))
                        xmlhttp.abort();
                    } else if (xmlhttp.status == 200) {
                        resolve(xmlhttp.responseText);
                    } else {
                        reject(new Error("AJAX请求失败"))
                    }
                    xmlhttp = null;
                }
            }
            xmlhttp.ontimeout = function () {
                reject(new Error("客户端请求超时.."))
            }
            xmlhttp.send(data);
        })
    }

原生http请求(jsonp)

 httpJson(url, data, cbFunName, cbKey = "callback") {
        return new Promise((resolve, reject) => {
            if (!url) reject(new Error("缺少url"))
            //生成回调函数名称
            cbFunName = typeof cbFunName === "string" ? cbFunName : ('_jsonp' + Math.random()).replace(".", "");

            //组装数据和url地址
            data = typeof data === "object" ? data : {}
            data[cbKey] = cbFunName;
            url = this.jointUrl(url, data)

            //组装script标签,并插入头部
            var dom = document.createElement('script');
            dom.src = url
            var head = document.getElementsByTagName('head')[0]
            head.appendChild(dom);

            //移除script标签并执行回调
            window[cbFunName] = function (data) {
                head.removeChild(dom);
                resolve(data);
            };
        })
    },

vue中http请求(jsonp)

	jsonp: function (url, callback) {
        if (!url) return toast.show('URL 有误');
        url = this.jointUrl(url, {
            _: (new Date()).getTime()
        });

        Vue.http.jsonp(url)
            .then(function (response) {
                let result = response.data;
                callback && callback(result);
            }, function (response) {
                toast.show('服务器错误:[status:' + response.status + '] ' + response.statusText);
            });
    },

原生ajax的POST方式请求

	originalPost2: function (url, data, successCallback, failCallback, contentType) {
        var xmlhttp = null;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        }
        xmlhttp.open("POST", url, true);
        if (contentType) {
            xmlhttp.setRequestHeader('Content-Type', contentType);
        }
        xmlhttp.timeout = 30000;
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 504) {
                    console.log("服务器请求超时..");
                    typeof failCallback == 'function' && failCallback()
                    xmlhttp.abort();
                } else if (xmlhttp.status == 200) {
                    typeof successCallback == 'function' && successCallback(xmlhttp.responseText)
                } else {
                    console.log("服务器请求失败,状态值:" + xmlhttp.status);
                    typeof failCallback == 'function' && failCallback()
                }
                xmlhttp = null;
            }
        }
        xmlhttp.ontimeout = function () {
            console.log("客户端请求超时..");
            typeof failCallback == 'function' && failCallback()
        }
        xmlhttp.send(data);
    },

获取时间(不传参数以当前时间返回)

	getFormatDate: function (fmt = 'yyyy-MM-dd hh:mm:ss', time = new Date()) {
        var o = {
            "M+": time.getMonth() + 1, //月份
            "d+": time.getDate(), //日
            "h+": time.getHours(), //小时
            "m+": time.getMinutes(), //分
            "s+": time.getSeconds(), //秒
            "q+": Math.floor((time.getMonth() + 3) / 3), //季度
            "S": time.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (time.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    },

cookie相关函数

	getCookie: function (name) {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg))
            return (arr[2]);
        else
            return null;
    },
    setCookie: function (c_name, value, expiredays) {
        var exdate = new Date();
        exdate.setDate(exdate.getDate() + expiredays);
        document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
    },
    delCookie: function (name) {
        var exp = new Date();
        exp.setTime(exp.getTime() - 1);
        var cval = this.getCookie(name);
        if (cval != null)
            document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
    },

获取图片尺寸(根据file)

	getImageSize: function (file) {
        return new Promise(function (resolve, reject) {            
            let image = new Image();
            image.onload = function () {
                let width = image.width;
                let height = image.height;
                resolve({
                    width: width,
                    height: height,
                });
            }
            image.onerror = function (e) {
                reject('获取图片宽高失败')
            }
            image.src = window.URL.createObjectURL(new Blob([file], {type: file.type}));
        });
    },

获取图片尺寸(根据url)

	getImageSizeByUrl: function (url) {
        return new Promise(function (resolve, reject) {
            let img = new Image();
            img.src = url + '?_=' + Date.parse(new Date());
            var check = function () {
                if (img.width > 0 && img.height > 0) {
                    clearInterval(set);
                    resolve({
                        width: img.width,
                        height: img.height,
                    });
                }
            }
            var set = setInterval(check, 50);
        });
    },

fetch请求

	promiseFetchData: function (url) {
        return new Promise(resolve => {
            fetch(url).then(res => {
                if (res.ok) {
                    res.json().then(data => {
                        if (data.code == 200) {
                            resolve(data.data);
                        } else {
                            resolve(ERROR);
                        }
                    });
                } else {
                    resolve(ERROR);
                }
            }, err => {
                resolve(ERROR);
            })
        });
    },

获取字符串长度(单字符算1,其他算2)

	getNickLen: function (str) {
        var len = 0;
        for (var i = 0; i < str.length; i++) {
            var c = str.charCodeAt(i);
            //单字节加1   
            if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
                len++;
            }
            else {
                len += 2;
            }
        }
        return len;
    }

除法安全运算

	accDiv(num1, num2) {
        var t1, t2, r1, r2;
        try {
            t1 = num1.toString().split('.')[1].length;
        } catch (e) {
            t1 = 0;
        }
        try {
            t2 = num2.toString().split(".")[1].length;
        } catch (e) {
            t2 = 0;
        }
        r1 = Number(num1.toString().replace(".", ""));
        r2 = Number(num2.toString().replace(".", ""));
        return (r1 / r2) * Math.pow(10, t2 - t1);
    }

乘法安全运算

	accMul(num1, num2) {
        var m = 0, s1 = num1.toString(), s2 = num2.toString();
        try { m += s1.split(".")[1].length } catch (e) { };
        try { m += s2.split(".")[1].length } catch (e) { };
        return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
    }

验证特殊字符

noSpecialCharacter(tip='不允许有特殊字符', regexp) {
    return function (rule, value, callback) {
        return new Promise((resolve, reject)=> {
            let  reg = regexp || /[&%\*\(\)【】~`:$]/
            if (reg.test(value)) {
                 reject(new Error(tip));
            } else {
                resolve()
            }
        })
    }
}
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 好的,那我们可以用一个名为 "util" 的对象来封装这些函数,例如: ``` const util = { add: function(a, b) { return a + b; }, subtract: function(a, b) { return a - b; }, multiply: function(a, b) { return a * b; }, divide: function(a, b) { return a / b; } }; ``` 然后你就可以通过访问 "util.add(a, b)" 来使用加法函数了。你也可以继续往这个对象里添加其他常用函数。 需要注意的是,以上代码假设你使用的是 ES6 语法,如果你使用的是 ES5 语法,你需要把 "function" 换成 "var"。 ### 回答2: 封装一个常用的JavaScript函数集合是为了提高开发效率和代码的重用性。这个函数集合可以包含各种常用的功能函数,例如: 1. 获取URL参数值:可以封装一个函数,通过传入参数名,返回对应的URL参数值。比如,可以使用window.location.search获取URL参数字符串,然后再使用正则表达式或其他方法找到对应的参数值。 2. 时间格式化:封装一个函数,将时间对象转换为指定格式的字符串。比如,可以使用Date对象的方法获取年月日、时分秒等信息,然后根据需要进行格式化输出。 3. 随机数生成:可以封装一个函数,生成指定范围内的随机整数或随机浮点数。比如,可以使用Math.random函数生成0到1之间的随机数,然后根据需要进行相应的运算转换。 4. 数组元素查找:可以封装一个函数,根据指定条件在数组中查找元素,并返回符合条件的元素或索引值。比如可以使用Array的filter方法根据判定函数找到满足条件的元素。 5. 数据类型判断:可以封装一个函数,判断变量的数据类型并返回相应的字符串表示。比如,可以使用typeof运算符判断基本数据类型,使用Array.isArray判断数组类型,使用Object.prototype.toString判断复杂数据类型。 6. 字符串截取:可以封装一个函数,对字符串进行截取操作,根据指定参数截取指定长度的字符串,同时提供省略号等处理方式。 7. 表单验证:可以封装一些常用的表单验证函数,例如验证邮箱、手机号码、用户名等。这些函数可以使用正则表达式或其他验证方式进行验证,以提高代码的可读性和可维护性。 以上只是一些常见的封装函数示例,实际的常用函数集合可以根据具体需求进行扩展和定制。 ### 回答3: 常用的JavaScript函数集合可以提供一组常见功能的封装,以便在开发过程中更便捷地调用这些函数。下面是一个封装了一些常用功能的常用JavaScript函数集合例子: 1. 获取URL参数:这个函数可以从URL中获取指定参数的值并返回。可以通过传递参数名来获取不同的参数值。 2. 格式化日期:这个函数可以将日期对象或日期字符串格式化为指定的日期格式。可以通过参数来指定所需的日期格式。 3. 判断空值:这个函数可以判断一个变量是否为空(包括未定义、null、空字符串等),返回true或false。 4. 随机数生成:这个函数可以生成一定范围内的随机数,可以通过传递参数指定范围。 5. 数组去重:这个函数可以对数组进行去重操作,并返回去重后的数组。 6. 节流函数:这个函数可以控制函数的频率,在指定的时间间隔内只执行一次。 7. 深度拷贝对象:这个函数可以实现深度拷贝一个对象,返回一个拷贝后的新对象。 8. 字符串截取:这个函数可以截取指定长度的字符串,并在结尾添加省略号。 9. 图片预加载:这个函数可以实现图片的预加载,防止图片未加载完全时导致页面闪烁。 10. 防抖函数:这个函数可以控制函数的执行频率,在指定的时间间隔内,只有最后一次触发才执行。 这些是常用的JavaScript函数集合的一些例子,通过封装这些功能,可以使开发过程更高效、便捷。可以根据需要自定义封装适合自己的常用功能函数集合。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值