前端开发中的一些实用小技巧

Vue篇:

1、输入框限制输入正整数

<el-input 
	placeholder="请输入大于0的整数" 
	v-model="input1" @input="changeInput('input1')" 
clearable>
   export default {
    data() {
          input1:1
       }
    }，
    methods: {
      changeInput(doms) {
            this[doms] = this[doms].replace(/\D|^0/g, '');
            console.log(this[doms] );
        },
    }
 }

2、自动导入组件

写了一堆基础UI组件，然后每次需要使用这些组件的时候，都得先import，然后声明components，很繁琐！秉持能偷懒就偷懒的原则，想办法优化！

招式解析： 我们需要借助一下神器webpack，使用 require.context() 方法来创建自己的（模块）上下文，从而实现自动动态require组件。这个方法需要3个参数：要搜索的文件夹目录，是否还应该搜索它的子目录，以及一个匹配文件的正则表达式。 我们在components文件夹添加一个叫global.js的文件，在这个文件里借助webpack动态将需要前端的学习都是需要不断的学习，学一天停一停相当于白学，学习效果很差，如果你想有人一起学习可以来这个扣裙，首先是132 中间是667最后是127 都是零基础的同学，大家相互鼓励 共同努力 只是学着玩就不建议来了!!!的基础组件统统打包进来。

import Vue from 'vue'

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1)
}

const requireComponent = require.context(
  '.', false, /\.vue$/
   //找到components文件夹下以.vue命名的文件
)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)

  const componentName = capitalizeFirstLetter(
    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
    //因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾，只保留真正的文件名
  )

  Vue.component(componentName, componentConfig.default || componentConfig)
})

3、Vue中自行实现任意组件之间通信（dispatch 和 broadcast）

// 自行实现 dispatch 和 broadcast 方法
function broadcast(componentName, eventName, params) {
  this.$children.forEach(child => {
    const name = child.$options.name;

    if (name === componentName) {
      child.$emit.apply(child, [eventName].concat(params));
    } else {
      broadcast.apply(child, [componentName, eventName].concat([params]));
    }
  });
}
export default {
  methods: {
    dispatch(componentName, eventName, params) {
      let parent = this.$parent || this.$root;
      let name = parent.$options.name;

      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;

        if (parent) {
          name = parent.$options.name;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
    broadcast(componentName, eventName, params) {
      broadcast.call(this, componentName, eventName, params);
    }
  }
};

用法：

场景：有 A.vue 和 B.vue 两个组件，其中 B 是 A 的子组件，中间可能跨多级，在 A 中向 B 通信：

<!-- A.vue -->
<template>
	<button @click="handleClick">触发事件</button>
</template>
<script>
  import Emitter from '../mixins/emitter.js';
  
  export default {
    name: 'componentA',
    mixins: [ Emitter ],
    methods: {
      handleClick () {
        this.broadcast('componentB', 'on-message', 'Hello Vue.js');
      }
    }
  }
</script>

<!-- B.vue -->
export default {
  name: 'componentB',
  created () {
    this.$on('on-message', this.showMessage);
  },
  methods: {
    showMessage (text) {
      window.alert(text);
    }
  }
}

JavaScript篇

1、补0操作

场景：页面月和日的显示，需要用0或者其他字符占位。
var number = 11; 
('0' + number).slice(-2);

2、千分位划分

场景：页面展示金额，进行位数划分。
const AmountSlite = (value) => {
    const regExp = /(\d{1,3})(?=(\d{3})+(?:$|\.))/g;
    const ret = (value + '').replace(regExp, '$1,');
    return ret;
};

3、正则校验0-100的数字，最多保留两位有效数字

场景：百分比校验，输入框数字校验
var reg = /^\d\.([1-9]{1,2}|[0-9][1-9])$|^[0-9]\d{0,1}(\.\d{1,2}){0,1}$|^100(\.0{1,2}){0,1}$/;
// 大于0，保留两位小数
var reg1 = /^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$/
// 大于等于0，保留两位小数
var reg2 = /^(0|[1-9]\d*)(\s|$|\.\d{1,2}\b)/

4、获取一个月的最后一天

场景：根据年月，或者月的最后一天
new Date('2020', '1', 0).getDate();

5、任意类型判断

场景：获取变量类型
const type = data => Object.prototype.toString.call(data).replace(/^\[object (.+)\]$/,