【总结】作一个本身的前端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一下，或者给文章点赞，有建议或问题欢迎提出。