美文网首页
前端最实用、全面的工具类方法

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

作者: 丁白一 | 来源:发表于2016-12-28 16:00 被阅读0次

    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=document.getElementById(str).value;
     if (isNaN(sourceValue)) {
         alert("sourceValue非法字符 ");
         document.getElementById(str).value="";
      return sourceValue;
     }
     var multiplyValue=Math.pow(10,parseInt(decimalNum));
     document.getElementById(str).value=(Math.round(multiplyValue*sourceValue))/multiplyValue;
     return (Math.round(multiplyValue*sourceValue))/multiplyValue;
    }
    

    相关文章

      网友评论

          本文标题:前端最实用、全面的工具类方法

          本文链接:https://www.haomeiwen.com/subject/pqzcvttx.html