2020.10-2021.01前端开发部分总结

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>
  <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
  },