前端-杂记

很久没有写博客，今天随意写点

近来一直在写前端业务逻辑代码，由于之前学习和使用的都是大杂烩，对专业的前端代码书写很乏力，主要是前端代码思想这块，能实现功能，但不够高效，不够简练。

界面使用Element UI框架，通过文档和案例构造出项目需要的逻辑组件。

在工作途中，首次使用java的websocket和js的websocket通信，在vue中实现订阅主推显示实时行情，这块内容挺有意思，初时脸盲很懵，磕磕绊绊，然后逐渐梳理，清楚了逻辑关系。

在前端代码里时常会处理数组对象，处理数据类型，处理数据精度等，这里稍作记录：

1，使用BigNumber对象实现 js 数据的精度需求，具体代码例如：

let avaliable = new BigNumber(x).minus(y)
.plus(z).minus(o).plus(p).minus(q)
avaliable.toFormat()

2，使用 || 和 && 避免的问题

if(!oldCurrentRow || currentRow.row_id!==oldCurrentRow.row_id){}

这个判断里 oldCurrentRow 对象可能会空，会导致 oldCurrentRow.row_id 报错，排除这种问题时可以使用 || ，若前半部分为 true 后半部分的逻辑就不会进行，保证执行后半代码时 oldCurrentRow 为非空。

3，数组去重

let obj = {}
data=data.reduce((cur,next)=>{
  obj[next.value] ? "" : obj[next.value] = true && cur.push(next);
  return cur;
},[])

4，使用 catch 给出提醒报错

      cancelOrder(){
        this.$alert('您确定要撤销此订单么？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$post('xxx.json', {
            yy: zz //入参
          }).then(resp => {
            this.$message.success('撤单成功')
          }).catch(() => {
            this.$message.error('撤单失败')
          })
        }).catch(() => {
          this.$message.info('已取消撤单')
        })
      },

5，使用 forEach 和 push 将数据集过滤成需要的数组对象

      doHandle(){
        let symbols = []
        this.allSymbols.forEach(item=>{
          if(item.no== this.selectedRow.no){
            symbols.push({
              lable:item.name,
              value:item.no,
            })
          }
        })
      },

6，定时查询指定方法，在生命周期结束时停止查询

      //需要执行的方法
      searchSecurity(){
         …………        
      },
      //定时查询,30s
      setInterval(){
        this.intervalFlag = setInterval(this.searchSecurity, 30000);
      },
      //生命周期结束，取消定时查询
      beforeDestroy(){        
        clearInterval(this.intervalFlag)      
      },

7，字符串误认为数字类型而做加法。将字符串乘1来转成数字类型；以及四舍五入截取指定位数小数

          let ratio=(this.lever_ratio*1+1)*100/(this.lever_ratio)
          ratio=ratio.toFixed(4)