2020.10-2021.01前端开发部分总结
1.减少http请求（使用缓存优化性能）
storageData(){
let arr = [
{
name:'黄',age:20},
{
name:'刘',age:30}
]
arr.push(Date.now());
window.sessionStorage.setItem('str',JSON.stringify(arr))
},
//请求接口的方法
getStorageData(){
//注意此处一定是获取时间，索引不固定
let time = JSON.parse(window.sessionStorage.getItem('str'))[2];
if((Date.now() - time) > 1000*20){
alert('12')
//利用时间来判断是否每次调用返回相同固定资源的接口
}
}
2.element.ui中的el-upload传递索引
index是外部v-for循环时的索引；
:on-success的回调函数原本有三个形参数(response,file, fileList)，使用箭头函数传递索引
<el-upload
v-show='!item.flag'
:action="action"
accept="image/png,image/jpg,image/jpeg"
:on-success='(response,file, fileList) => {imgChange_post(response,file, fileList, index)}'>
<el-button type="primary">点击上传封面图</el-button>
</el-upload>
3.element.ui中的loading组件加载圈位置
//比如要始终将文字固定在屏幕正中间
//重新设置一个div即可 给个id方便获取下面的子类元素
<div id="createId" v-loading='loading_create' element-loading-text="创建中,请稍等"></div>
```css
#createId .el-loading-mask{
position: fixed;
width: 100%;
height: 100%;
}
4.根据给定的数组给另一个对象数组进行排序
根据arr的顺序来依次对应
const arr = [33,11,66,22,55];
let list = [{
age: 55}, {
age: 22}, {
age: 11}, {
age: 66}, {
age: 33}];
list.sort((prev,next)=>{
return arr.indexOf(prev.age) - arr.indexOf(next.age);
});
console.log(list); //[{age: 33}, {age: 11}, {age: 66}, {age: 22}, {age: 55}];
5.网页title中插入给定的图表等
比如改变前面的图标，使用比特虫见图片转字体图标；然后再title紧随其下加上即可
<title>投资者关系</title>
<link rel="shortcut icon" href="./images_/header/logo.ico" type="image/x-icon"/>
6.Object.assign(）规范对象合并
/返回的是一个对象数组
const _list = res.list.map(item => {
const str = item.name.replace(/(<\/?span.*?>)/gi, '|');
return Object.assign({
}, {
time: item.time,
content: str.split('|')
})
})
7.小程序切换tab或者onshow时的回到顶部方法
在小程序onShow() 或者wx.switchTab()时调用returnTop方法，实现回到顶部
// 一键回到顶部
returnTop: function (e) {
if (wx.pageScrollTo) {
//判断这个方法是否可用
wx.pageScrollTo({
scrollTop: 0
})
} else {
wx.showModal({
title: '提示',
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
})
}
},
8.分享一个连续解构赋值
对于对象连续调用属性，如ev.currentTarget.dataset.id等，使用解构赋值 可以参考下一个点
//情况1
const {
user_info: {
xcx_user_id } } = app.globalData
//解构出e中的自定义属性
//其中this.data.navigatorUr可以是properties中父组件传递过来的值
toDetail({
currentTarget: {
dataset: {
id } } }) {
//形参就是id
wx.navigateTo({
url: `${
this.data.navigatorUrl}?id=${
id}`
})
}
9.小程序对比使用导航标签和点击事件跳转
<view class="content-item small" bindtap="toStreamerRank" data-tab="2">
<image src='/images/yonghu/home_phb_zhangfen.png' class="content-bg right"></image>
<view class="content-lbl">涨粉榜</view>
</view>
<navigator class="content-item small" url="/pages/hotWords/hotWords" hover-class="navigator-hover">
<image src='/images/zhubo/home_phb_yinlang.png'class="content-bg right"></image>
<view class="content-lbl">抖音热词</view>
</navigator>
toStreamerRank({
currentTarget: {
dataset: {
tab } } }) {
app.globalData.currentTabForStreamer = tab;
//导航不能跳转到tabbar,switchTab可以
wx.switchTab({
url: `/pages/streamerRank/streamerRank`
})
},
}
10.获取输入框焦点索引，方便插入内容
ele 输入框节点；
this.ruleForm.input 输入框的值
let ele = document.querySelector('#groupNameRef');
let i =- 1;
if(ele.selectionStart){
//非IE浏览器
i = ele.selectionStart;
}
let target = ev.target.nodeName==='A'?ev.target:ev.target.parentNode;
let index = target.dataset.index;
if(this.ruleForm.input.indexOf(index) === -1){
//输入框只能出现一次
if(i === -1){
//从头部插入
this.ruleForm.input = `<${
index}>` + this.ruleForm.input;
}else{
this.ruleForm.input = this.ruleForm.input.slice(0,i) + `<${
index}>` + this.ruleForm.input.slice(i);
}
}
11.验证输入框字符（含中文处理）中文算2个字符
subTitle:[{
required: true, message: '请输入副标题', trigger: 'change' },
{
validator: (rule, value, callback) => {
let nameLength = 0;
for(let i = 0;i<value.length;i++){
if(escape(value[i]).indexOf("%u")<0){
//不是中文
nameLength += 1;
}else{
//中文
nameLength += 2;
}
}
if (nameLength < 4) {
callback(new Error('请至少输入4个字符'))
} else if (nameLength > 20){
callback(new Error('请最多输入20个字符'))
}
},
trigger: 'change'
}],
12.看一段获取手机验证码
bind(this)：定时器中的this不是小程序对象，所以要改变this指向，原理很简单
// 获取验证码 也是调用了接口 参数：手机号和标记号
//https://xcx.duolalive.com/apixcx/wx_login.php
//phone:177****6332；send_code: 1
sendCode: function () {
// 60秒后重新获取验证码
this.login(true);
inter = setInterval(function () {
this.setData({
smsFlag: true,
sendColor: '#cccccc',
sendTime: this.data.snsMsgWait + 's后重发',
snsMsgWait: this.data.snsMsgWait - 1
});
if (this.data.snsMsgWait < 0) {
if(inter){
clearInterval(inter) //每次清理一下
}
this.setData({
sendTime: '获取验证码',
snsMsgWait: 60,
smsFlag: false
});
}
}.bind(this), 1000); //注意定时器中的this
},
13.element.ui上传图片视频大小尺寸校验
图片尺寸
beforeUpload：返回false则终止上传
beforeUpload(file) {
const isJpg = /image\/(png|jpe?g|gif)$/.test(file.type);
const isLt1M = file.size / 1024 / 1024 < 1;
if (!isJpg) {
this.$message.error('上传图片只能是 JPG/PNG 格式!');
}
if (!isLt1M) {
this.$message.error('上传图片大小不能超过 1MB!');
}
const isSize = new Promise(function(resolve, reject){
let width = 108;
let height = 108;
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function(){
let valid = img.width == width && img.height == height;
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(()=>{
return file;
}, ()=>{
this.$message.error('上传图片的尺寸建议为108*108!');
return Promise.reject()
});
return isJpg && isLt1M && isSize;
},
视频尺寸
const self = this
const isLt100MB = file.size / 1024 / 1024 < 100;
const isSize = new Promise(function(resolve, reject) {
let _URL = window.URL || window.webkitURL;
let videoElement = document.createElement('video')
videoElement.addEventListener("loadedmetadata", function (_event) {
let width = videoElement.videoWidth;
let height = videoElement.videoHeight;
let duration = videoElement.duration; // 视频时长
if(!isLt100MB) self.$message.error('上传视频大小不能超过100MB！');
if(Math.ceil(duration) <= 4) self.$message.error('上传视频时长不能少于4S!');
let valid = width/height === 9/16 && width >= 720 && height >= 1280;
valid ? resolve() : reject();
});
videoElement.src = _URL.createObjectURL(file)
}).then(() => {
return file;
},() => {
self.$message.error('上传视频尺寸宽高比为9:16,分辨率大于720*1280');
return Promise.reject()
});
return isSize;
14.async/await结合数组循环
async getPostImageId(arr){
await arr.forEach(async item=>{
let params = {
backAcctId:this.backAcctId,
videoId:item.id,
source:this.source || ''
};
const {
data:res} = await axios.post(
//接口名
'/adminjson/ERP_GetSuggestVideo',
//参数
params
);
if(res.body.status === 'SUCCESS'){
//处理成功的方法
}
})
},
15.Object.defineProperty()用法（vue框架双向数据绑定核心之一）
Object.defineProperty(Object1,property,Object2):
Object1:要操作的对象
property：要新增的属性
Object2：配置项包含value，writable(默认false)，configurable(默认false)，enumerable(默认false)，get/set等
let user = {
name:'张三'
}
Object.defineProperty(user,'age',{
value:20,
writable:true, //可修改
enumerable:true, //可枚举
configurable:true //可重新定义特性，包括value,writable,enumerable,configurable等
})
Object.defineProperty(user,'age',{
value:20,
writable:true, //可修改
configurable:false
})
user.age = 30
console.log(Object.keys(user));
console.log(user);
let height = 170;
//get和set方法不可与value同时使用，get和set方法即是vue框架的数据绑定的核心
Object.defineProperty(user,'height',{
// value:190, 报错
get:function(){
console.log('get方法被调用');
return height;
},
set:function(newVal){
console.log('set方法被调用');
height = newVal;
}
})
console.log(user.height); //调用了get方法
user.height = 180; //调用了set方法
console.log(user.height);
转载：https://blog.csdn.net/lwl12345678_/article/details/113637966
查看评论