狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

10年前端的一些開發(fā)經(jīng)驗(yàn)總結(jié)

liguoquan
2024年10月28日 15:44 本文熱度 587
:10年前端的一些開發(fā)經(jīng)驗(yàn)總結(jié)


10年前端的一些開發(fā)經(jīng)驗(yàn)總結(jié)

?10年前端的一些開發(fā)經(jīng)驗(yàn)總結(jié)開發(fā)注意事項(xiàng) 考慮邊界值:如果要展示一個列表,就要考慮列表為空、列表長度超過一頁的情況;如果 - 掘金

開發(fā)注意事項(xiàng)

  • 考慮邊界值:如果要展示一個列表,就要考慮列表為空、列表長度超過一頁的情況;如果展示的是文字,則要考慮文字為空、文字超長的情況;訪問a.b.c時,a或b是否可能為undefined。
  • 考慮特殊場景:如交互狀態(tài)(hover、disabled、文字提示)、浮點(diǎn)數(shù)計(jì)算精度(使用utils方法)、防重復(fù)提交、分辨率兼容、移動設(shè)備兼容、事件冒泡、防抖和節(jié)流;
  • 考慮需求變更和功能拓展:需求變更是不可避免的,那就要在開發(fā)的時候考慮到哪些地方容易變(數(shù)值、變量),哪些不容易變(框架、模式),提前做好設(shè)計(jì)規(guī)劃,減少因需求變更造成的大規(guī)模重構(gòu)。
  • 考慮代碼可讀性:復(fù)雜方法標(biāo)注用途、復(fù)雜邏輯解釋清楚、修改他人代碼先理解上下文并做好自測。
  • 保持優(yōu)化代碼的好習(xí)慣:所有不合理的問題,都是可以改的,代價(jià)大,就細(xì)致謀劃,不要擱置,避免埋雷。

代碼越短就越好嗎?

實(shí)際的業(yè)務(wù)書寫中,如果減少10%的代碼換來的是可讀性變差,那并不推薦這么做。我們推薦的是,在保證可讀性的前提下,盡可能讓代碼變少。

javascript代碼解讀復(fù)制代碼// bad 三元嵌套三元不利于可讀性 let message = (age < 3) ? 'Hi, baby!' :   (age < 80) ? 'Hello!' :   'What an unusual age!';  // good if (age < 3) {   message = 'Hi, baby!'; } else if (age < 80) {   message = 'Hello!'; } else {   message = 'What an unusual age!'; }  // bad if (company == 'Netscape') {   return true; } else {   return false; }  // good return company === 'Netscape'; 

魔法值的問題

魔法值,也叫做魔法數(shù)值、魔法數(shù)字,通常是指在代碼編寫時莫名出現(xiàn)的數(shù)字, 無法直接判斷數(shù)值代表的含義,必須通過聯(lián)系代碼上下文分析才可以明白, 嚴(yán)重降低了代碼的可讀性。 除數(shù)字之外,代碼中作為key值的常量字符串也被認(rèn)為是魔法值, 盡管其表示含義比數(shù)值較為清晰,但是仍然會產(chǎn)生不規(guī)范問題。

javascript代碼解讀復(fù)制代碼// 魔法值舉例 if(flag === '5'){   ....... }  if (businessType === 101){   ....... } 

通常會采用枚舉類型來解決魔法值問題,由于JS中沒有枚舉類型,可以使用對象字面量的方式來模擬枚舉,如下:

javascript代碼解讀復(fù)制代碼    const BusinessTypeEnum = {       SYSTEM: 0, // 系統(tǒng)       CRM: 1, // CRM       JXC: 2, // JXC       UNKNOWN: 404, // 未知對象類型       CUSTOMER_MANAGEMENT: 100, // 客戶管理       CUSTOMER: 101, // 客戶       CUSTOMER_FOCUS: 102, // 重點(diǎn)客戶       CUSTOMER_DEAL: 103, // 成交客戶       CUSTOMER_FOLLOW: 104, // 跟進(jìn)客戶       CUSTOMER_PUBLIC: 105 // 客戶公海池     }          if (businessType === BusinessTypeEnum.CUSTOMER){       .......     } 

采用枚舉的另外一個好處,當(dāng)某個值因?yàn)樾枨蟮枨笞兏鼤r,我們只需要在枚舉中將該值替換,并不需要在全局搜素替換。

程序中的電車難題

 如圖,當(dāng)一輛電車快速駛來,無論圖上的人采取哪種選擇,似乎都是錯誤的。

但是,在程序中出現(xiàn)預(yù)期之外的錯誤必須要導(dǎo)致一個負(fù)面結(jié)果時,一定要選擇代價(jià)最小的。

舉個例子: 某同學(xué)開發(fā)了一個新手引導(dǎo)彈窗功能,該功能有個透明的全屏遮罩,只有當(dāng)新手引導(dǎo)結(jié)束時,遮罩才會消失。由于程序中存在一處邏輯判斷不嚴(yán)謹(jǐn),導(dǎo)致在特定情況下全屏遮罩不能被關(guān)閉,然后整個系統(tǒng)都不能被點(diǎn)擊了。一個簡單的新手引導(dǎo)功能卻引發(fā)了系統(tǒng)不可用的嚴(yán)重故障,這是非常大的代價(jià)。

通過上述例子去分析,系統(tǒng)不可用的負(fù)面影響遠(yuǎn)大于新手引導(dǎo)不可用。因此,我們應(yīng)該修改邏輯判斷方案,當(dāng)程序脫離預(yù)期執(zhí)行時,直接去關(guān)閉新手引導(dǎo)。

javascript代碼解讀復(fù)制代碼    // before     if (step === 0) {       dialog.close()     } else {       dialog.show()     }          // after     if ([1, 2, 3].includes(step)) {       dialog.show()     } else {       dialog.close()     } 

我們無法保證自己寫的代碼沒有任何差錯,但是我們可以提前考慮,萬一發(fā)生預(yù)期之外的錯誤,我們要如何處理來讓損失最低。

不要讓用戶等待

由用戶觸發(fā)的交互操作,應(yīng)立即給予響應(yīng)。立即響應(yīng)不等于立即呈現(xiàn)數(shù)據(jù),有些異步操作,無法立即呈現(xiàn)數(shù)據(jù)給用戶,但應(yīng)馬上給予loading提示,告知用戶數(shù)據(jù)正在處理中。

下面的代碼中,用戶點(diǎn)擊編輯按鈕時,會先發(fā)起一個異步請求,拿到數(shù)據(jù)結(jié)果后再顯示彈窗。這個短暫且沒有任何提示的等待,會讓用戶認(rèn)為是程序卡頓,體驗(yàn)不暢,間接誘導(dǎo)用戶重復(fù)點(diǎn)擊按鈕。

正確的做法應(yīng)該是先展示彈窗,再去請求數(shù)據(jù)。

三元和if該怎么選?

javascript代碼解讀復(fù)制代碼    // 如果條件表達(dá)式后面跟的是返回值,建議使用三元運(yùn)算,如下方的例子,就可以優(yōu)先考慮使用三元運(yùn)算     // good     a > b ? 1 : 2          // bad     if (a > b) {       return 1     } else {       return 2     }          // 其他復(fù)雜的分支代碼,寫成三元可能并不利于閱讀,建議使用if語句,如下面的例子     // good     if (a > b && b !== 0) {       val = a + b     } else {       val = a - b     }          // bad     a > b && b !== 0 ? val = a + b : val = a - b 

while和for該怎么選?

for循環(huán)往往是用來遍歷一個固定長度的可迭代對象,遍歷的次數(shù)一定是<=可迭代對象的長度,如數(shù)組遍歷、對象遍歷等等;for和while在絕大部分場景下都可以互換,只是部分場景下,使用while會更符合我們的直覺。while循環(huán)往往用于不定次數(shù)的條件執(zhí)行,即達(dá)到目標(biāo)條件就終止,但我們事先并不知道達(dá)到這個目標(biāo)條件需要進(jìn)行多少次執(zhí)行。舉個例子,我們希望從1開始,取前10個能整除3或5的數(shù)字,參考如下代碼:

javascript代碼解讀復(fù)制代碼    let numArr = []     let i = 1     while (numArr.length < 10) {       if (i % 3 === 0 || i % 5 === ) {         numArr.push(i)       }       i++     } 

while在某些場景下,可以代替遞歸函數(shù)。比如我們希望得到100以內(nèi)的斐波那契數(shù)列:

javascript代碼解讀復(fù)制代碼    // 使用遞歸     function fib (prev = 0, next = 1) {       if (next < 100) {         return [next, ...fib(next, prev + next)]       }       return []     }          // 使用while     functon fib2 (n = 100) {       let prev = 0       let next = 1       let result = []       while (next < n) {         result.push(next)         const temp = prev         prev = next         next = next + temp       }       return result     } 

上面的例子很難用for循環(huán)去實(shí)現(xiàn),因?yàn)槲覀儾⒉恢?00以內(nèi)存在多少個斐波那契數(shù)字,但知道終止條件是數(shù)字必須小于100,因此更適合用while循環(huán)來實(shí)現(xiàn)。再來說說遞歸和while,遞歸往往在代碼量上來看是簡潔的,但本質(zhì)上它是一個N層的函數(shù)嵌套,所以直覺上不易理解,且耗性能(不考慮尾遞歸優(yōu)化的前提下);while循環(huán)只有一層嵌套,所以直覺上更容易理解,且性能更優(yōu)。這里并不是說遞歸不好,不推薦大家使用,一來性能并不是大家首先要考慮的問題,二來while只能在部分場景中來代替遞歸。


該文章在 2024/10/28 15:44:04 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點(diǎn),圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi),不限功能、不限時間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved