如何打造属于自己的Javascript武器库(封装方法)

前言

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

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

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()方法我们同样可以生成一串表示颜色的随机数字，然后前面拼接上"#"，就可以达到上述要求。

随机颜色

数字转化为中文大写金额

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

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

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

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

数字转为大写金额

正则判断-是否为邮箱

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

正则表达式

正则判断-是否为手机号

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

正则判断-是否为手机号

结束语

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

web前端/H5/javascript学习群：250777811

欢迎大家关注我的微信号公众号，公众号名称：web前端EDU。扫下面的二维码或者收藏下面的二维码关注吧（长按下面的二维码图片、并选择识别图中的二维码）