平常開發問題總結（11-05改）

零、Chrome瀏覽器最小字號

• 問題來源，在產品的設計，UI出圖時，可能會存在一些提示文字，或其餘一些字號較小的文字，在前端使用CSS設置爲相應的字號時，瀏覽器不支持，例設置：font-size: 10px;,但Chrome瀏覽器支持的最小字號是12px。
• 解決方法：使用CSS3的transform屬性的縮放（scale）

-webkit-transform-origin-x: 0; 
-webkit-text-size-adjust:none; // 老版本Chrome解決方案
display: block; // inline 元素須要轉換爲inline-block、block等縮放纔會生效
font-size: 10px !important; // 其餘瀏覽器默認是支持的
transform: scale(0.9) !important;
-webkit-transform: scale(0.9, 0.9) !important;
複製代碼

1、數組排序

• 問題來源：後端返回的數據是一個對象數組，前端須要處理成一箇中英文數組對象進行渲染，每一個對象由中英文兩個key組成,返回的數據由一個key值肯定爲同一文件的不一樣中英文，文件中英文的對象不必定是相鄰且順序返回，且可能含有多個文件的中英文對象。

// 後端返回
[{
    id: 1xxx,
    lan: 'zh-CN',
    number: '12xxx',
    name: 'xxxx'
},
{
    id: 2xxx,
    lan: 'en',
    number: '12xxx',
    name: 'xxxx'
}]
// 前端指望數據格式
[{
    'zh-CN':{
        id: 1xxx,
        lan: 'zh-CN',
        number: '12xxx',
        name: 'xxxx'
    },
    'en':{
        id: 2xxx,
        lan: 'en',
        number: '12xxx',
        name: 'xxxx'
    }
}]
複製代碼

• 處理方法：根據相同文件中英文惟一key對後端返回的數組對象進行排序，排序後取相鄰的兩個判斷中英文賦值給新的數組，最後返回新的數組（注：與後端約定，後端返回的數據一定爲偶數，且含有對應的中英文；保險起見，判斷後端返回的數據長度，及返回的key數組是否爲數組長度的一半。）

關鍵方法：數組排序（未肯定惟一key是數字仍是字符串）
/** 惟一key是數字或數字的字符串
/* arr 排序的數組
/* key 排序的key
/* return Array
**/
 function arraySortbyKey (arr, key) {
    if (Array.isArray(arr) && arr.length > 0 && key) {
        return arr.sort((a, b) => {
            let x = a[key]
            let y = b[key]
            return x - y
        })
    }
    return arr
}
/** 惟一key是字符串
/* key 排序的key
/* desc 是否降序排序
/* option key值的操做 例：轉爲數字，取值前幾位數字
/* return Array
**/
function arraySortbyKey (key,desc, option){
  desc = (desc) ? -1 : 1;
  return function (a, b) {
    a = a[key];
    b = b[key];
    if ( option && Object.prototype.toString.call(option) === "[object Function]" ) {
      a = option(a);
      b = option(b);
    }
    if (a < b) { return desc * -1; }
    if (a > b) { return desc * 1; }
    return 1;
  }
};
複製代碼

2、變量替換

• 問題來源：一些文章須要根據不一樣的閱讀人，一些地方展現不一樣的信息，例如：當前的閱讀人、當前的日期、用戶當前設置的語言等等。

// 後端返回
"當前的閱讀人是{{user.name.firstname}},閱讀時間{{date}}，閱讀語言是{{lang}}"
obj={user: { // 多級
        name: {
            firstname: 'detanx'
        }
}}
// 前端顯示
"當前的閱讀人是detanx,閱讀時間2019-9-21，閱讀語言是中文"
複製代碼

• 處理方法：首先和文章模版的編輯人約定文章中的變量以怎麼樣的特殊符號包裹，變量是否存在多級的狀況（例如：{user: {name: {firstname: 'xxx'}}}），約定好變量的規則（注：約定規則應該避免經常使用的一些符號，例如：《》，（），{}，<>，「」，''，""等等文章中會用到符號，約定好後，特殊符號只能用來包裹變量）。

/** 變量替換
/* content 含有變量的字符串
/* varsObj 變量對象
/* return String
**/
function varsReplace(content, varsObj) {
    const SYMBOL_REGEXP = /\{{(.+?)\}}/g
    const VARS_ARRAY = content.match(SYMBOL_REGEXP)
    if(VARS_ARRAY){
        for(let variable of VARS_ARRAY){
            const varChartArray = varChart.slice(2,-2).split('.')
            const len = varChartArray.length
            let value = varsObj[varChartArray[0]]
            for ( let i = 1; i < len; i ++) {
                value = value[varChartArray[i]]
            }
            content = content.replace(variable,value)
        }
    }
    return content
}
複製代碼

3、JavaScript大數處理

• 問題來源：在先後端接口的請求中，後端的數據爲int64，可是js中沒法表示出對應的number型數據，後端接口又必須接受int型，因此前端須要提交前處理成後端須要的大數（JavaScript能表示並進行精確算術運算的整數範圍爲：正負2的53次方，也即從最小值-9007199254740992到最大值+9007199254740992之間的範圍；這兩個邊界值能夠分別經過訪問Number對象的MAX_VALUE屬性和MIN_VALUE屬性來獲取。）
  npm - bignumber.js
  

// 使用bignumber.js
# 安裝
$ npm install bignumber.js
# 使用
const BigNumber = require('bignumber.js');
複製代碼

4、輸入框特殊處理

• 問題來源：用戶在輸入金額或者其餘的數字類型的時候，只能輸入數字相關的數據，而且必須符合規範（例如：輸入框只能輸入+、-、.、1～9）,輸入後若是金額非小數點位數大於3位，須要安裝千分位的顯示格式顯示，而且輸入的金額有大小範圍顯示。
  npm - vue-cleave-component
  options - 配置地址

安裝
# npm 
npm install vue-cleave-component --save
# Yarn 
yarn add vue-cleave-component
使用
# HTML
<template>
  <div>
    <cleave v-model="value" 
    :options="cleaveOptions"
    @focus.native="setFocusInputBorder()"
    @blur.native="calPledgeAmount()" 
    @keyup.native.enter="calPledgeAmount()"
    class="cleave-class" name="detanx"></cleave>
  </div>
</template>
# script
<script>
  import Cleave from 'vue-cleave-component';
    
  export default {    
    data () {
      return {
        value: '', 
        cleaveOptions: {
            numeral: true, // 輸入爲數字
            numeralDecimalScale: 4 // 小數後可輸入幾位
        }      
      }
    },
    components: {
      Cleave
    },
    method:{
        setFocusInputBorder(){},
        calPledgeAmount(){},
    }
  }
</script>
複製代碼

5、數字格式化

• 問題來源：在顯示數字的時候，須要使用美圓的千分位顯示規則顯示（數字小數點左邊每三位添加一個逗號，如：1000000.111 應該顯示爲 1,000,000.111 ）。
• 處理方法

// 判斷傳入值是否爲空，具體能夠根據業務需求修改
function isEmpty(value) {
    return [null, undefined, NaN, 'NaN', '', ' ', 'null', 'undefined', '0', 0].includes(value)
}
// 數字格式化
function numFormat(num) {
    if(isEmpty(num) || isNaN(num) ) { // 判斷是否爲空或無效值
        return '0.00'
    }
    if (Math.abs(+num) < 1000) { // 數字的絕對值是否小於1000，小於1000直接返回
        return num;
    }
    return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','));
}
複製代碼

6、node-sass

• 問題來源：正常在項目中想要使用node-sass，直接使用npm install node-sass會安裝失敗，或提示沒有權限。
• 處理方法

npm install
npm install node-sass --unsafe-perm=true --allow-root
複製代碼