在平时写代码中，一些工具会经常用到，但是我每次要用时都是到处去找依赖文件或者重新写方法，这样很麻烦于是为了方便我将一些常用的工具类写在一个js文件中，之后使用直接引入文件就可以了，这里我也拿出来分享给大家。
批注：这个工具类中并不完全是本人原创，大部分都是我对其他人代码结构的一些修改，少部分是我自己写的，还望各位大佬勿喷。
注意：要使用这个方法需之前引用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 οnclick="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方法的话在实际运用中并不是那么方便，给大家看一下这两个方法获取的结果：
可以看到这就是普通的form表单，并且对其中的中文进行了utf-8转码，在实际开发中大多数都是用的json格式进行前后台交互，如果用这种方法就不是那么方便了。
这一个方法是将表单序列化成一个数组，有多少个键值对就返回多少个数组，这一个相对于serialize方法来说运用起来更容易得多，但是个人觉得还是没有json对象来的方便，特别是对于表单内的同一个name，json格式可以将其归并成一个数组，在那种很大的表单中使用就更加方便了，用哪个我觉得还是看个人情况吧。
<!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 οnclick="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
<!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 οnclick="setCookie()">添加cookie</button>
<button οnclick="getCookie()">获取cookie</button>
<button οnclick="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秒<!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 οnclick="encrypt()">加密</button>
解密密码：<input type="text" id="decryptKey">
<button οnclick="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)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
欢迎向我提出你宝贵的意见
：1246886075@qq.com