前言

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

今天这篇文章我们就来看看如何封装常用的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。扫下面的二维码或者收藏下面的二维码关注吧(长按下面的二维码图片、并选择识别图中的二维码)

如何打造属于自己的Javascript武器库(封装方法)的更多相关文章

  1. JavaScript常见封装方法

    1.最简单的,使用变量,然后用匿名函数包裹,不封装 2.对象字面量简单封装(不完整的模块模式,因为无法达到变量.方法私有效果.不过确实有分离和组织代码的能力,也就算一种简略的模块模式的实现方式) va ...

  2. 打造自己的 JavaScript 武器库(转自SegmentFault公众号)

    2017-11-14 SlaneYang SegmentFault 自己打造一把趁手的武器,高效率完成前端业务代码. 前言 作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率.这里提一个小点 ...

  3. 打造自己的 JavaScript 武器库

    原文 https://segmentfault.com/a/1190000011966867 github:https://github.com/proYang/outils 前言 作为战斗在业务一线 ...

  4. 打造自己的JavaScript武器库(转)

    作者: SlaneYang https://segmentfault.com/a/1190000011966867 前言 作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率.这里提一个小点, ...

  5. 打造自己的JavaScript武器库

    自己打造一把趁手的武器,高效率完成前端业务代码. 前言 作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率.这里提一个小点,我们在业务开发过程中,经常会重复用到日期格式化.url参数转对象. ...

  6. JavaScript使用封装

    基本封装方法 请看下面的例子: var Person = function(name,age){ this.name = name; this.age = age || "未填写" ...

  7. 2016/11/17 周四 <javascript的封装简单示例>

    这是一个简单的javascript代码封装的示例以及封装后的调用方法: var ticker={ n:0, add:function() { this.n++; }, show:function() ...

  8. Javascript 封装方法

    基本封装方法 请看下面的例子: var Person = function(name,age){ this.name = name; this.age = age || "未填写" ...

  9. 分享几个Javascript 封装方法

    基本封装方法 请看下面的例子: var Person = function(name,age){ this.name = name; this.age = age || "未填写" ...

随机推荐

  1. Kafka实践、升级和新版本(0.10)特性预研

    本文来自于网易云社区 一.消息总线MQ和Kafka (挡在请求的第一线) 1. 几个应用场景 case a:上游系统往下游系统推送消息,而不关心处理结果: case b:一份新数据生成,需要实时保存到 ...

  2. 一道关于C++ 继承/虚函数 笔试题 [转]

    转自:http://www.cnblogs.com/yangyh/archive/2011/06/04/2072393.html 首先这位作者, 因为看了这篇简短的一个博文, 我相同了关于虚函数方面的 ...

  3. 剑指Offer - 九度1386 - 旋转数组的最小数字

    剑指Offer - 九度1386 - 旋转数组的最小数字2013-11-24 01:57 题目描述: 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个递增排序的数组的一个旋转 ...

  4. 《Cracking the Coding Interview》——第2章:链表——题目2

    2014-03-18 02:24 题目:给定一个单链表,找出倒数第K个节点. 解法:让一个指针先走K步,然后俩指针一起走到尽头.当然也可以先走到尽头数出链表的长度,然后第二次少走K步.其实耗费的工夫是 ...

  5. linux统计分析流量-wireshark

    wireshark是一款带界面的开源抓包工具,可以用来对系统流量进行统计分析. 安装 由于wireshark是带界面的,所以一般在界面环境下运行,可以通过yum安装: $ yum install -y ...

  6. IE开发人员工具教程

    写在前面 一直非常谷歌的控制台,因为我是做前端的,谷歌浏览器在我看来是解析JS最快的浏览器,所谓的熟能生巧,用熟悉了谷歌浏览器之后就特别喜欢用谷歌的控制台调试脚本.改变样式.查看HTML.查看资源加载 ...

  7. 了解JavaScript核心精髓(四)

    ES6 1.import与require区别 import 是同步导入js模块. require 是异步导入js模块. 2.使用let与const let con1 = 3 //与var作用相似,le ...

  8. glup自动化构建工具

    实现的功能包括 js压缩,css文件合并压缩并在html加版本号,压缩html文件 1.安装gulp 建议参考官网就行http://www.gulpjs.com.cn/docs/getting-sta ...

  9. Webdriver--获得验证信息

    title:获得当前页面的标题 current_url:获得当前页面的URL text:前面提到过,获得标签对的文本信息 try: couseTitle = driver.find_element_b ...

  10. 2 25urllib.py

    """ urllib.request.urlopen(url,data,timeout) """ # from urllib.request ...