偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

提升前端開發(fā)質(zhì)量的十點經(jīng)驗沉淀

開發(fā) 前端
特別是網(wǎng)絡(luò)請求或者其他異步操作中,await? 記得包裹 try catch?,可以給用戶一個友好提示,同時可以考慮 catch 中需要做什么兜底處理,必要時進行上傳日志。

分享一下平常開發(fā)經(jīng)常出現(xiàn)問題,增加代碼質(zhì)量的十個小點:

記得錯誤處理

特別是網(wǎng)絡(luò)請求或者其他異步操作中,await? 記得包裹 try catch?,可以給用戶一個友好提示,同時可以考慮 catch 中需要做什么兜底處理,必要時進行上傳日志。

try {
this.loading = this.$loading({
lock: true,
text: '加載中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
});
const info = await resDistributeService({ taskTicketId: this.id });
...
} catch (e) {
this.$message({
type: 'error',
message: e.msg || e.message || '失敗',
});
} finally {
this.loading.close();
}

可以結(jié)合 finally?,處理 loading 等。

數(shù)字 0 的校驗

前端經(jīng)常使用 !v? ,來判斷 v 是不是有值。

if(!v){
return
}
doSomething()

但如果 0? 是 v? 的有效值 ,此時本該處理,但會提前結(jié)束,最終引發(fā)錯誤。此時需要顯示的判斷是否是 null? 或者 undefined 。

if(v === null || v=== undefined){
return
}
doSomething()

默認對象采用函數(shù)返回

由于 js 中的對象是引用,因此賦默認值的時候最好通過函數(shù),每次都返回一個新對象。

bad:

const defaultCondition = {
name: '',
conditionList: [
{
conditionCode: '',
conditionValue: null,
},
],
}
export default {
data() {
return {
condition: {...defaultCondition},
};
},
methods: {
closeDialog() {
this.condition = {...defaultCondition};
this.configId = null;
this.$refs.form.resetFields();
},
},
};

good:

const getDefaultCondition = () => ({
name: '',
conditionList: [
{
conditionCode: '',
conditionValue: null,
},
],
})
export default {
data() {
return {
condition: getDefaultCondition(),
};
},
methods: {
closeDialog() {
this.condition = getDefaultCondition();
this.configId = null;
this.$refs.form.resetFields();
},
},
};

接口地址單獨存放

將接口的定義放到統(tǒng)一文件中,未來變動改動起來會比較方便,如果各個 url 都寫死在頁面中以后就很麻煩了。

// service.js
import request from 'utils/request';

const service = new (request('/api/m/mallorder/exp/compensation/customer'))();

export const listService = (params) => {
return service.post('/queryRuleList', params);
};

export const listDataKey = 'ruleVOList';
export const idKey = 'ruleId';

export const dialogEnumService = () => {
return service.get('/info');
};

export const saveService = (params) => {
return service.post('/saveRule', params);
};

export const detailService = (params) => {
return service.get('/detail', params);
};

此外,網(wǎng)絡(luò)請求一般都會在 npm 包的基礎(chǔ)上自己再包一層,一方面可以注入共用參數(shù),另一方面可以對返回數(shù)據(jù)進行統(tǒng)一的錯誤處理。

函數(shù)多參數(shù)采用對象

如果定義一個函數(shù)需要 3 個以上的參數(shù)

function(a,b,c,d){

}

此時可以考慮采用對象解構(gòu),改為

function({a=1,b,c,d}={}){

}

好處是未來需要擴展參數(shù)的時候,不需要太擔心其他地方調(diào)用時候傳參是否會引起問題。

當然,如果參數(shù)過多也需要思考一下當前函數(shù)是否承載了太多的功能,進行一下功能上的拆分。

函數(shù)單一職責

當我們已經(jīng)定義了一個函數(shù),比如去初始一些變量。

function initOptions(){
a = xxx
b = xxx
}

此時我們需要做另一件無關(guān)的事 【A】,雖然它和 initOptions? 調(diào)用的時機一致,但最好不要直接放到 initOptions 中,而是新建一個函數(shù)單獨調(diào)用。

不然未來如果其他地方也要調(diào) initOptions?,但此時可能并不需要做【A】這件事情就會引起 bug。

參數(shù)合法性判斷

由于 js 語言的靈活性,函數(shù)傳入的參數(shù)很可能不符合預(yù)期,必要時我們需要進行判斷并且進行兜底處理,不可完全信任調(diào)用方。

團隊合作中,該函數(shù)在未來極大可能會被其他人調(diào)用。

function doSomeThing(params1, params2) {
if(params1 === null){
return;
}
if(params2){
...
}
// 再去做我們的事情
}

如果后邊的流程強依賴于 params?,我們可以直接 return?,必要時也可以上報日志或者 throw Error。

整數(shù)的處理

js? 中沒有整數(shù)類型,即 java? 中的 int、long? 這些,所有數(shù)字都遵循 IEEE 754? 標準,即 java? 中的 double? 類型,詳細的可參考 浮點數(shù)詳解。

可以精確表示的最大整數(shù)是 9007199254740991?,共 16 位,超過這個數(shù)精度可能會丟失,對于新接口,可以問一下后端相應(yīng)數(shù)字字段的最大值會是多少。

對于浮點數(shù)的處理,除了眾所周知的 0.1 + 0.2 === 0.3? 的值為 false 外,當我們對數(shù)字進行運算的時候也需要注意。

常見的將 9.04? 元轉(zhuǎn)為 904 分:

圖片

我們需要對結(jié)果進行取整處理。

圖片

可選鏈

可選鏈操作符,參考 MDN ,用的比較多。

和后端定的數(shù)組或者對象,后端有時候返回來的很可能是 null 甚至沒有該字段,因此前端可以用可選鏈操作符用于數(shù)組、對象、函數(shù),防止出現(xiàn)錯誤直接阻斷后續(xù)流程。

let nestedProp = obj.first?.second; // 等效于 obj.first && obj.fisrt.second
//后續(xù)流程

但不要過度使用可選鏈,如果某些地方理論上不會出問題,比如 let test = obj.first?.second?,如果 second? 一定能取到,我們直接 let test = obj.first.second 即可。

不然未來如果這里由于某種原因出了問題導(dǎo)致 obj.first? 是 null?,但我們使用了可選鏈,所以 obj.first?.second 也不會報錯,我們就永遠不會知道這里出現(xiàn)問題了。

當然也需要權(quán)衡下,不加可選鏈造成 js Error 會不會影響業(yè)務(wù)邏輯。

對象or數(shù)組引用

修改或者使用對象、數(shù)組時,時刻切記它們?yōu)橐茫惶幮薷臅斐商幪幮薷摹?/p>

責任編輯:武曉燕 來源: windliang
相關(guān)推薦

2012-01-13 10:36:07

2012-10-23 11:14:45

BYOD移動設(shè)備管理移動設(shè)備

2024-05-14 10:03:51

2010-02-26 09:08:14

Android系統(tǒng)改進

2012-09-05 09:40:29

2009-06-02 11:25:22

HibernateJPA映射

2021-11-25 07:46:06

云計算云計算環(huán)境云應(yīng)用

2012-02-14 14:59:45

2025-03-03 00:44:44

2009-05-18 18:02:43

2010-05-04 09:55:31

Windows 7系統(tǒng)

2017-03-25 19:55:38

Linux系統(tǒng)開源

2009-02-27 17:16:00

刀片服務(wù)器服務(wù)器

2013-09-22 10:38:46

代碼優(yōu)化經(jīng)驗

2013-01-06 10:53:10

2009-04-16 19:51:31

2015-05-08 09:47:35

2020-11-18 07:52:57

技巧

2020-12-10 16:20:30

Vue前端架構(gòu)

2012-02-20 16:01:49

一體機評測
點贊
收藏

51CTO技術(shù)棧公眾號