一些工作中遇到的开发经验，持续更新

noBug
113 阅读1分钟
  1. 计算最近几年——使用moment.js（体积比较大），用dayjs（体积会比较小）
 dayjs().format("YYYY"); //当前时间
 dayjs().subtract(1, "years").format("YYYY"); //当前时间的前1年时间
 dayjs().subtract(7, 'day').format('YYYY-MM-DD') // 7天前
 dayjs('2021-11-11').valueOf() //时间戳
 dayjs(parseInt(1632726447200)).format('MM-DD HH:mm') // 时间戳转换成日期
  1. 导入excel
Content-Type':'multipart/form-data',

       importTable(e) {
			const formData = new FormData()
			formData.append('classId', -1)
			formData.append('file', e.target.files[0])
			api.trainingClassUserDeclareInfoImport(formData).then((res) => {
			})
         }
         triggerInput() {
			document.getElementById('importTable').click()
		},
          <input
            id="importTable"
            class="hide"
            type="file"
            name="file"
            accept=".xlsx,.xls,.xlsm"
            @change="importTable"
            />
            <el-button @click="triggerInput">导入</el-button>
  1. 导出
Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
responseType: 'blob',

api.trainingClassUserDeclareInfoExport({
            declareIds: this.declareIds,
    }).then((res) => {
            const link = document.createElement('a')
            const blob = new Blob([res], {
                    type: 'application/vnd.ms-excel',
            })
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            const disposition = res.headers['content-disposition'];
            const fileName = window.decodeURI(disposition.split('=')[1]);
            link.setAttribute('download', fileName)
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
    })
  1. 文字超过两行或三行就显示省略号
.p1{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

  1. 解决input[type='file']上传相同附件只传一次 js解决方法：

    HTML：<input id="file" type="file" οnchange="upload()" />

    JS：document.getElementById('file').value = null;

    VUE逻辑：

<input ref="referenceUpload" @change="referenceUpload" type="file" accept=".xls" multiple/>

回调成功方法里：this.$refs.referenceUpload.value = null;

6. 小程序开发时针对苹果手机的安全距离(即底部小黑条)解决方案

padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

env()和constant()需要同时存在，而且顺序不能换
**使用前提**，当网页设置`viewport-fit=cover`的时候才生效，根据微信小程序的表现，在实际真机测试时这两个函数生效，推测小程序里的`viewport-fit`默认是`cover`。

7. H5开发时针对苹果手机的安全距离(即底部小黑条)解决方案 viewport-fit为cover

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

env()和constant()需要同时存在，而且顺序不能换

padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/ 
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
  1. es6合并数组
const a = [1,2,3]; 
const b = [1,5,6]; 
const c = [...new Set([...a,...b])];//[1,2,3,5,6]

  1. es6的在‘{} 在`{}`中可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。

  2. if优化

if(
    type == 1 ||
    type == 2 ||
    type == 3 ||
    type == 4 ||
){
   //...
}

改成

const condition = [1,2,3,4];

if( condition.includes(type) ){
   //...
}
  1. 精确搜索中，用find代替filter find方法中找到符合条件的项，就不会继续遍历数组。
const a = [1,2,3,4,5];
const result = a.find( 
  item =>{
    return item === 3
  }
)
  1. es6的扁平化 例如要将以下对象里的value提取到一个数组中
const deps = {
    '0':['a','b'],
    '1':['c','d'],
}
let member = Object.values(deps).flat(Infinity);

Object.values(obj)返回可枚举的键值数组，Object.keys(obj)会返回可枚举的属性数组

  1. 用es6空值合并运算符??来判断输入框是否非空 当左侧操作数为 null 或 undefined 时，其返回右侧的操作数。否则返回左侧的操作数。
if(value??'' !== ''){
  //...
}
  1. 异步函数 将回调地狱的函数改成
const fn1 = () =>{
  return new Promise((resolve, reject) => {
    resolve(1)
  });
}
const fn2 = () =>{
  return new Promise((resolve, reject) => {
    resolve(2)
  });
}

const fn = async () =>{
  const res1 = await fn1();
  const res2 = await fn2();
  console.log(res1);// 1
  console.log(res2);// 2
}

Promise.all

const fn = () =>{
   Promise.all([fn1(),fn2()]).then(res =>{
       console.log(res);// [1,2]
   }) 
}

只要其中一个异步函数处理完成，就返回结果，要用到Promise.race()。

  1. 长文本处理

字符超出换行

.wrap{
  overflow-wrap: break-word;
}

字符超出部分使用连字符，也就是-

.hyphens{
  hyphens: auto;
}

单行文本超出省略

.elipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行文本超出省略（-webkit-line-clamp控制行数）

.line-clamp{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
  1. 获取url后面的参数
export function getUrlParam(name) {
	var search = location.hash //hash版本，history版本用window.location.search
	var pattern = new RegExp('[?&]' + name + '=([^&]+)', 'g')
	var matcher = pattern.exec(search)
	var items = null
	if (null != matcher) {
		try {
			items = decodeURIComponent(decodeURIComponent(matcher[1]))
		} catch (e) {
			try {
				items = decodeURIComponent(matcher[1])
			} catch (e) {
				items = matcher[1]
			}
		}
	}
	return items
}
  1. vue3引用jsonp 安装
cnpm i vue-jsonp -D

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import * as VueJsonp from 'vue-jsonp' //关键代码
const app = createApp(App)
const configApp = app.use(store).use(router)
configApp.config.globalProperties.$VueJsonp = VueJsonp //关键代码
configApp.mount('#app')

index.vue

import { jsonp } from 'vue-jsonp'
jsonp(url, {
    userLoginId: 'xxxxx',
    callbackQuery: 'jsoncallback',
}).then((json) => {})
  1. react-hook更新数组
const [data,setData] = useState([])
const arr = [a,b,c]
setData([...arr])
  1. taro里createSelectorQuery的hook写法
const selectorQuery = (selector)=>
  new Promise(resolve => {
    const query = Taro.createSelectorQuery()
    query
      .select(selector)
      .boundingClientRect((res: NodesRef.BoundingClientRectCallbackResult) => {
        resolve(res)
      })
      .exec()
  })
 
useEffect(() => {
  Taro.nextTick(async () => {
    const query = await selectorQuery('#name')
  })
}, [])
avatar
文章
阅读
粉丝