做一个自己的前端js工具库

“世界上本没有路,走的人多了,也就成了路”,走在代码的路上并没有坦途,历经的坎多了,或许才成了道路。

前言

如引言, 开发中会经常遇到许多通用的代码 ,如手机号、邮箱验证,获取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一下,或者给文章点赞,有建议或问题欢迎提出。

文末小福利:赠送免费的编程学习资料,可以看我主页简介领取哦

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,999评论 4 368
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,102评论 1 302
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,709评论 0 250
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,439评论 0 217
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,846评论 3 294
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,881评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,062评论 2 317
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,783评论 0 205
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,517评论 1 248
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,762评论 2 253
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,241评论 1 264
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,568评论 3 260
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,236评论 3 241
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,145评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,941评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,965评论 2 283
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,802评论 2 275

推荐阅读更多精彩内容