高效前端开发：常用工具方法封装与实战应用

前端常用的通用 JavaScript 方法封装及应用场景

在前端开发中，我们经常需要处理一些重复性较高的任务，如日期格式化、表单重置、数据合并、树形结构数据构建等。为了提高开发效率和代码复用性，我们将这些功能封装成通用的 JavaScript 方法。在本文中，我们将展示这些方法的实现，并给出实际应用场景的代码示例，帮助更好地理解它们在项目中的实际应用。

---

1. 日期格式化 - parseTime

日期格式化常用于将时间戳或日期对象转换为易读的字符串格式。比如，在后台管理系统中展示创建时间、更新时间时，我们通常需要格式化日期。

方法实现：

export function parseTime(time, pattern) {
  if (arguments.length === 0 || !time) {
    return null;
  }
  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}';
  let date;
  if (typeof time === 'object') {
    date = time;
  } else {
    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
      time = parseInt(time);
    } else if (typeof time === 'string') {
      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/.[\d]{3}/gm), '');
    }
    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000;
    }
    date = new Date(time);
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  };
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key];
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') {
      return ['日', '一', '二', '三', '四', '五', '六'][value];
    }
    if (result.length > 0 && value < 10) {
      value = '0' + value;
    }
    return value || 0;
  });
  return time_str;
}

应用场景：

在 后台管理系统 中，我们可能需要展示记录的创建时间或修改时间。假设我们从 API 获取了一个 Unix 时间戳，如何将其展示为用户友好的日期呢？可以通过 parseTime 方法进行格式化。

// 假设从服务器返回的时间戳为 1618915200（即 2021年4月20日 00:00:00）
const timestamp = 1618915200;

// 格式化为 '2021-04-20 00:00:00'
const formattedTime = parseTime(timestamp, '{y}-{m}-{d} {h}:{i}:{s}');
console.log(formattedTime); // 输出: 2021-04-20 00:00:00

---

2. 表单重置 - resetForm

在表单操作中，用户在填写完表单后可能需要重置表单数据。通过 resetForm 方法，我们可以简洁地清空表单。

方法实现：

export function resetForm(refName) {
  if (this.$refs[refName]) {
    this.$refs[refName].resetFields();
  }
}

应用场景：

在 Vue.js 项目 中，假设你有一个表单组件，当用户点击重置按钮时，想要将表单的所有数据重置为初始值。

<template>
  <el-form ref="form" :model="formData" label-width="120px">
    <el-form-item label="用户名">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model="formData.email"></el-input>
    </el-form-item>
    <el-button @click="reset">重置</el-button>
  </el-form>
</template>

<script>
import { resetForm } from './utils';

export default {
  data() {
    return {
      formData: {
        username: '',
        email: ''
      }
    };
  },
  methods: {
    reset() {
      resetForm.call(this, 'form');  // 重置表单
    }
  }
};
</script>

---

3. 日期范围参数处理 - addDateRange

在 数据查询 中，用户可能需要选择日期范围来过滤数据。addDateRange 方法帮助我们将日期范围作为查询参数的一部分。

方法实现：

export function addDateRange(params, dateRange, propName) {
  let search = params;
  search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
  dateRange = Array.isArray(dateRange) ? dateRange : [];
  if (typeof (propName) === 'undefined') {
    search.params['beginTime'] = dateRange[0];
    search.params['endTime'] = dateRange[1];
  } else {
    search.params['begin' + propName] = dateRange[0];
    search.params['end' + propName] = dateRange[1];
  }
  return search;
}

应用场景：

在 Vue.js 查询组件 中，假设用户选择了开始日期和结束日期，并且需要将其传递给 API 进行数据筛选。

<template>
  <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
  <el-button @click="searchData">搜索</el-button>
</template>

<script>
import { addDateRange } from './utils';

export default {
  data() {
    return {
      dateRange: []
    };
  },
  methods: {
    searchData() {
      const params = {
        // 其他查询参数
      };
      const searchParams = addDateRange(params, this.dateRange);
      console.log(searchParams);
      // 将 searchParams 发送到 API 进行数据查询
    }
  }
};
</script>

---

4. 数据字典回显 - selectDictLabel 和 selectDictLabels

selectDictLabel 和 selectDictLabels 方法用于根据字典值获取对应的标签。它们非常适用于需要展示选项标签的场景。

方法实现：

export function selectDictLabel(datas, value) {
  if (value === undefined) {
    return "";
  }
  var actions = [];
  Object.keys(datas).some((key) => {
    if (datas[key].value == ('' + value)) {
      actions.push(datas[key].label);
      return true;
    }
  });
  if (actions.length === 0) {
    actions.push(value);
  }
  return actions.join('');
}

export function selectDictLabels(datas, value, separator) {
  if (value === undefined || value.length === 0) {
    return "";
  }
  if (Array.isArray(value)) {
    value = value.join(",");
  }
  var actions = [];
  var currentSeparator = separator === undefined ? "," : separator;
  var temp = value.split(currentSeparator);
  Object.keys(temp).some((val) => {
    var match = false;
    Object.keys(datas).some((key) => {
      if (datas[key].value == ('' + temp[val])) {
        actions.push(datas[key].label + currentSeparator);
        match = true;
      }
    })
    if (!match) {
      actions.push(temp[val] + currentSeparator);
    }
  })
  return actions.join('').substring(0, actions.join('').length - 1);
}

应用场景：

在 表格展示 中，假设你的后端返回了编码值，你需要将其转化为用户友好的标签进行显示。

const statusDict = {
  1: { label: '正常', value: 1 },
  2: { label: '禁用', value: 2 },
  3: { label: '待审核', value: 3 }
};

// 假设从后台获取的数据是 ['1', '2']
const statusValues = ['1', '2'];

// 使用 selectDictLabels 方法转化为标签
const statusLabels = selectDictLabels(statusDict, statusValues);
console.log(statusLabels);  // 输出: '正常, 禁用'

---

5. 字符串格式化 - sprintf

sprintf 方法用于通过占位符替换字符串中的变量。在前端项目中，构建动态的文本时经常使用该方法。

方法实现：

export function sprintf(str) {
  var args = arguments, flag = true, i = 1;
  str = str.replace(/%s/g, function () {
    var arg = args[i++];
    if (typeof arg === 'undefined') {
      flag = false;
      return '';
    }
    return arg;
  });
  return flag ? str : '';
}

应用场景：

在 用户通知 中，假设我们要动态构建一条消息，并将用户的名字、时间等信息插入到模板中。

const username = '张三';
const loginTime = '2024-12-24 10:00';

// 使用 sprintf 方法构建动态通知消息
const message = sprintf('你好，%s，您在 %s 成功登录系统。', username, loginTime);
console.log(message);  // 输出: 你好，张三，您在 2024-12-24 10:00 成功登录系统。

7. 字符串处理 - parseStrEmpty

这个方法用于处理字符串，确保在遇到 null、undefined 或 "null"、"undefined" 时，返回一个空字符串 ""。通常在处理用户输入或者从 API 获取的数据时，如果值为 null 或 undefined，我们希望将其转换为空字符串，避免出现显示问题或错误。

方法实现：

export function parseStrEmpty(str) {
  if (!str || str == "undefined" || str == "null") {
    return "";
  }
  return str;
}

应用场景：

假设我们从服务器获取了一个可能为 null 的字段，并在前端展示它。如果该字段为空，我们希望显示一个默认值或者空白。

const userInfo = {
  username: null,
  email: "user@example.com"
};

// 确保字段为空时显示空字符串
const username = parseStrEmpty(userInfo.username);
console.log(username);  // 输出: ""

---

8. 数据合并 - mergeRecursive

mergeRecursive 方法用于递归合并两个对象，特别适合处理深度嵌套的对象合并。例如，当我们需要合并用户数据或配置对象时，可能会用到此方法，它能够确保合并时不会丢失原始数据。

方法实现：

export function mergeRecursive(source, target) {
  for (var p in target) {
    try {
      if (target[p].constructor == Object) {
        source[p] = mergeRecursive(source[p], target[p]);
      } else {
        source[p] = target[p];
      }
    } catch (e) {
      source[p] = target[p];
    }
  }
  return source;
}

应用场景：

在 Vue.js 配置合并 中，假设你有一个基础配置对象和一个用户自定义的配置对象，你希望将它们合并，而不丢失原有的设置。

const defaultConfig = {
  theme: 'light',
  notifications: {
    email: true,
    sms: false
  }
};

const userConfig = {
  theme: 'dark',
  notifications: {
    sms: true
  }
};

// 合并配置
const finalConfig = mergeRecursive(defaultConfig, userConfig);
console.log(finalConfig);
// 输出:
// {
//   theme: 'dark',
//   notifications: {
//     email: true,
//     sms: true
//   }
// }

---

9. 构造树形结构数据 - handleTree

handleTree 方法用于将扁平化的树状数据转化为树形结构。通常在前端应用中，我们从后台获取的菜单数据或组织架构数据是以平铺的形式存在的，而在界面展示时需要转化为树形结构。

方法实现：

export function handleTree(data, id, parentId, children) {
  let config = {
    id: id || 'id',
    parentId: parentId || 'parentId',
    childrenList: children || 'children'
  };

  var childrenListMap = {};
  var nodeIds = {};
  var tree = [];

  for (let d of data) {
    let parentId = d[config.parentId];
    if (childrenListMap[parentId] == null) {
      childrenListMap[parentId] = [];
    }
    nodeIds[d[config.id]] = d;
    childrenListMap[parentId].push(d);
  }

  for (let d of data) {
    let parentId = d[config.parentId];
    if (nodeIds[parentId] == null) {
      tree.push(d);
    }
  }

  for (let t of tree) {
    adaptToChildrenList(t);
  }

  function adaptToChildrenList(o) {
    if (childrenListMap[o[config.id]] !== null) {
      o[config.childrenList] = childrenListMap[o[config.id]];
    }
    if (o[config.childrenList]) {
      for (let c of o[config.childrenList]) {
        adaptToChildrenList(c);
      }
    }
  }
  return tree;
}

应用场景：

在 菜单展示 中，假设从后台获取到了一个扁平化的菜单数据，我们希望将其转化为树形结构以便在前端展示。

const menuData = [
  { id: 1, parentId: 0, name: '首页' },
  { id: 2, parentId: 1, name: '产品' },
  { id: 3, parentId: 1, name: '服务' },
  { id: 4, parentId: 0, name: '关于我们' }
];

const treeMenu = handleTree(menuData);
console.log(treeMenu);
// 输出:
// [
//   { id: 1, parentId: 0, name: '首页', children: [
//     { id: 2, parentId: 1, name: '产品' },
//     { id: 3, parentId: 1, name: '服务' }
//   ]},
//   { id: 4, parentId: 0, name: '关于我们' }
// ]

---

10. 参数处理 - tansParams

transParams 方法将一个对象转换为 URL 查询参数的形式。在前端开发中，通常需要将表单数据或 URL 参数格式化为查询字符串，以便传递给后端。

方法实现：

export function tansParams(params) {
  let result = ''
  for (const propName of Object.keys(params)) {
    const value = params[propName];
    var part = encodeURIComponent(propName) + "=";
    if (value !== null && value !== "" && typeof (value) !== "undefined") {
      if (typeof value === 'object') {
        for (const key of Object.keys(value)) {
          if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {
            let params = propName + '[' + key + ']';
            var subPart = encodeURIComponent(params) + "=";
            result += subPart + encodeURIComponent(value[key]) + "&";
          }
        }
      } else {
        result += part + encodeURIComponent(value) + "&";
      }
    }
  }
  return result
}

应用场景：

假设你要向 API 发送一个 GET 请求，需要将查询参数转化为 URL 查询字符串。

const params = {
  search: 'apple',
  filter: {
    category: 'fruit',
    priceRange: 'low'
  },
  page: 1
};

// 转化为查询字符串
const queryString = tansParams(params);
console.log(queryString);
// 输出:
// search=apple&filter%5Bcategory%5D=fruit&filter%5BpriceRange%5D=low&page=1&

---

11. 路径标准化 - getNormalPath

getNormalPath 用于标准化路径格式，解决路径中多余的斜杠问题。它常用于文件路径、路由路径的处理，确保路径的统一性。

方法实现：

export function getNormalPath(p) {
  if (p.length === 0 || !p || p == 'undefined') {
    return p;
  }
  let res = p.replace('//', '/');
  if (res[res.length - 1] === '/') {
    return res.slice(0, res.length - 1);
  }
  return res;
}

应用场景：

在 路由路径 处理时，确保路径没有多余的斜杠。

let path = '///home/user///files/';
let normalPath = getNormalPath(path);
console.log(normalPath);  // 输出: '/home/user/files'

---

12. Blob 格式验证 - blobValidate

blobValidate 用于检查文件是否是有效的 Blob 类型（通常用于文件上传时，验证文件格式）。

方法实现：

export function blobValidate(data) {
  return data.type !== 'application/json';
}

应用场景：

在 文件上传 功能中，检查文件的类型是否符合要求。比如，确保上传的文件是图片，而不是 JSON 文件。

const file = new Blob([JSON.stringify({ name: 'test' })], { type: 'application/json' });
const isValid = blobValidate(file);
console.log(isValid);  // 输出: false

---

总结

通过封装这些通用方法，开发者可以大大提高代码的复用性和开发效率。在实际开发中，面对类似的需求时，我们可以快速地应用这些封装好的方法，无需重复编写常见的功能逻辑。无论是字符串处理、数据合并、树形结构处理、参数拼接还是文件格式验证，这些方法都能简化我们的代码，提高系统的稳定性和可维护性。