"世界上本没有路, 走的人多了, 也就成了路", 走在代码的路上并没有坦途, 历经的坎多了, 或许才成了道路.
前言
如引言, 开发中会经常遇到许多通用的代码 , 如手机号, 邮箱验证, 获取 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 一下, 或者给文章点赞, 有建议或问题欢迎提出.
文末小福利: 赠送免费的编程学习资料, 可以看我主页简介领取哦
来源: http://www.jianshu.com/p/c4fe5b66af9a