专栏首页企鹅号快讯如何打造属于自己的Javascript武器库

如何打造属于自己的Javascript武器库

前言

代码写的久了,就会发现很多时候都是在写一些重复的东西,这个时候就应该要考虑到提高工作效率了,比如对常用方法的封装,例如日期格式化,浏览器类型判断等。

今天这篇文章我们就来看看如何封装常用的Javascript方法,打造出属于自己的一套Javascript武器库吧。封装的代码为了不依赖于其他库,都采用原生的Javascript编写。

文中的代码有些比较长,理解的不是很清楚的,可以直接去github上看。

https://github.com/zhouxiongking/article-pages/blob/master/articles/jsCapsulation/capsulation1.js

Javascript

数组-判断相等

在某些场景下,我们需要判断两个数组是否相等。主要思想如下:

首先判断传入的参数是否为数组,如果不为数组,则返回false;

两个数组内存地址相同,则返回true;

两个数组长度不同,则返回false;

两个数组中每个元素都相等,则返回true。

通过上述的思想,我们得到以下的封装代码。

判断数组相等

判断浏览器类型和版本

在前端开发中经常需要考虑不同类型浏览器的兼容性,那么首先就要获取浏览器的类型,有时要针对不同版本做不同的控制。

在浏览器环境中有个navigator对象,其中有个userAgent属性是可以用来判断浏览器类型和版本的,封装的代码如下所示。

浏览器类型和版本判断

获取操作系统类型

现如今操作系统的类型已经有很多了,PC端有MacOS,Windows,linux,移动端有IOS,Android,WindowsPhone,那么我们该怎么去判断这些类型呢?

在PC端,利用navigator对象的userAgent属性或者vendor属性;在移动端,利用navigator的appVersion属性可以实现,封装的代码如下。

判断操作系统类型

任意对象的深度克隆

对象的克隆是一个很常见的方法,在jQuery和AngularJS等常用框架中都有封装,那么我们也可以自己用原生JS去封装下。

其中对日期Date类型和数组Array类型以及Object对象类型分别用不同的方法处理,最后封装的方法如下。

对象深度克隆

对象判空

判断一个对象是否为空,首先需要判断传入的参数是一个对象,其次其key的长度为0,那么就是一个空对象。

对象判空

随机数字

我们经常会遇到这样的需求,在最小数min和最大数max之间随机生成一个数。

这需要用到Math.random()方法,封装的方法如下。

随机数字

随机颜色

有的时候我们会看到这样一个场景,在页面点击,会随机改变页面的背景色,让人觉得很炫酷,其实就是随机生成了颜色的效果。

在CSS属性中,表示颜色的color属性一般用"#"加上六位十六进制数表示,通过Math.random()方法我们同样可以生成一串表示颜色的随机数字,然后前面拼接上"#",就可以达到上述要求。

随机颜色

数字转化为中文大写金额

在有的与金额有关的系统中,需要显示到中文大写版,但是在实际运算时,一般都是使用数字的,这就需要一种封装的方法去将数字转化为中文大写。

整数部分有'拾', '佰', '仟','万', '亿',小数部分有'角', '分'。

数字有'零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'。

且看看下面是怎么封装的。

数字转为大写金额

正则判断-是否为邮箱

当用户注册信息时,经常需要用到邮箱,这个时候可以使用邮箱的正则表达式去验证填写的信息是否满足格式。

正则表达式

正则判断-是否为手机号

手机号在用户填写信息时已经是一个必填项了,所以判断手机号合法性的正则表达式是很重要的,下面总结了一个方法。

正则判断-是否为手机号

结束语

常用方法的封装在日常的工作中是一件很有必要做的事,可以提高代码复用性,从而提高工作效率。也希望大家平时多做总结,提高代码编写能力。

【记得分享哦,我会继续给你大家分享更有价值的文章】

看了不够瘾,看了还想看

本文来自企鹅号 - 零基础学代码媒体

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 天文学家在AI帮助下发现“第二个太阳系”

    数年前,开普勒天文望远镜在2545光年外发现了一颗大小与太阳相近的恒星:开普勒90。在随后的观测中,科学家发现了更多与太阳系相似的特征:开普勒90拥有7颗行星,...

    企鹅号小编
  • 谷歌人工智能协助人类发现了另一个太阳系

    文/三易 北京时间12月15日凌晨2点,美国国家航空航天局(NASA)宣布,谷歌的人工智能技术对开普勒望远镜获得的数据进行分析后,发现了围绕恒星“开普勒-90”...

    企鹅号小编
  • 大数据干货系列(七)-Storm总结

    本文共计1661字,预计阅读时长十分钟 Storm总结 一、本质 Storm是一个开源分布式实时计算系统,它可以实时可靠地处理流数据。 二、Storm解决了什么...

    企鹅号小编
  • Super快报第12期:浏览器盛宴,微博衰落,京东上市,空姐代购被判刑

    一、浏览器年终营销盛宴 12306将被钉上互联网的耻辱柱。但是其成就了一批浏览器的年终营销大宴。猎豹、搜狗、360相继推出抢票插件。即刻比较绝,直接推出云...

    罗超频道
  • 大数据和隐私:政府必须选择!(下)

    大数据文摘
  • 编译原理

    《编译原理》作者Alfred V.Aho、Ravi Sethi和Jeffrey D.Ullman是世界著名的计算机 科学家,他们在计算机科学理论、数据库等很多领...

    用户3157710
  • 我碰到的那些面试题js及es6(1)

    es6是一个新的标准,它包含了许多新的语言特性和库,是JS最实质性的一次升级。比如箭头函数、字符串模板、generators(生成器)、async/await、...

    李才哥
  • 朋友你听说过尾递归吗

    我们以斐波那契数列为例子讲解了尾递归的运用方式,并对比了普通递归与尾递归的性能。

    IMWeb前端团队
  • 朋友你听说过尾递归吗

    简单的说,斐波那契数列中的每一项都是前两项的和。 即F(1)=1,F(2)=1, F(n)=F(n-1)+F(n-2)(n>2,n∈N*)

    IMWeb前端团队
  • JQuery选择器

    用户3159471

扫码关注云+社区

领取腾讯云代金券