【總結】作一個本身的前端js工具庫

「世界上本沒有路，走的人多了，也就成了路」，走在代碼的路上並無坦途，歷經的坎多了，或許才成了道路。

前言

如引言，開發中會常常遇到許多通用的代碼，如手機號、郵箱驗證，獲取url參數、操做cookie等，然而封裝這些經常使用方法的庫並很少見，並且這些方法與本身的項目經驗相關，頗有可能本身去擴展一些有用的方法，因此仍是有必要去實現。

這裏想要作的是拋磚引玉，小夥伴們能夠參照做者的思路，本身來實現。

待解決的問題

在實現這個工具庫以前，須要作解決如下一些問題

1. 須要有合適的構建工具，方便咱們打包代碼，而且易於調試；
2. 注重代碼質量和開發效率，有類型推斷及靜態檢查能力；
3. 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 {
  let args = arguments,
  len = args.length,
  url: string;

  if (len == 1 || len == 0) {
    url = location.search;
  } else {
    url = args[0];
  }
  url = url.substring(url.indexOf('?') + 1);
  let arr = url.split('&'),
  obj: string | Object = {};

  this.each(arr, (v, i) = >{
    if (v.indexOf('=') != -1) {
      let arg = v.split('='),
      key = decodeURIComponent(arg[0]),
      val = decodeURIComponent(arg[1]);

      obj[key] = val;
    }
  })

  return len == 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 < any > , callback: Function) : Array < any > {
  let length: 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 (i in obj) {
      if (callback.call(obj[i], obj[i], i) === false) {
        break;
      }
    }
  }

  return obj;
}
複製代碼

這裏直接參考了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 (typeof str != 'string') {
      return false;
    }

    try {
      JSON.parse(str);
      return true;
    } catch(e) {
      return false;
    }
  default:
    return false;
  }
}
複製代碼

處理字符串檢測也是很常見的操做，表單提交中更是如此，這裏經過switch匹配類型，也易於直接擴展。

使用示例：

tks.test('phone','18888888888');//true
tks.test('email','123456@qq.com');//true
tks.test('email','123456');//false
tks.test('json','{"isJson":"true"}');//true
複製代碼

以上列舉了幾個經常使用的方法，設計的思路是簡單清晰，具體的實現方式還有不少種，因人而異。

還有其餘一些trim(字符串去空格)、param(對象轉url參數)、storage(操做sessionStorage、localStorage、cookie)等方法，這裏就不一一展開介紹，源碼請看 js-toolkits

最後

這個庫還不太完善，做者也還在一點點摸索中，有興趣的小夥伴能夠參照實現。若有幫助能夠star一下，或者給文章點贊，有建議或問題歡迎提出。