“世界上本没有路,走的人多了,也就成了路”,走在代码的路上并没有坦途,历经的坎多了,或许才成了道路。
前言
如引言,开发中会经常遇到许多通用的代码
,如手机号、邮箱验证,获取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 {
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一下,或者给文章点赞,有建议或问题欢迎提出。