前端装机之vue最佳实践-v2.6（完结）附完整代码git地址

本文链接：https://blog.csdn.net/qq_41191401/article/details/125048976

本文介绍了两个常用的前端工具函数：一个是实现深度拷贝的函数，能够合并两个对象；另一个是函数防抖，用于限制用户输入时频繁调用接口，减少带宽消耗。此外，还展示了将数字转换为中文大写的管道类函数，包括金钱格式化和数字转汉字大写。这些函数在实际开发中非常实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.两个常用工具类方法

深度拷贝。之前文章有说过深度拷贝，目前写个加强版本，能将两个对象拷贝到一起。如果是普通深度拷贝的话，只需要将第二个值改成{}，或者不传。

const deepClone=(source,target={})=>{
    if (getType(source) != "Array" && getType(source) != "Object") return source;
    target = getType(source) == "Array" ? [] : {};
    for (let key of Object.keys(source)) {
        if(!target[key]){
            target[key] = deepClone(source[key]);
        }else{
            target[key]=source[key]
        }
       
    }
    return target;
}

函数防抖，这个也是常用的方法，主要用作用户输入搜索时，防止一直调用后端接口，设置用户在输入结束后一定的时间内开始执行方法。减少带宽消耗。

const debounce=(fn, wait)=> {
    if (timeout) {
        clearTimeout(timeout)
    }
    timeout = setTimeout(() => {
        fn()
    }, wait) 
}

完整文件代码

utils/tools.js

let timeout = null;
 function getType(obj) {
    return Object.prototype.toString.call(obj).slice(8, -1);
}

const deepClone=(source,target={})=>{
    if (getType(source) != "Array" && getType(source) != "Object") return source;
    target = getType(source) == "Array" ? [] : {};
    for (let key of Object.keys(source)) {
        if(!target[key]){
            target[key] = deepClone(source[key]);
        }else{
            target[key]=source[key]
        }
       
    }
    return target;
}


const debounce=(fn, wait)=> {
    if (timeout) {
        clearTimeout(timeout)
    }
    timeout = setTimeout(() => {
        fn()
    }, wait) 
}

export default {
    deepClone,
    debounce
}

2.管道类函数

三位一个逗号

const transfromNum = (value) => {
  value = "" + value; // 转换成字符串
  var int = value.slice(0, value.indexOf(".")); // 拿到整数
  var ext = value.slice(value.indexOf(".")); // 获取到小数
  //每个三位价格逗号
  int = int.split("").reverse().join(""); // 翻转整数
  var temp = ""; // 临时变量
  for (var i = 0; i < int.length; i++) {
    temp += int[i];
    if ((i + 1) % 3 == 0 && i != int.length - 1) {
      temp += ","; // 每隔三个数字拼接一个逗号
    }
  }
  temp = temp.split("").reverse().join(""); // 加完逗号之后翻转
  temp = temp + ext; // 整数小数拼接
  return temp; // 返回
};

金钱转大小写

const capAmountToString = (values) => {
  if (values === null || values === "") return "";
  values = values.toString();
  values = values.replace(/,/, "");
  // 不足两位小数补零
  let capArr = values.split(".");
  if (capArr.length < 2) {
    capArr[1] = "00";
  } else if (capArr[1].length == 1) {
    capArr[1] = capArr[1][0] + "0";
  }

  let len = capArr[0].length; //整数长度
  let len2 = capArr[1].length; //小数长度
  let arr = [],
    arr2 = [];
  let chin_list = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"]; //所有的数值对应的汉字
  let chin_lisp = ["仟","佰","拾","兆","仟","佰","拾","亿","仟","佰","拾","万","仟","佰","拾",]; //进制
  let chin_lisp2 = ["角", "分"]; //进制
  // 数字转大写，添加进制
  for (let i = 0; i < len; i++) {
    arr.push(parseInt(capArr[0][i])); //输入的数据按下标存进去 存进去的只是数字
    arr[i] = chin_list[arr[i]]; //是根据我们输入的输入的数字，对应着我们的chin_list这个数组
  }
  for (let i = len - 1, j = 1; i > 0; i--) {
    //i =2 1 //倒序 为了添加进制，方便我们去观看
    arr.splice(i, 0, chin_lisp[chin_lisp.length - j++]); //j=2
  }

  for (let n = 0; n < len2; n++) {
    arr2.push(parseInt(capArr[1][n])); //输入的数据按下标存进去 存进去的只是数字
    arr2[n] = chin_list[arr2[n]]; //是根据我们输入的输入的数字，对应着我们的chin_list这个数组
  }
  for (let i = len2, j = 1; i > 0; i--) {
    //i =2 1 //倒序 为了添加进制，方便我们去观看
    arr2.splice(i, 0, chin_lisp2[chin_lisp2.length - j++]); //j=2
  }
  arr = arr.join("");
  // 整数位处理
  if (len >= 1) {
    arr += "元";
  } //1234510001=>壹拾贰亿叁仟肆佰伍拾壹万零壹元
  arr = arr.replace(/零[仟佰拾]/g, "零"); //100051231 =>壹亿零零零伍万壹仟贰佰叁拾壹
  arr = arr.replace(/零{2,}/g, "零"); //壹亿零零零伍万壹仟贰佰叁拾壹 =>壹亿零伍万壹仟贰佰叁拾壹
  arr = arr.replace(/零([兆|亿|万|元])/g, "$1"); //12300000壹仟贰佰叁拾零万零元 =>壹仟贰佰叁拾万元
  arr = arr.replace(/亿零{0,3}万/, "亿"); //10000000123 =>壹佰亿万零壹佰贰拾叁元
  arr = arr.replace(/兆零{0,3}亿/, "兆"); //10000000000123 壹拾零兆亿零壹佰贰拾叁元 =>
  arr = arr.replace(/^元/, "零元"); //0 ->零元
  // 小数位处理
  arr2 = arr2.join("");
  arr = arr + arr2;
  arr = arr.replace(/零角/, "零"); //11.01 壹拾壹元零角壹分 =>壹拾壹元零壹分
  arr = arr.replace(/零{1,2}分/, "整"); //
  return arr;
};

数字转中文大写

完整文件 pipe/pipe.service.js

const transfromNum = (value) => {
  value = "" + value; // 转换成字符串
  var int = value.slice(0, value.indexOf(".")); // 拿到整数
  var ext = value.slice(value.indexOf(".")); // 获取到小数
  //每个三位价格逗号
  int = int.split("").reverse().join(""); // 翻转整数
  var temp = ""; // 临时变量
  for (var i = 0; i < int.length; i++) {
    temp += int[i];
    if ((i + 1) % 3 == 0 && i != int.length - 1) {
      temp += ","; // 每隔三个数字拼接一个逗号
    }
  }
  temp = temp.split("").reverse().join(""); // 加完逗号之后翻转
  temp = temp + ext; // 整数小数拼接
  return temp; // 返回
};

const capAmountToString = (values) => {
  if (values === null || values === "") return "";
  values = values.toString();
  values = values.replace(/,/, "");
  // 不足两位小数补零
  let capArr = values.split(".");
  if (capArr.length < 2) {
    capArr[1] = "00";
  } else if (capArr[1].length == 1) {
    capArr[1] = capArr[1][0] + "0";
  }

  let len = capArr[0].length; //整数长度
  let len2 = capArr[1].length; //小数长度
  let arr = [],
    arr2 = [];
  let chin_list = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"]; //所有的数值对应的汉字
  let chin_lisp = ["仟","佰","拾","兆","仟","佰","拾","亿","仟","佰","拾","万","仟","佰","拾",]; //进制
  let chin_lisp2 = ["角", "分"]; //进制
  // 数字转大写，添加进制
  for (let i = 0; i < len; i++) {
    arr.push(parseInt(capArr[0][i])); //输入的数据按下标存进去 存进去的只是数字
    arr[i] = chin_list[arr[i]]; //是根据我们输入的输入的数字，对应着我们的chin_list这个数组
  }
  for (let i = len - 1, j = 1; i > 0; i--) {
    //i =2 1 //倒序 为了添加进制，方便我们去观看
    arr.splice(i, 0, chin_lisp[chin_lisp.length - j++]); //j=2
  }

  for (let n = 0; n < len2; n++) {
    arr2.push(parseInt(capArr[1][n])); //输入的数据按下标存进去 存进去的只是数字
    arr2[n] = chin_list[arr2[n]]; //是根据我们输入的输入的数字，对应着我们的chin_list这个数组
  }
  for (let i = len2, j = 1; i > 0; i--) {
    //i =2 1 //倒序 为了添加进制，方便我们去观看
    arr2.splice(i, 0, chin_lisp2[chin_lisp2.length - j++]); //j=2
  }
  arr = arr.join("");
  // 整数位处理
  if (len >= 1) {
    arr += "元";
  } //1234510001=>壹拾贰亿叁仟肆佰伍拾壹万零壹元
  arr = arr.replace(/零[仟佰拾]/g, "零"); //100051231 =>壹亿零零零伍万壹仟贰佰叁拾壹
  arr = arr.replace(/零{2,}/g, "零"); //壹亿零零零伍万壹仟贰佰叁拾壹 =>壹亿零伍万壹仟贰佰叁拾壹
  arr = arr.replace(/零([兆|亿|万|元])/g, "$1"); //12300000壹仟贰佰叁拾零万零元 =>壹仟贰佰叁拾万元
  arr = arr.replace(/亿零{0,3}万/, "亿"); //10000000123 =>壹佰亿万零壹佰贰拾叁元
  arr = arr.replace(/兆零{0,3}亿/, "兆"); //10000000000123 壹拾零兆亿零壹佰贰拾叁元 =>
  arr = arr.replace(/^元/, "零元"); //0 ->零元
  // 小数位处理
  arr2 = arr2.join("");
  arr = arr + arr2;
  arr = arr.replace(/零角/, "零"); //11.01 壹拾壹元零角壹分 =>壹拾壹元零壹分
  arr = arr.replace(/零{1,2}分/, "整"); //
  return arr;
};

export default {
  transfromNum,
  capAmountToString,
};

在component中如何使用，看看代码

ElementTest.vue

<template>
  <div class="ele-box">
    <span>test</span>
     <el-button type="success">主要按钮</el-button>
     <el-input v-model="value"></el-input>
     <span>{{value | capAmountToString}}</span>
  </div>
</template>

<script>
import HTTP from "../service/axios-http";
import Tools from "../utils/tools";
import Pipe from "../pipe/pipe.service"
export default {
  name: "ElementTest",
  data(){
      return{
          value:""
      }
  },
  watch:{
      value:(newV,oldV)=>{
          Tools.debounce(()=>{
              console.log(newV,oldV);
          },3000)
          
      }
  },
   filters: {
       transfromNum:Pipe.transfromNum,
       capAmountToString:Pipe.capAmountToString
      },
  created() {
    HTTP("get", "http://xxx/xxxx/xxx/").then((res) => {
      console.log(res, "res");
    });
    let source=[1,2,3,4]
    
      let target=Tools.deepClone(source);
      target.push("cxy")
      console.log(source,target)
  },
};
</script>

<style scoped lang="scss">
.ele-box {
  > span {
    background: red;
  }
}
</style>

以上就是前端最佳实践的所有代码。git地址：https://github.com/ChengTouYuan/best-paractice-vue2.6

2023-04-12补充：打包有问题的一定要把路由模式变成hash，最佳实践默认是history的