JavaScript前端实用的工具函数封装

一、目标
本篇攻略旨在帮助Javascript前端开发者快速了解常用的工具函数的封装，并学会自行编写及封装工具函数。

二、介绍
工具函数封装指的是将常用的功能代码封装成一个个可复用的函数，以便于代码重用、整合和维护。虽然功能代码可能并不复杂，但通过工具函数的封装，可以减少代码冗余，提高代码的可读性、可扩展性和可维护性。参考以上目标，我们可以将工具函数的封装分为以下几个步骤：

1.明确实现功能代码
在进行工具函数封装前，我们需要非常明确的知道这些函数需要完成什么功能，这里我们以两个简单的示例来说明：

• 设置cookie

/**
 * 设置cookie
 * @param {string} key - 键对应的key值
 * @param {string} value - 储存在key下的值
 * @param {number} days - 有效天数
 */
function setCookie(key, value, days) {
  const date = new Date();
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
  document.cookie = `${key}=${value};expires=${date.toGMTString()}`;
}

• 判断是否为数组

/**
 * 判断是否为数组
 * @param {*} arr - 需要验证类型的参数
 * @returns {boolean}
 */
function isArray(arr) {
  return Array.isArray(arr);
}

2.封装函数

在明确功能后，我们需要将代码封装成函数，同时要确保函数名能够体现出对应的功能，函数的参数应尽可能的精简，这样可以提高函数的易用性和使用频率。

• 设置cookie

function setCookie(key, value, days = 30) {
  const date = new Date();
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
  document.cookie = `${key}=${value};expires=${date.toGMTString()}`;
}

• 判断是否为数组

function isArray(arr) {
  return Array.isArray(arr);
}

这个封装好的函数可以写道公共js文件里，方便其他文件调用。

3.测试函数

在完成函数封装后，一定要测试函数是否正常使用。这个步骤通常需要用到mocha，chai这类的测试框架。我们这里选择用最简单暴力的方法测试刚才封装好的函数。

• 设置cookie

setCookie('test', '123', 1);

• 判断是否为数组

console.log(isArray([])); // true
console.log(isArray({})); // false

通过测试后，我们的两个工具函数就可以成功的使用了。

三、示例
下面以axios的封装来介绍工具函数的应用。

1. 封装axios请求

/**
 * 将get、post方法封装到此方法中
 * @param {string} type - 请求类型
 * @param {string} url - 请求地址
 * @param {object} data - 请求参数
 * @param {string} dataType - 数据类型
 * @returns {Promise}
 */
const request = (type, url, data = {}, dataType = 'json') => {
  return new Promise((resolve, reject) => {
    if (type === 'get' || type === 'GET') {
      axios
        .get(url, {
          params: data,
          headers: {
            'Content-Type': 'application/json;charset=utf-8',
          },
        })
        .then((res) => {
          resolve(res);
        })
        .catch((e) => {
          reject(e);
        });
    } else if (type === 'post' || type === 'POST') {
      axios
        .post(url, data, {
          headers: {
            'Content-Type': 'application/json;charset=utf-8',
          },
        })
        .then((res) => {
          resolve(res);
        })
        .catch((e) => {
          reject(e);
        });
    }
  });
};

经过上面的封装后，我们就可以直接调用该方法来进行请求了。

request('get', 'https://abc.com/get', { id: '123' }).then((res) => {
  console.log(res);
});

request('post', 'https://abc.com/post', { id: '123' }).then((res) => {
  console.log(res);
});

1. axios请求拦截

// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    const token = getCookie('Authorization');
    config.headers.Authorization = token ? token : '';
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

通过封装axios请求拦截器，我们可以在每次请求前设置token，这样可以保证接口的安全性。getCookie函数的代码如下：

/**
 * 获取cookie
 * @param {string} name - 需要获取的cookie名称
 * @returns {string}
 */
function getCookie(name) {
  // eslint-disable-next-line no-useless-escape
  const reg = new RegExp(`(^| )${name}=([^;]*)(;|$)`);
  const arr = document.cookie.match(reg);
  if (arr) {
    return unescape(arr[2]);
  } else {
    return null;
  }
}

至此，通过对工具函数的封装，我们可以让代码变得更加简单易用，同时提高代码的可维护性和可扩展性。