【经典源码收藏】基于jQuery的项目常见函数封装集合

下面是关于"【经典源码收藏】基于jQuery的项目常见函数封装集合"完整攻略：

一、背景

经过一段时间的jQuery使用，我们都会发现在一些常见的功能实现中，代码会有很大的相似度，这时候我们可以将这些常见的功能封装成通用的函数，代码的可复用性将大大提升。

既然这些封装好的函数可以让代码重用性更高，那又有哪些函数是常见的呢？下文中便将一一为大家阐述。

二、常用函数封装集合

2.1 常规操作

在不适用插件的情况下，我们需要对判断模块的有无、绑定点击事件等常见操作进行封装。比如以下代码块：

// 判断模块是否已加载完成
$.fn.exists = function () {
  return this.length !== 0;
};

// 阻止事件冒泡
$.fn.stopBubble = function () {
  return this.each(function () {
    $(this).on('click', function (e) {
      e.stopPropagation();
    });
  });
};

• $.fn.exists函数就判断模块的有无，如果返回长度无为0，那么说明该模块未被加载完成，反之则表示加载完成。

• $.fn.stopBubble函数则会绑定点击事件，同时阻止事件冒泡。

2.2 数据类型判断

在实际项目中，我们经常需要进行数据类型的判断，这里提供一些常见的数据类型判断函数：

// 判断是否为空
function isEmpty(val) {
  return (
    typeof val === 'undefined' ||
    val === null ||
    val === '' ||
    ($.isArray(val) && val.length === 0) ||
    ($.isPlainObject(val) && $.isEmptyObject(val))
  );
}

// 判断是否数字
function isNumber(val) {
  return typeof val === 'number' && !isNaN(val);
}

// 判断是否是字符串
function isString(val) {
  return typeof val === 'string';
}

// 判断是否是boolean类型
function isBoolean(val) {
  return typeof val === 'boolean';
}

// 判断是否是数组类型
function isArray(val) {
  return Array.isArray(val);
}

// 判断是否是对象类型
function isObject(val) {
  return Object.prototype.toString.call(val) === '[object Object]';
}

// 判断是否是函数类型
function isFunction(val) {
  return Object.prototype.toString.call(val) === '[object Function]';
}

2.3 正则表达式

正则表达式也是工程代码中比较经常使用的，下面给出两个常见的正则表达式示例：

// 邮箱验证正则表达式
const emailRegExp = /^[A-Za-z0-9]+([_\-\.][A-Za-z0-9]+)*@([A-Za-z0-9]+[-_\.])+[A-Za-z0-9]{2,5}$/;

// 手机号验证正则表达式
const phoneRegExp = /^1[3456789]\d{9}$/;

2.4 其他辅助性函数

最后，我们也会在一些地方使用一些辅助性函数，比如以下场景：

// 设置本地存储值
function setStorage(key, val) {
  localStorage.setItem(key, val);
}

// 获取本地存储值
function getStorage(key) {
  return localStorage.getItem(key);
}

// 根据key移除本地存储值
function removeStorage(key) {
  localStorage.removeItem(key);
}

// 清除所有的本地存储值
function clearStorage() {
  localStorage.clear();
}

三、示例说明

3.1 判断模块是否已加载完成

在开发中，我们可能会需要对部分DOM节点进行是否存在判断，例如示例中的代码：

if ($('#test').exists()) {
  console.log('DOM节点已经加载完成！');
} else {
  console.log('DOM节点还未加载完成！');
}

在示例中，我们调用exists方法判断DOM节点是否已经加载完成，可以进行相应的后续操作。

3.2 正则表达式应用

接下来，我们对正则表达式进行应用，例如实现邮箱验证：

const emailValue = $('#email').val();
if (emailRegExp.test(emailValue)) {
  console.log('邮箱格式正确！');
} else {
  console.log('请输入正确的邮箱格式！');
}

在以上代码中，我们调用emailRegExp.test(emailValue)方法进行邮箱格式验证，如果验证不通过则给出用户提示。

四、总结

在实际工程代码编写中，我们常常需要封装一些常用函数以提升代码的可复用性。本文从常规操作、数据类型判断、正则表达式、辅助函数等四个方面为大家详细阐述了常见的函数的封装方法，同时也对具体应用进行了相应的示例说明。