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-uploadv-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时的回到顶部方法

场景1：在小程序onShow() 或者wx.switchTab()时调用returnTop方法，实现回到顶部;
场景2：在scroll-view滚动条组件中定义scroll-top，每次让scroll-top = 0 即可

  // 一键回到顶部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 } } }) {   //形参就是idwx.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: 1sendCode: 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);

16.el-table列表循环

 <el-table :data="tableData"@sort-change='sortChange'height="100%"border><el-table-column v-for="col in cols":sortable='col.isSortable':label="col.label" :fixed='col.isFixed' :width='col.width'><template slot-scope="scope"><span>{{ scope.row[col.prop] | fileterEmpty}}</span></template></el-table-column>
</el-table>

cols:[{prop: 'createTime', label: '日期',width:100,isFixed:true}
]

17.el-date-picker时间选择器

设置某个日期后面的时间不给选

 <el-date-pickerstyle="width:240px;margin-right: 20px;"v-model="dayVal"type="daterange"range-separator="-"        start-placeholder="开始日期"end-placeholder="结束日期"format="yyyy-MM-dd" value-format="yyyy-MM-dd":picker-options='pickerOptions'>
</el-date-picker>

//定义在data中
pickerOptions: {disabledDate:function(time){// 选当前时间之前的时间return time.getTime() > (Date.now()-24*60*60*1000) }
},

18.中文按拼音首字母排序

const pySegSort=(arr) =>{if (!String.prototype.localeCompare) return nulllet letters = 'abcdefghjklmnopqrstwxyz'.split('')let zh = '阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀'.split('')let segs = []letters.map((item, i) => {let cur = { letter: item, data: [] }arr.map((item) => {if(item.localeCompare(zh[i])>=0&&item.localeCompare(zh[i+1])<0){cur.data.push(item)}         })if (cur.data.length) {   cur.data.sort(function(a, b) {return a.localeCompare(b, 'zh')})segs.push(cur)}})return segs
}
let newArr = pySegSort(['黄杰',"皇家",'黄凯乐','小莫','小新','小幸福','善林','嘉诚']).map(item=>{return item.data;
});
console.log(newArr);