问题记录-优化

点击元素外部元素

在html 添加 data-ref
<div data-ref="set" onclick="handle">
  <div>inner</div>
</div>
function handle(ev){
   if(ev.target.dataset.ref=="handle"){
     console.log("这是点击了 inner元素外面的元素")
   }
}

target与currentTarget 
target  表示的是事件发生的元素   (点击的元素 div div.inner)
currentTarget描述的是事件处理绑定的元素(外部的 div)

input 问题

键盘小数点

type=“digit”

输入控制2位小数

    <input type="digit"  placeholder="请输入具体金额" placeholder-class="placeholderStyle" bindinput="doInput"  />

    let itemList=this.data.itemList;
    //找到变化项的序号
    let index=itemList.findIndex(item=>item.name==e.target.dataset.name);
    //只能输入两个小数 
     let inputVal= e.detail.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
     //赋值
    itemList[index].value=inputVal;
    //返回正则过滤后的数据
    return inputVal;

字符串 转 对象

1.JSON.parse()

当key值没有引号的时候就会报错
Unexpected token n in JSON at position 1
比如 (‘{name:1}’)

2.new Function 自执行

(new Function("return " + ‘{name:1}’))()

node-sass

一般安装 sass-loader之后 需要安装 node-sass
安装node-sass报错
Syntax Error: Error: PostCSS received undefined instead of CSS string

npm ERR! errno 1
npm ERR! node-sass@4.14.1 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@4.14.1 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

安装淘宝镜像
#安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后再次安装node-sass

less 一般安装less less-loader就可以了

md文件目录生成

npm install mddir --save
cd node_modules/mddir/src
node mddir "../../../"//即根目录
直接使用tree
tree -L 2 -I "node_modules"

优化if-else

1.JSON-----------------------------------------------------------
switch(color) {
    case 'black':
        printBlackBackground();
        break;
    case 'red':
        printRedBackground();
        break;
    case 'blue':
        printBlueBackground();
        break;
    case 'green':
        printGreenBackground();
        break;
    default:
        printYellowBackground();
}
let  colorMap = {
    black: printBlackBackground,
    red: printRedBackground,
    blue: printBlueBackground,
    green: printGreenBackground,
    yellow: printYellowBackground
}
colorMap[color]? colorMap[color]() : printYellowBackground()

 2.new Map-----------------------------------------------------------
function previewWeek(i){
    let weeksMap = new Map([
        [1, '一'],
        [2, '二'],
        [3, '三'],
        [4, '四'],
        [5, '五'],
        [6, '六'],
        [7, '日']
    ]);
    return weeksMap.get(i)?'星期'+weeksMap.get(i):''
}
3. 数组+索引-----------------------------------------------------------
function previewWeek(i){
    return  i>0 && i<8 ?'星期'+['一','二','三','四','五','六','日'][i-1]:''
}
4.三目运算-----------------------------------------------------------------
function previewWeek(i){
    return  i==1?'星期一':
            i==2?'星期二':
            i==3?'星期三':
            i==4?'星期四':
            i==5?'星期五':
            i==6?'星期六':
            i==7?'星期日':''  
}
5.includes + 三元-----------------------------------------------------------------
function verifyIdentity(identityId){
    return [1,2,3,4].includes(identityId)?'你的身份合法，请通行！':'你的身份未知，警告！'
}
6.单个if优化-----------------------------------------------------------------
function log(){
    console.log('前面的flag为真，就会看到我')
}
let flag = true
flag && log()
-----------------------------------------------------------------
if(a && b){
    c()
}

//=> 优化后 a && b && c()

带小数点的 计算精度解决

calculation.js

var countDecimals = function(num) {
  var len = 0;
  try {
    num = Number(num);
    var str = num.toString().toUpperCase();
    if (str.split('E').length === 2) { // scientific notation
      var isDecimal = false;
      if (str.split('.').length === 2) {
        str = str.split('.')[1];
        if (parseInt(str.split('E')[0]) !== 0) {
          isDecimal = true;
        }
      }
      let x = str.split('E');
      if (isDecimal) {
        len = x[0].length;
      }
      len -= parseInt(x[1]);
    } else if (str.split('.').length === 2) { // decimal
      if (parseInt(str.split('.')[1]) !== 0) {
        len = str.split('.')[1].length;
      }
    }
  } catch (e) {
    throw e;
  } finally {
    if (isNaN(len) || len < 0) {
      len = 0;
    }
    return len;
  }
};

var convertToInt = function(num) {
  num = Number(num);
  var newNum = num;
  var times = countDecimals(num);
  var temp_num = num.toString().toUpperCase();
  if (temp_num.split('E').length === 2) {
    newNum = Math.round(num * Math.pow(10, times));
  } else {
    newNum = Number(temp_num.replace(".", ""));
  }
  return newNum;
};

var getCorrectResult = function(type, num1, num2, result) {
  var temp_result = 0;
  switch (type) {
    case "add":
      temp_result = num1 + num2;
      break;
    case "sub":
      temp_result = num1 - num2;
      break;
    case "div":
      temp_result = num1 / num2;
      break;
    case "mul":
      temp_result = num1 * num2;
      break;
  }
  if (Math.abs(result - temp_result) > 1) {
    return temp_result;
  }
  return result;
};
export default {
  //加法
  accAdd(num1, num2) {
    num1 = Number(num1);
    num2 = Number(num2);
    var dec1, dec2, times;
    try { dec1 = countDecimals(num1) + 1; } catch (e) { dec1 = 0; }
    try { dec2 = countDecimals(num2) + 1; } catch (e) { dec2 = 0; }
    times = Math.pow(10, Math.max(dec1, dec2));
    // var result = (num1 * times + num2 * times) / times;
    var result = (this.accMul(num1, times) + this.accMul(num2, times)) / times;
    return getCorrectResult("add", num1, num2, result);
    // return result;
  },
  //减法
  accSub(num1, num2) {
    num1 = Number(num1);
    num2 = Number(num2);
    var dec1, dec2, times;
    try { dec1 = countDecimals(num1) + 1; } catch (e) { dec1 = 0; }
    try { dec2 = countDecimals(num2) + 1; } catch (e) { dec2 = 0; }
    times = Math.pow(10, Math.max(dec1, dec2));
    // var result = Number(((num1 * times - num2 * times) / times);
    var result = Number((this.accMul(num1, times) - this.accMul(num2, times)) / times);
    return getCorrectResult("sub", num1, num2, result);
    // return result;
  },
  //除法
  accDiv(num1, num2) {
    num1 = Number(num1);
    num2 = Number(num2);
    var t1 = 0,
      t2 = 0,
      dec1, dec2;
    try { t1 = countDecimals(num1); } catch (e) {}
    try { t2 = countDecimals(num2); } catch (e) {}
    dec1 = convertToInt(num1);
    dec2 = convertToInt(num2);
    var result = this.accMul((dec1 / dec2), Math.pow(10, t2 - t1));
    return getCorrectResult("div", num1, num2, result);
    // return result;
  },
  //乘法
  accMul(num1, num2) {
    num1 = Number(num1);
    num2 = Number(num2);
    var times = 0,
      s1 = num1.toString(),
      s2 = num2.toString();
    try { times += countDecimals(s1); } catch (e) {}
    try { times += countDecimals(s2); } catch (e) {}
    var result = convertToInt(s1) * convertToInt(s2) / Math.pow(10, times);
    return getCorrectResult("mul", num1, num2, result);
    // return result;
  }
}

main引入calculation文件
import cal from '@/utils/calculation'

Vue.prototype.$math = cal;

this.$math.accSub(a,b) // a-b 
this.$math.accMul(a,b)//a*b
this.$math.accAdd(a,b)//a+b
this.$math.accDiv(a,b); // a/b