开发小技巧（提升工作效率）

置顶秋雨凉人心

已于 2024-11-28 14:50:47 修改

阅读量740

点赞数 1

分类专栏：提升文章标签： javascript 前端

于 2022-03-23 17:04:45 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39056703/article/details/123656894

版权

提升专栏收录该内容

32 篇文章

订阅专栏

1获取url，并将url的参数封装到对象里面

getUrl(){
      const  result={};
      const queryString=window.location.search;
      const reg=/[?&][^?&]+=[^?&]+/g;
      const found=queryString.match(reg);
      if(found){
        found.forEach(item=>{
          let temp =item.substring(1).split('=');
          let key=temp[0];
          let value=temp[1];
          result[key]=value
        })
      }
    }

2.打乱数组

var arr=[];//存放1-20
for(var i=0;i<20;i++){
    arr.push(i+1);
}
console.log('原数组',arr);
var randomNumber = function(a,b){
    // return a - b //从小到大排列
    // return b - a //从大到小排列
    return 0.1 - Math.random()
    // 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
    // 若 a 等于 b，则返回 0。
    // 若 a 大于 b，则返回一个大于 0 的值。
  }
arr.sort(randomNumber)
console.log('现数组',arr);

3.给tree数据结构每一个层级新增一个数据


var arr=[{
"id": 1,
"name": "广告销售",
"depCode": "MI00",
"children": [{
    "id": 2,
    "name": "二级部门",
    "depCode": "MI0001",
    "children": [{
        "id": 3,
        "name": "三级部门1",
        "depCode": "MI000101",
        "children": [{
            "id": 10,
            "name": "test",
            "depCode": "MI00010103",
            "children": []
        }, {
            "id": 6,
            "name": "四级部门1",
            "depCode": "MI00010101",
            "children": []
        }, {
            "id": 7,
            "name": "四级部门2",
            "depCode": "MI00010102",
            "children": []
        }]
    }, {
        "id": 4,
        "name": "三级部门2",
        "depCode": "MI000102",
        "children": []
    }, {
        "id": 5,
        "name": "三级3",
        "depCode": "MI000103",
        "children": []
        }]
    }]
}]


const addKey = arr => arr.map(item => ({
  ...item,
  disabled:true,
  children: addKey(item.children)
}))
 
const result = addKey(arr)

4:通过`...`延展操作符可以很容易的合并对象数组也可以

const a= { a:1 };
const b= { b:2 };
const c= { c:3 };

const summary = {...a, ...b, ...c};

=> {a:1,b:2,c:3}

5:过滤空值比如0 null undefined

let res = [undefined,null,1,2,0,false,'']
let result=res.filter(Boolean);
=>[1,2]

6:创建一个空对象建议使用 Object.create(null)

let o = {};
let p = Object.create(null);
Object.prototype.say = function(){
    console.log('hello')
}
console.log(o.say)
console.log(p.say)

>> f(){}
>> undefined

7:引入vant的坑

安装适用vue2项目的vant版本,实测有两个版本 2.12.2、2.10.12

npm install --save vant@2.12.2

8:递归树形数据结构给个别条件的数据增加树形

addAttr(data){
      for (var j = 0; j < data.length; j++) {
        if(['文书','签章','权限'].includes(data[j].label)){
          data[j].disabled=true;
        }
        if (data[j].children.length > 0) {
          this.addAttr(data[j].children);
        }
      }
      return data
    }

9.el-table check只能单选

 handleSelectionChange(val) { 
      if (val.length >= 2) {
        let arrays = val.splice(0, val.length - 1)
        arrays.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row); //除了当前点击的，其他的全部取消选中
        })
      } else {
        console.log(val[0].id);
      } 
    },

10.给标准时间的年月日增加指定时间

//给指定时间加年月日等
export function addDate(interval, number, date) {
    /* 
      *   参数:interval,字符串表达式，表示要添加的时间间隔. 
      *   参数:number,数值表达式，表示要添加的时间间隔的个数. 
      *   参数:date,时间对象. 
      *   返回:新的时间对象. 
      *   var   now   =   new   Date(); 
      *   var   newDate   =   DateAdd( "d ",5,now); 
      *---------------   DateAdd(interval,number,date)   ----------------- 
      */
    switch (interval) {
        case "y": {
            date.setFullYear(date.getFullYear() + number);
            return date;
            break;
        } 
        case "m": {
            date.setMonth(date.getMonth() + number);
            return date;
            break;
        } 
        case "d": {
            date.setDate(date.getDate() + number);
            return date;
            break;
        }
        case "h": {
            date.setHours(date.getHours() + number);
            return date;
            break;
        }
        case "m": {
            date.setMinutes(date.getMinutes() + number);
            return date;
            break;
        }
        case "s": {
            date.setSeconds(date.getSeconds() + number);
            return date;
            break;
        }
        default: {
            date.setDate(d.getDate() + number);
            return date;
            break;
        }
    }
}

11.对el-input做只能输入number类型的自定义指令

 import Vue from 'vue';
 
export const onlynumber = Vue.directive('onlynumber', {
 
  inserted(el, vDir, vNode) {
    // vDir.value 有指令的参数
    let content;
    //按键按下=>只允许输入 数字/小数点
    el.addEventListener("input", event => {
      let e = event || window.event;
      // let inputKey = String.fromCharCode(typeof e.charCode === 'number' ? e.charCode : e.keyCode);
      let re = /[^\d{1,}\.\d{1,}|\d{1,}]/g;
      content = e.target.value;
      e.target.value = e.target.value.replace(re, "")
    });
    //按键弹起=>并限制最大最小
    el.addEventListener("keyup",event => {
      let e = event || window.event;
      if (e.target.value) {
        content = parseFloat(e.target.value);
        if (!content) {
          content = 0.00;
        }
        let arg_max = "";
        let arg_min = "";
        if (vDir.value) {
          arg_max = parseFloat(vDir.value.max);
          arg_min = parseFloat(vDir.value.min);
        }
        if(arg_max && content > arg_max){
          e.target.value = arg_max;
          content = arg_max;
        }
        if(arg_min && content < arg_min){
          e.target.value = arg_min;
          content = arg_min;
        }
      }
    });
    //失去焦点=>保留指定位小数
    el.addEventListener("focusout", event=>{ // 此处会在 el-input 的 @change 后执行
      let e = event || window.event;
      if (e.target.value) {
        content = parseFloat(e.target.value);
        if (!content) {
          content = 0.00;
        }
        let arg_precision = 0; //默认保留至整数
        if (vDir.value.precision) {
          arg_precision = parseFloat(vDir.value.precision);
        }
        e.target.value = content.toFixed(arg_precision);
      } 
    })
  }
}) 
//在main.js里面引用 然后Vue.use()就可以了
// 使用
// 无参数 <el-input v-onlynumber>
 
// 有参数 <el-input v-onlynumber="{max: 100, min: 0, precision: 2}">

12.对base64s数据进行加密解密

const Base64 = {
    //加密
    encode(str) {
        if (str===undefined || str === "" || str === null) {
            return str;
        }
        return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
            function toSolidBytes(match, p1) {
                return String.fromCharCode('0x' + p1);
            }));
    },
    //解密
    decode(str) {
        if (str===undefined || str === "" || str === null) {
            return str;
        }
        // Going backwards: from bytestream, to percent-encoding, to original string.
        return decodeURIComponent(atob(str).split('').map(function (c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        }).join(''));
    }
}
export default Base64

13.Vue组件动态引用

// 通过定义一个函数的方式来引入，传入一个参数，返回组件。
const loadComponent = (currentView) =>import(`@/components/listSty/${currentView}.vue`); 
//其实就相当于 因为就一行所以就简写了
const loadComponent = (value) => {
     return import(`@/components/listSty/${value}.vue`)
}; 

//然后在页面进入的时候将这个路径修改一下就行了
 mounted() {
    loadComponent(this.currentView).then((component) => {
        this.currentViews = component.default;
      });
  },
//使用
  <!-- 动态切换组件  is-->
        <component :is="currentViews" :itemData="item"></component>

附上我使用的截图

这样的方法有一定的局限性如果还有什么可扩展的希望各位大佬指出

14.利用css动画给btn设置节流

button{
//可以设置时间来改变节流时间
  animation: throttle 2s step-end forwards;
}
button:active{
  animation: none;
}
@keyframes throttle {
  from {
    pointer-events: none;
  }
  to {
    pointer-events: all;
  }
}

15.HTML文件模板

//HTML5 文件模板：
<!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>HTML5标准模版</title>
  </head>
  <body>
  </body>
</html>

//移动端：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    <meta name="format-detection" content="telephone=no">
    <title>移动端HTML模版</title>

    <!-- S DNS预解析 -->
    <link rel="dns-prefetch" href="">
    <!-- E DNS预解析 -->

    <!-- S 线上样式页面片，开发请直接取消注释引用 -->
    <!-- #include virtual="" -->
    <!-- E 线上样式页面片 -->

    <!-- S 本地调试，根据开发模式选择调试方式，请开发删除 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- /本地调试方式 -->

    <link rel="stylesheet" href="http://srcPath/index.css">
    <!-- /开发机调试方式 -->
    <!-- E 本地调试 -->

</head>
<body>
</body>
</html>

//PC端

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="your keywords">
    <meta name="description" content="your description">
    <meta name="author" content="author,email address">
    <meta name="robots" content="index,follow">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="ie-stand">
    <title>PC端HTML模版</title>

    <!-- S DNS预解析 -->
    <link rel="dns-prefetch" href="">
    <!-- E DNS预解析 -->

    <!-- S 线上样式页面片，开发请直接取消注释引用 -->
    <!-- #include virtual="" -->
    <!-- E 线上样式页面片 -->

    <!-- S 本地调试，根据开发模式选择调试方式，请开发删除 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- /本地调试方式 -->

    <link rel="stylesheet" href="http://srcPath/index.css">
    <!-- /开发机调试方式 -->
    <!-- E 本地调试 -->
</head>
<body>
</body>
</html>

16 检测所有数据类型

/**
 * 检测类型
 * @param {any} target 检测的目标
 * @returns {"string"|"number"|"array"|"object"|"function"|"null"|"undefined"|"regexp"} 只枚举一些常用的类型
 */
function checkType(target) {
  /** @type {string} */
  const value = Object.prototype.toString.call(target);
  const result = value.match(/\[object (\S*)\]/)[1];
  return result.toLocaleLowerCase();
}

17 一行代码适配rem

//750是设计稿的宽度：之后的单位直接1:1使用设计稿的大小，单位是rem
html{ font-size: calc(100vw / 750); }

18 mac切换node版本

//先安装node版本管理模块 n
sudo npm install n -g
//安装稳定版
sudo n stable
//安装最新版
sudo n latest
//版本降级/升级
sudo n 版本号   // 8.16.0   /   12.8.0


//目前自己版本号v16.17.0

//模拟器版本16.14.2

19 快速原型开发快速创建一个vue环境

你可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发，不过这需要先额外安装一个全局的扩展

npm install -g @vue/cli-service-global

安装完成之后，就新建一个文件夹，并创建一个.vue文件，执行下面命令就跑起来了

vue serve app.vue  // 启动服务
vue build app.vue  //打包出生产环境的包

这是一个很棒的功能，用于开发一个库、组件，做一些小demo等都是非常适合的！

20前端将页面转换为图片保存至本地（html2canvas）

21绘制三角形的口诀：盒子宽高为0，三面边框皆透明，一面边框上颜色

持续更新