js对表单序列化、MD5加密、AES加解密、cookie操作的、websocket等常用工具的整合

在平时写代码中，一些工具会经常用到，但是我每次要用时都是到处去找依赖文件或者重新写方法，这样很麻烦于是为了方便我将一些常用的工具类写在一个js文件中，之后使用直接引入文件就可以了，这里我也拿出来分享给大家。

批注：这个工具类中并不完全是本人原创，大部分都是我对其他人代码结构的一些修改，少部分是我自己写的，还望各位大佬勿喷。

# 表单序列化为json对象

注意：要使用这个方法需之前引用jQuery依赖包！！！

测试代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>工具测试</title>
	<link rel="stylesheet" href="">
</head>
<body>
	<form id="testForm" accept-charset="utf-8"><br>
		姓名：<input type="text" name="username"><br>
		密码：<input type="password" name="password"><br>
		性别：<input type="radio" name="sex">男    <input type="radio" name="sex">女<br>
		爱好：
		<input type="checkbox" name="hobby" value="乒乓球">乒乓球
		<input type="checkbox" name="hobby" value="羽毛球">羽毛球
		<input type="checkbox" name="hobby" value="篮球">篮球
		<input type="checkbox" name="hobby" value="排球">排球
		<br>
	</form>
	<button onclick="formTest()">提交</button>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="tzutil.min.js"></script>
	<script>
		function formTest(){
			console.log($('#testForm').serializeJson());
		}
	</script>
</body>
</html>

测试截图：

本工具类的好处：

如果用jQuery自带的serialize或者serializeArray方法的话在实际运用中并不是那么方便，给大家看一下这两个方法获取的结果：

serialize() ：

可以看到这就是普通的form表单，并且对其中的中文进行了utf-8转码，在实际开发中大多数都是用的json格式进行前后台交互，如果用这种方法就不是那么方便了。

serializeArray() ：

这一个方法是将表单序列化成一个数组，有多少个键值对就返回多少个数组，这一个相对于serialize方法来说运用起来更容易得多，但是个人觉得还是没有json对象来的方便，特别是对于表单内的同一个name，json格式可以将其归并成一个数组，在那种很大的表单中使用就更加方便了，用哪个我觉得还是看个人情况吧。

# MD5加密

测试代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>工具测试</title>
	<link rel="stylesheet" href="">
</head>
<body>

	请输入你要加密的字符串<input type="text" id="text"><br><br>
	加密后的结果：<textarea id="md5Code"></textarea><br>
	<button onclick="md5Test()">加密</button>

	<script src="jquery-3.3.1.min.js"></script>
	<script src="tzutil.js"></script>
	<script>
		function md5Test(){
			var text = $('#text').val();
			// new一个md5工具对象
			var md5 = new md5Util();

			// 调用md5工具中的hex_md5方法
			// text为你将要加密的内容
			// 返回加密后的密文
			$('#md5Code').val(md5.hex_md5(text));
		}
	</script>
</body>
</html>

测试结果：

使用方法：

先new一个md5Util对象，如果不new的话会调用失败，new了之后再调用其中的hex_md5方法，我在整合的时候将算法结构改过，并且对原创文件进行了删减，如果想要使用全部md5加密方法可以到我的github下载：https://github.com/tzfun/util/blob/master/src/js/MD5/md5.js

# cookie工具类

测试代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>工具测试</title>
	<link rel="stylesheet" href="">
</head>
<body>
	
	<button onclick="setCookie()">添加cookie</button>
	<button onclick="getCookie()">获取cookie</button>
	<button onclick="delCookie()">删除cookie</button>
	<br>
	cookie名：<input type="text" id="cookiesName">
	cookie值：<input type="text" id="cookiesValue">
	<script src="jquery-3.3.1.min.js"></script>
	<script src="tzutil.js"></script>
	<script>
		// 先new一个cookiesUtil对象
		var cookiesUtil = new cookiesUtil();

		function setCookie(){
            //调用cookiesUtil工具类中setCookie,存cookie
			cookiesUtil.setCookie('这是cookie名','这是cookie值','h1');
		}
		function delCookie(){
            //调用cookiesUtil工具类中delCookie,删除cookie
			cookiesUtil.delCookie('这是cookie名');
		}
		function getCookie(){
            //调用cookiesUtil工具类中getCookie取cookie中的值.
			var cookiesVal=cookiesUtil.getCookie('这是cookie名');
			$('#cookiesName').val('这是cookie名');
			$('#cookiesValue').val(cookiesVal);
		}
	</script>
</body>
</html>

测试截图：

使用方法：

使用该方法首先要new一个cookiesUtil对象，再调用其中的增删查方法。在添加cookie时注意：setCookie有三个参数必须填，setCookie(cookieName,cookieValue,time)，第一个是你要存的cookie的名称，在查询和删除时使用，如果重复存同一个名字，将会覆盖之前存的内容，第二个参数是cookie的值，第三个是cookie的有效时间，对于有效时间有一定格式，这是之前我参考一位博主写的博客里面的代码，时间格式要求如下：

时间格式为：时间关键字+值
时间关键字：
h——代表小时
d——代表天数
s——代表秒钟
关键字只能为小写！！！！

例如：
h5   代表有效时间为5小时
d46    代表有效时间为46天
s100    代表有效时间为100秒

# AES对称加解密

测试代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>工具测试</title>
    <link rel="stylesheet" href="">
</head>
<body>
<div style="position: relative;width: 60%;left:50%;margin-left: -30%;margin-top: 40px;">
    加密密码：<input type="text" id="encryptKey">
    <button onclick="encrypt()">加密</button>
    解密密码：<input type="text" id="decryptKey">
    <button onclick="decrypt()">解密</button>
    <br><br><br>
    明文：<textarea id="text" cols="100" rows="10"></textarea><br>
    密文: <textarea id="aesCode" cols="100" rows="10"></textarea>
</div>

<script src="jquery-3.3.1.min.js"></script>
<script src="tzutil.js"></script>
<script>
    // 先new一个cookiesUtil对象
    var AES = new aesUtil();
    //加密
    function encrypt() {
        // 获取到加密密钥
        var encryptKey = $('#encryptKey').val();
        // 获取到明文内容
        var text = $('#text').val();
        //进行加密，返回加密后的结果
        var encryptRes=AES.encrypt(text,encryptKey);

        $('#aesCode').val(encryptRes);
    }
    //解密
    function decrypt() {
        //获取密文
        var aseCode = $('#aesCode').val();
        // 获取解密秘钥
        var decryptKey = $('#decryptKey').val();
        // 进行解密，返回解密后的结果
        var decryptRes = AES.decrypt(aseCode,decryptKey);

        $('#text').val(decryptRes);
    }
</script>
</body>
</html>

测试截图：

使用说明：

我在网上找了很多js的AES加密方法，都没找到封装好了的成套方法，于是在官方算法的基础上进行了封装，将两个方法封装成对象就方便多了（我要吐槽一句：在封装的过程中真的感觉弱类型语言对象操作真的很方便，比java这种强类型语言好用多了）。

话不多说，使用方法：首先得new一个aesUtil对象

    // 先new一个cookiesUtil对象
    var AES = new aesUtil();

然后调用加解密方法，加密方法(返回密文)：

//plaintText是你将要加密的明文，key是秘钥，注意key必须是16位！！
encrypt(plaintText,key)

解密方法(返回明文)：

//encryptedData是密文数据，key是解密秘钥，注意key必须是16位！！
decrypt(encryptedData,key)

# webSocket工具类

测试代码：

var url = "ws://localhost:8080/socketTest/";
    var msg = "hello";
    // 先new一个mySocket对象
    var mySocket = new Web_Socket(url,msg);

    // 对socket环境测试,控制台显示测试结果，测试成功后会自动关闭连接，无需手动关闭
    mySocket.test();

    // 工作环境时调用work方法
    mySocket.work({
        //socket连接成功时的回调函数
        success:function (res) {
            console.log(res);
        },
        //socket连接失败的回调函数
        error:function (res) {
            console.log(res);
        }
    })
    
    //关闭socket连接
    mySocket.close();

方法说明：

这一方法是我在之前写的，当时用js连接socket就觉得很麻烦，就想着封装一下使用，经过测试是可用的。

老规矩先new一个对象，不过这一对象在创建时需要传入两个参数，url：socket后台连接地址；msg：socket握手信息（相当于一个连接密码）

    var url = "ws://localhost:8080/socketTest/";
    var msg = "hello";
    // 先new一个mySocket对象
    var mySocket = new Web_Socket(url,msg);

socket环境测试方法，测试结果会打印在控制台，连接成功后会自动关闭连接，无需手动close

 mySocket.test();

socket工作环境，有两个回调函数，success是成功时回调函数，error是失败时回调函数，该方法调用后需要手动关闭socket连接。

   // 工作环境时调用work方法
    mySocket.work({
        //socket连接成功时的回调函数
        success:function (res) {
            console.log(res);
        },
        //socket连接失败的回调函数
        error:function (res) {
            console.log(res);
        }
    })

最后就是关闭socket连接

    //关闭socket连接
    mySocket.close();

最后提供该工具包的地址：https://github.com/tzfun/util/blob/master/src/js/myutil/tzutil.min.js

测试项目包：https://github.com/tzfun/util/tree/master/src/js/myutil/utilTest

欢迎向我提出你宝贵的意见：[email protected]