“世界上本沒有路，走的人多了，也就成了路”，走在代碼的路上并沒有坦途，歷經的坎多了，或許才成了道路。
前言
如引言，?開發中會經常遇到許多通用的代碼?，如手機號、郵箱驗證，獲取url參數、操作cookie等，然而封裝這些常用方法的庫并不多見，而且這些方法與自己的項目經驗相關，很有可能自己去擴展一些有用的方法，所以還是有必要去實現。
這里想要做的是?拋磚引玉?，小伙伴們可以參照作者的思路，自己來實現。
待解決的問題
在實現這個工具庫之前，需要做解決以下一些問題
合適的構建工具
代碼質量和開發效率
api簡單易用
綜上，作者選擇了?rollup + webpack + typeScript + jest?來構建及調試代碼，如果對這些工具還不熟悉，可以去對應的官網查看文檔，還可以結合我后面的github地址，下載源碼運行試試。
Rollup
一個 JavaScript 模塊打包器，可以將小塊代碼編譯成大塊復雜的代碼。它能幫助我們快速打包代碼為CommonJS、ES以及UMD等模塊，還能通過靜態分析代碼，剔除一些未使用的代碼。
Webpack
Webpack也是一個模塊打包器，功能更強大，不過在打包、封裝js庫上來說，rollup比webpack更合適。這里其實可以不用webpack，但借助webpack可以快速搭建本地服務器，方便邊寫代碼邊調試，以及搬運html文件。
TypeScript
TypeScript 是一種由微軟開發的自由和開源的編程語言，它是 JavaScript 的一個超集，擴展了 JavaScript 的語法，結合開發工具的靜態檢查及類型推斷能力，能幫助我們編寫出更嚴謹，可靠的代碼。
Jest
Jest是facebook推出的一款測試框架，簡單地配置即可驗證我們寫的方法是否可靠。
幾個常用的方法
獲取url參數
/**
* get 獲取url參數
* @param 參數為空時，獲取當前url所有參數；
* @param 參數為1個時，獲取當前url的指定參數；
* @param 參數為2個且第二個參數不為true時，獲取指定url的指定參數；
* @param 參數為2個且第二個參數為true時，獲取指定url的所有參數；
*/get() :string|Object{letargs =arguments,? len = args.length,? url:string;if(len ==1|| len ==0) {? ? url = location.search;? }else{? ? url = args[0];? }? url = url.substring(url.indexOf('?') +1);letarr = url.split('&'),? obj:string|Object= {};this.each(arr, (v, i) = >{if(v.indexOf('=') !=-1) {letarg = v.split('='),? ? ? key =decodeURIComponent(arg[0]),? ? ? val =decodeURIComponent(arg[1]);? ? ? obj[key] = val;? ? }? })returnlen ==1|| (len ==2&& args[1] !==true) ? obj[len ==1? args[0] : args[1]] ||'': obj;}復制代碼
獲取url參數，在前端開發中是非常頻繁的操作，特別是在前后端分離后，這里用了很簡單的get命名，?能夠獲取當前url或指定url的所有、指定參數?。
使用示例：
注：由于包名為?js-toolkits?，默認簡寫為?tks?，下同
tks.get();//當前url所有參數tks.get('name');//當前url指定參數tks.get('www.baidu.com?xx=1','xx');//指定url，指定參數tks.get('www.baidu.com?xx=1&yy=2&zz=3',true);//指定url，所有參數復制代碼
遍歷對象及數組
/**
* each 遍歷數組及對象
* @param obj {Object|Array} 遍歷對象
* @param callback {Function} 回調函數，第一個參數為val，第二個為key，這里與jquery相反
*/each(obj:Array , callback:Function) :Array {letlength:number,? i:number|string=0;if(isArrayLike(obj)) {? ? length = obj.length;for(; i < length; i++) {if(callback.call(obj[i], obj[i], i) ===false) {break;? ? ? }? ? }? }else{for(iinobj) {if(callback.call(obj[i], obj[i], i) ===false) {break;? ? ? }? ? }? }returnobj;}復制代碼
這里直接參考了jquery each方法，不一樣的是根據習慣?調整了value和index的順序?，在常規遍歷數組及對象時，還是非常實用的。
使用示例：
tks.each({ aa:1, bb:2, cc:3},(v, i) = >{? console.log(v, i);}) tks.each([1,3,5,7,9], (v, i) = >{? console.log(v, i);})復制代碼
常用字符串檢測
/**
* test 常用字符串檢測
* @param type {String} 類型
* @param str {String} 需要檢測的字符串
*/test(type:string, str:string) :Boolean{switch(type) {case'phone':return/^1[3456789]\d{9}$/.test(str);case'email':return/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);case'json':if(typeofstr !='string') {returnfalse;? ? }try{JSON.parse(str);returntrue;? ? }catch(e) {returnfalse;? ? }default:returnfalse;? }}復制代碼
處理字符串檢測也是很常見的操作，表單提交中更是如此，?這里通過switch匹配類型，也易于直接擴展?。
使用示例：
tks.test('phone','18888888888');//truetks.test('email','123456@qq.com');//truetks.test('email','123456');//falsetks.test('json','{"isJson":"true"}');//true復制代碼
以上列舉了幾個常用的方法，設計的思路是?簡單清晰?，具體的實現方式還有很多種，因人而異。
還有其他一些?trim?(字符串去空格)、?param?(對象轉url參數)、?storage?(操作sessionStorage、localStorage、cookie)等方法，這里就不一一展開介紹，源碼請看?js-toolkits
最后
這個庫還不太完善，作者也還在一點點摸索中，有興趣的小伙伴可以參照實現。如有幫助可以star一下，或者給文章點贊，有建議或問題歡迎提出。
文末小福利：贈送免費的編程學習資料，可以看我主頁簡介領取哦
