2020.10-2021.01前端開發部分總結

阿新 • • 發佈：2021-02-12

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