开发中常用的小技巧

冰冰阔楽
310 阅读6分钟

开发中常用的小技巧

1.简写技巧

1.1 声明变量

let x= 20;
let y= 20;
//简写
let x , y=20

let a= 1;
let b= 2;
let c= 3;
//简写 利用结构声明变量
let [a,b,c]= [1,2,3]

1.2冒泡排序

//需求：要实现a和b 的值交换
let a= 5;
let b= 6;
//原方法
let c;
c=a;
a=b;
b=c;
//a,b的值就交换了
//简写
[a,b]=[b,a]

1.3向下取整Math.floor()简写

const floor=Math.floor(5.4)//5
//简写
const floor=~~5.4;//5

1.4寻找数组中的最大值和最小值，计算平均值

//需求：寻找数组里面的最大值和最小值和平均值
let arr= [1,3,5,7,9,15];
//ES6，用Math来查找此时数组需要运用(...)扩展运算符来将其,但是在Math没有找到平均值的方法
let max=Math.max(...arr);
let min =Math.min(...arr);
//利用reduce()也可以实现最大值和最小值，还能计算平均值
let average=arr.reduce((a,b)=>a+b/arr.length);
let max=arr.reduce((a,b)=>a>b?a:b);
let min=arr.reduce((a,b)=>a<b?a:b);

1.5扩展运算符(...)运用

//需求1：合并数组
let arr= [1,2];
let arr1= [3,4];
//方法一利用concat()合并数组,concat()可以基于当前的数组中的所有项创建一个新的数组
let newarr=arr.concat(...arr1);
//运用(...)
//第一种在数组后面追加另一个数组
arr.push(...arr1);//arr=[1,2,3,4]

//第二种在新数组中运用两次扩展运算符
let newarr=[...arr,...arr1]//[1,2,3,4]
//需求2.合并数组的时候去重
let a=[1,2,3];
let b= [1,2,,4,5];
//利用 new Set()方法,要注意要加new
let newarr=[...new Set(arr.concat(...arr1))]
//需求3.合并对象，两个对象属性不一样的时候，属性一样的时候此方法会将最后一个对象的属性值覆盖前面的对象的属性值
let x={
    name:"小花",   
};
let y={
    age:18
};

let obj={...x,...y}//{name:"小翠"，name:"18"}
//需求4.将字符串才分成数组
let a="asdf";
let b=[...];//["a","s","d","f"]

1.6翻转字符串

const res=str=>str.split('').reverse().join('')
res('holle wored')

1.7将对象转化成数组

const obj = { a: 1, b: 2, c: 3 };
let a= Object.entries(obj);
(3) [Array(2), Array(2), Array(2)]
0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]
length: 3

let b= Object.keys(obj);
(3) ["a", "b", "c"]

let c= Object.values(obj);
(3) [1, 2, 3]

3.加快你开发的小技能

1.记住列表的滚动位置

//直接丢到控制台，之后滑动你的页面
function findScroller(element){
    element.onscroll=function(){ console.log(element)}
    
    //递归元素的子节点。调用方法
    Array.form(element.children).forEach(findScroller)
}
findScroller(document.body)
小提示：
如果在做移动端的主体部分滑动，为保证上一个页面的窗口位置固定为之前滑动的位置，可以
固定高：hight: 单位为：vh (窗口可视，)；
溢出滚动：overflow-y:auto

2.模拟请求失败

 // 模拟请求失败
         if (Math.random() > 0.5) {
          JSON.parse('alksdjak')
        }

3.时间日期格式化(moment 、dayjs)

//在src下创建 filters文件和index.js
import Vue from 'vue'
import moment from 'moment'

Vue.filter('datedormat', (strData) => {
  return moment(strData).format('YYYY-MM-DD hh:mm:ss')
})

//在mian.js中引入
import '@/filters/index.js'
//在需要用的地方使用即可
{{ time| datadormat}}

4.移动端使用file时的注意事项

//demo 
//html
 <!-- 选择文件 -->
    <input
      type="file"
      hidden
      ref="file"
      @change="onfileChanege"
    />

//script
    // 修改头像
    onfileChanege() {
      //   //   console.log(11)
      const file = this.$refs.file.files[0]
      //   //   console.log(file)
      //   // 获取文件对象
      this.img = window.URL.createObjectURL(file)

      //   // 获取blob图片数据
      this.isUserPhotoShow = true

      //   file-input 如果选择了同一个文件不会触发change 事件
      // 解决方案就是每次使用完毕，把它的value 清空
      this.$refs.file.value = ''
    }

5.图片裁剪器

//1.安装 yarn add cropperjs
//2.在需要使用的地方设置
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'
//3.在mounted钩子函数中初始化
const image = this.$refs.img
const cropper = new Cropper(image, {
    viewMode: 1, // 只能在裁剪的图片范围内移动
    dragMode: 'move', // 画布和图片都可以移动
    aspectRatio: 1, // 裁剪区默认正方形
    autoCropArea: 1, // 自动调整裁剪图片
    cropBoxMovable: false, // 禁止裁剪区移动
    cropBoxResizable: false, // 禁止裁剪区缩放
    background: false // 关闭默认背景
//  aspectRatio: 16 / 9,
//  crop (event) {
//    console.log(event.detail.x)
//     console.log(event.detail.y)
//     console.log(event.detail.width)
//    console.log(event.detail.height)
//    console.log(event.detail.rotate)
//    console.log(event.detail.scaleX)
//    console.log(event.detail.scaleY)
// }
})
console.log(cropper)

6 promise 对象（async /await）

如何声明一个promise
new promise(function(resolve,reject){
    resolve('成功')
}).than(resolve=>{
	alert(resolve)
})

new promise(function(resolve,reject){
    reject('失败了')
}).catch(reject=>{
	alert(reject)
})

如何终止在某个执行链的位置，可以用Promise.reject(new Error())
new promise(function(resolve,reject){
    resolve(1)
}).than(result=>{
	return result+1
}).than(result=>{
	return result+1
}).than(result=>{
    return result+1
}).than(result=>{
    return Promise.reject(new Error(result+'失败'))
}).than(result=>{
    return result+1
}).catch(error=>{
	alert(error)
})
async /await
await 表示强制等待的意思，该关键字后面要跟一个promise对象，他总是等到该promise对象resolve成功之后执行，并且会返回resolve的结果
<button @click="text"></button>
methods:{
   async text(){
        //await后面跟一个promise对象
const result=  await new promise(function(resolve){
	setTimeout(function(){
       resolve(100)
    	},5000)
	}) 	
       //alert(result)
console.log(result)
  } 
}

捕获异常try/catch

6-2利用class 来封装一个promise

 // 简单易懂 封装promise 
//利用class 来封装一个promise 
    class myPromise {
      // 因为peomise 有三个状态 所以我们一开始要先静态化这三个状态
      static PENDING = 'pending'
      static FULFILLED = 'fulfilled'
      static REJECTED = "rejected"
      constructor(fun) {
        // 返回的状态
        // 注意这里  如果 没有传任何参数的时候，这个时候我的状态是pending
        this.promiseState = myPromise.PENDING
        // 返回的结果 
        this.promiseResult = null
        // 返回函数
        // 会出现this 指向的问题 这里有很多方法 我在这里用的是bind(this) 方便一点
        return fun(this.resolve.bind(this), this.reject.bind(this))
      }
      // 方法
      resolve(res) {
        // 判断改状态是不是pending 是的话就需要改变状态
        if (this.promiseState === myPromise.PENDING) {
          this.promiseState = myPromise.FULFILLED
        }
        // 改变 promiseResult 的值
        return this.promiseResult = res
      }
      reject(rej) {
        // 判断改状态是不是pending 是的话就需要改变状态
        if (this.promiseState === myPromise.PENDING) {
          this.promiseState = myPromise.REJECTED
        }
        return this.promiseResult = rej
      }
    }
    // new 一个promise 对象
    const p = new myPromise(resolve => {
      resolve('成功了')
    })
    console.log(p);

7 扁形转树状

// 数据
 const data =[
     { id: "01", label: "张三", pid: "" },
     { id: "02", label: "张四", pid: "01" },
     { id: "03", label: "张五", pid: "01" },
     { id: "04", label: "张六", pid: "02" },
     { id: "07", label: "张七", pid: "02" },    
     { id: "08", label: "张八", pid: "02" },
]
 //代码
 function tree(list,rootValue){
     //定义一个arr
     const arr=[];
     //遍历数组
     list.forEach(item=>{
       if(item.pid===rootValue){
           //此时可以的到chnildren
		const children=tree(list,item.id)
    //获得的children添加到item 的children中
    item.children=children
           //添加到arr中
           arr.push(item)
           
       }
     })
//返回arr
return arr
 }
//调用函数 传入的参数 第一个为数组  第二个为我们的根数据，一般根数据的pid 都为空
 tree(data,'')

8 解决跨域方式

  • jsonp 优点:简单 缺点:get,前后端复杂
  • 服务器代理 优点:适应强,后端不需要配合 缺点:搭建服务器
  • cros 优点:前端不需要改代码 缺点:需要后端支持

9.vue脚手架代理服务器的运用

//vue 中解决跨域的方法
//我们创建的vue-cli脚手架的配置对象都是单独创建的vue.config.js ，而我们的vue 解决跨域的方式就是在这个配置对象中解决
devServer:{     //这个就是我们在运行 yarn dev / npm run dev 的时候devServer的相关配置
    port:port,	//端口  prop值 我们会对应的是在开发中还是在生产中 两者都不是的话给一个默认端口 8080啥的
    open:true,	//open 这里是是否默认打开true 是 false 不是
    proxy:{		//这里就是vue 的代理了 对应一个对象
     [process.env.VUE_APP_BASE_API]: {  //[process.env.VUE_APP_BASE_API]这个的出处在根目录下找，如果是开发环境就会去.development这个文件去找,如果是在生产环境就会去.peoduction这个文件找，当然我们前端开发时，是在.development这个文件去找
     			target:'http://www.baiwu.com'， //这个是目标，我们需要在这里填写地址来代理
                changeOrigin:true,
 //这个是是否改变地址, 当输入true，我们本地的地址就会发生变化 http://localhost/api/login => http://www.baidu.com/api/login  这一步就解决了跨域的问题
                pathRewrite:{  //地址是否重写
                    '^/api':'' //输入这个就是说以/api 开头替换成了'' 切记空字符串里面不能加空格，加了空格会带入到我们的地址上发起请求的会报错
                } 
   //pathRewrite也可以写成方法pathRewiter:function(path,req){
         	//		let newPath=path.replace('/api','')
            //         return newPath
			//    		 }
     	}
    }
}

10.solt 的使用

  • 当我们封装组件的时候 如果在子组件有点击事件啥的 可以利用solt将这些事件放到父组件上，就可以省略了组件之间的传信

4添加自己的配置片段

{
	"vue文件结构": {
		"prefix": "v2",
		"body": [
			"<template>",
			"  <div class=\"\"></div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  name: '',",
			"  props: {},",
			"  data() {",
			"    return {}",
			"  },",
			"  created() {},",
			"  methods: {},",
			"  computed: {},",
			"  watch: {},",
			"  components: {}",
			"}",
			"</script>",
			"",
			"<style lang=\"less\" scoped>",
			"</style>",
			""
		],
		"description": "vue 三个标签结构 ，div容器，导入 lib/vue.js，创建vue 实例"
	}
}
avatar
文章
阅读
粉丝