首页 > 代码库 > 前端最实用、全面的工具类方法

前端最实用、全面的工具类方法

2024-08-29 18:32:58   220人阅读

1、为什么要做这件事
我个人最近总是觉得，写前台代码都是大量的抄袭，而且每次抄袭的地方都是来自不同的项目，敲代码的时间往往小于找代码的时间；
微信小程序更加加重了前端js在编程中的分量，学好，做好总结是很有必要的；
精良消除代码的冗余；
分享是一件，众乐乐的事；

2、怎么做这件事
从大量程序中挑选出最常用的js方法汇总；
网上找出常用的方法，收集；
分成大类进行汇总;

3、主要大类

查询类（ajax请求，表单请求）

校验类（正则表达式,日期，查重）

数据转换处理类（日期类，字符串类）

加密解密类（base64）


4、现在就开始总结

 

一、查询类（ajax请求，表单请求）

ajax请求：

requestJsonRs : function(url, param, async, callback) {
        if (!param) {
            param = {}
        }
        var jsonObj = null;
        $.ajax({
            type : "post",
            dataType : "html",
            url : url,
            data : param,
            async : (async ? async : false),
            success : function(data) {
                try {
                    jsonObj = eval("(" + data + ")")
                } catch (e) {
                    jsonObj = null
                }
                if (callback) {
                    callback(jsonObj)
                }
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                jsonObj = {
                    rtMsg : "Ajax Request Error"
                }
            },
            timeout : 30000
        });
        return jsonObj
    }

二、校验类（正则表达式,日期，查重）

//检查手机号
function checkMobile(str) {
 var Str=document.getElementById(str).value;
 RegularExp=/^[0-9]{11}$/
 if (RegularExp.test(Str)) {
  return true;
 }
 else {
  alert("手机号格式不正确！应该为11位长度的数字！");
  return false;
 }
}

 

三、数据转换处理类（日期类，字符串类）

字符串转换为json格式：

strToJson : function(str) {
        var json = eval("(" + str + ")");
        return json
    }

表单转换为Json格式：

formToJson : function(c, b) {
        var a = {};
        if (!b) {
            $(c).find("input[name][disabled!=disabled]").each(function(d, e) {
                a[$(e).attr("name")] = $(e).val()
            });
            $(c).find("input[name][type=hidden][disabled!=disabled]").each(
                    function(d, e) {
                        a[$(e).attr("name")] = $(e).val()
                    });
            $(c).find("textarea[name][disabled!=disabled]").each(
                    function(d, e) {
                        a[$(e).attr("name")] = $(e).val()
                    });
            $(c).find("select[name][disabled!=disabled]").each(function(d, e) {
                a[$(e).attr("name")] = $(e).val()
            });
            $(c).find("input[name][type=checkbox][disabled!=disabled]").each(
                    function(d, e) {
                        if ($(e).attr("checked")) {
                            a[$(e).attr("name")] = 1
                        } else {
                            a[$(e).attr("name")] = 0
                        }
                    });
            $(c).find("input[name][type=radio][disabled!=disabled]:checked")
                    .each(function(d, e) {
                        a[$(e).attr("name")] = $(e).val()
                    });
            $(c).find("input[name][type=password][disabled!=disabled]").each(
                    function(d, e) {
                        a[$(e).attr("name")] = $(e).val()
                    })
        } else {
            $(c).find("input[name]").each(function(d, e) {
                a[$(e).attr("name")] = $(e).val()
            });
            $(c).find("input[name][type=hidden]").each(function(d, e) {
                a[$(e).attr("name")] = $(e).val()
            });
            $(c).find("textarea[name]").each(function(d, e) {
                a[$(e).attr("name")] = $(e).val()
            });
            $(c).find("select[name]").each(function(d, e) {
                a[$(e).attr("name")] = $(e).val()
            });
            $(c).find("input[name][type=checkbox]").each(function(d, e) {
                if ($(e).attr("checked")) {
                    a[$(e).attr("name")] = 1
                } else {
                    a[$(e).attr("name")] = 0
                }
            });
            $(c).find("input[name][type=radio]:checked").each(function(d, e) {
                a[$(e).attr("name")] = $(e).val()
            });
            $(c).find("input[name][type=password]").each(function(d, e) {
                a[$(e).attr("name")] = $(e).val()
            })
        }
        return a
    }

四、加密解密类（base64）

Base64位加密

明确几个概念：
//charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数

//fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。

encode64 : function(d) {
        d = strUnicode2Ansi(d);
        var b = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
        var a = "";
        var l, j, g = "";
        var k, h, f, e = "";
        var c = 0;
        do {
            l = d.charCodeAt(c++);
            j = d.charCodeAt(c++);
            g = d.charCodeAt(c++);
            k = l >> 2;
            h = ((l & 3) << 4) | (j >> 4);
            f = ((j & 15) << 2) | (g >> 6);
            e = g & 63;
            if (isNaN(j)) {
                f = e = 64
            } else {
                if (isNaN(g)) {
                    e = 64
                }
            }
            a = a + b.charAt(k) + b.charAt(h) + b.charAt(f) + b.charAt(e);
            l = j = g = "";
            k = h = f = e = ""
        } while (c < d.length);
        return a
    }

    function strUnicode2Ansi(g) {
        var c = g.length;
        var a = "";
        for (var d = 0; d < c; d++) {
            var f = g.charCodeAt(d);
            if (f < 0) {
                f += 65536
            }
            if (f > 127) {
                f = UnicodeToAnsi(f)
            }
            if (f > 255) {
                var b = f & 65280;
                b = b >> 8;
                var e = f & 255;
                a += String.fromCharCode(b) + String.fromCharCode(e)
            } else {
                a += String.fromCharCode(f)
            }
        }
        return a
    }

//强制把大写转换成小写

function toLowCase(){
 if(event.keyCode>=65 && event.keyCode<=90)
  event.keyCode=event.keyCode+32;
}

//将小数四舍五入
//decimalNum 为：保留小数点后几位

function roundFloat(str, decimalNum) {
    var sourceValue=http://www.mamicode.com/document.getElementById(str).value;
 if (isNaN(sourceValue)) {
     alert("sourceValue非法字符 ");
     document.getElementById(str).value="";
  return sourceValue;
 }
 var multiplyValue=http://www.mamicode.com/Math.pow(10,parseInt(decimalNum));
 document.getElementById(str).value=(Math.round(multiplyValue*sourceValue))/multiplyValue;
 return (Math.round(multiplyValue*sourceValue))/multiplyValue;
}

 

前端最实用、全面的工具类方法


联系
我们