在平時寫代碼中，一些工具會經常用到，但是我每次要用時都是到處去找依賴文件或者重新寫方法，這樣很麻煩於是爲了方便我將一些常用的工具類寫在一個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]