打造自己的JavaScript库

  |  
 阅读次数

前言

作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率。这里提一个小点,我们在业务开发过程中,经常会重复用到日期格式化、url参数转对象、浏览器类型判断、节流函数等一类函数,这些工具类函数,基本上在每个项目都会用到,为避免不同项目多次复制粘贴的麻烦,我们可以统一封装,发布到npm,以提高开发效率。这里先分类整理下,以后会慢慢更新,希望能程序员没有加班,武装起来吧。

常用函数汇总

1.Array


1.1 arrayEqual

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
*
* @desc 判断两个数组是否相等
* @param {Array} arr1
* @param {Array} arr2
* @return {Boolean}
*/
function arrayEqual(arr1, arr2) {
if (arr1 === arr2) return true;
if (arr1.length != arr2.length) return false;
for (var i = 0; i < arr1.length; ++i) {
if (arr1[i] !== arr2[i]) return false;
}
return true;
}

2.Class


2.1 addClass

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
*
* @desc 为元素添加class
* @param {HTMLElement} ele
* @param {String} cls
*/

var hasClass = require('./hasClass');

function addClass(ele, cls) {
if (!hasClass(ele, cls)) {
ele.className += ' ' + cls;
}
}

2.2 hasClass

1
2
3
4
5
6
7
8
9
10
/**
*
* @desc 判断元素是否有某个class
* @param {HTMLElement} ele
* @param {String} cls
* @return {Boolean}
*/
function hasClass(ele, cls) {
return (new RegExp('(\\s|^)' + cls + '(\\s|$)')).test(ele.className);
}

2.3 removeClass

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
*
* @desc 为元素移除class
* @param {HTMLElement} ele
* @param {String} cls
*/

var hasClass = require('./hasClass');

function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
ele.className = ele.className.replace(reg, ' ');
}
}