整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
介： 和大家一起探討一下優(yōu)雅代碼
談到好代碼，我的第一想法就是優(yōu)雅，那我們?nèi)绾卧搶懗龊玫拇a，讓閱讀的人感受到優(yōu)雅呢？首先簡單探討一下優(yōu)雅代碼的定義
關(guān)于好代碼的定義，各路大神都給出了自己的定義和見解
首先要達(dá)成一致，我們寫的代碼，除了用于機(jī)器執(zhí)行產(chǎn)生我們預(yù)期的效果之外，更多的時候是給人讀的，可能是后續(xù)的維護(hù)人員，更多時候是一段時間后的作者本人，因此優(yōu)雅面向不同的用戶有兩層含義的解讀
這次，我們就來聊一聊，什么代碼是優(yōu)雅的代碼，怎樣寫出優(yōu)雅的代碼
簡單說就是類、方法、變量的命名要名副其實(shí)，要能描述清晰自己的職責(zé)。一個好的命名能輸出更多的信息，它會告訴你，它為什么存在，它是做什么事的，應(yīng)該怎么使用。一個簡單的衡量標(biāo)準(zhǔn)是，如果命名完仍需要注釋來補(bǔ)充語義，那就不是名副其實(shí)；
選個好名字要花時間，但省下的時間的時間比花掉的多，一旦發(fā)現(xiàn)有更好的名稱，就換掉舊的。
舉個栗子
public List<int[]> getItem() {
List<int[]> list1=new ArrayList<int[]>();
for (int[] x: theList)
if (x[0]==4)
list1.add(x);
return list1;
}整體邏輯沒啥問題，讀完之后，就有很多問題在腦海中產(chǎn)生
代碼應(yīng)該體現(xiàn)所處的情景，比方說上述的代碼所處情景是我們正在開發(fā)一種掃雷游戲，盤面是名為theList的單元格列表，那就將其名稱改為gameBoard。
盤面上每個單元格都用一個簡單數(shù)組表示。零下標(biāo)條目是一種狀態(tài)值，而這種狀態(tài)值為4代表“已標(biāo)記”。只要改為有意義的名稱，代碼就得到了改進(jìn)。
更進(jìn)一步，不用int數(shù)組來表示單元格，而是另寫一個類。該類包括一個名副其實(shí)的函數(shù)（稱為isFlagged），從而掩蓋住哪個魔術(shù)數(shù)4，得到新的函數(shù)版本。
public List<Cell> getFlaggedCells() {
List<Cell> flaggedCells=new ArrayList<Cell>();
for (Cell cell : gameBoard)
if (cell.isFlagged())
flaggedCells.add(cell);
return flaggedCells;
}實(shí)際上，只要我們的代碼有足夠的表達(dá)力，能清晰的通過命名來做到名副其實(shí)，就不太需要注釋，或者根本不需要；注釋的存在往往是彌補(bǔ)我們無法用代碼清晰表達(dá)意圖的情況。可以想象一下，每次自己發(fā)現(xiàn)需要寫注釋的時候，是什么心態(tài)，擔(dān)心此處代碼明天自己看不懂或者別人看不懂，那有沒有考慮用更好的語義的代碼來替代。
但盡管有注釋，也有好有壞，有時候注釋也會撒謊，通常注釋存在的越久，就離其描述的代碼越遠(yuǎn)，變得越來越離譜；因?yàn)榇a在變動在迭代，在注釋和代碼間可能會插入新的代碼，舊代碼我們通常copy來copy去，分離又重組，但注釋一般不會修改，就會造成注釋和描述的代碼分離，對閱讀者造成更大的迷惑。
我們在需要寫注釋的時候就要告訴自己，能不能用代碼來進(jìn)行描述。以下是一些壞代碼的注釋bad case
1. 一些被注釋掉的代碼
//something code
//something code
2. 位置標(biāo)記
//begin
someting code;
//end
3. 簽名標(biāo)記
/** add by xiaoli*/
4. 非公用方法的javadoc
/**
* doSomething
*/
private void doSomething(){
}
5. 日志式注釋
/** add xx
* update sometimes
* update sometimes
* update sometimes
*/
6. 誤導(dǎo)性注釋
//此處怎樣xx方法應(yīng)該有多短小？沒有明確約束，idea也不會限制你，但通常我們的方法不該長于一屏，至少多于一屏或者橫向外溢到屏幕以外最直觀的就會造成可讀性體驗(yàn)差，讀了下面忘記上面，左右拖拽等。對大多數(shù)筆記本來說一屏大概就30行左右。短小精簡的方法要比30行短很多，比如
public String renderPageWithSetupAndTeardowns(Page page, boolean isSuite) throws Exception{
if(isTestPage(page)){
includeSetupAndTeardownPages(page,isSuite);
}
return page.getHtml();
}if語句、else語句、while語句等，其中的代碼應(yīng)該只有一行，
改行通常是一個調(diào)用語句，這樣不但能保持短小，還可以給調(diào)用方法命名一個有說明性的名字，進(jìn)一步增加代碼的可讀性
一事精，便可動人。這個普世法則甚至適用于各種場合。像設(shè)計原則的單一職責(zé)模式，讓類只有一個職責(zé)。如果一個類有一個以上的職責(zé)，這些職責(zé)就耦合在了一起。這會導(dǎo)致邏輯混亂，設(shè)計耦合。當(dāng)一個職責(zé)發(fā)生變化時，可能會影響其它的職責(zé)。
另外，多個職責(zé)耦合在一起，會影響復(fù)用性。針對方法而言更是如此。方法作為程序的原子單元，保持單一會有效提升復(fù)用性。 那怎么判斷一個方法是否只做了一件事。最簡單的規(guī)則就是看看該方法是否能在拆出一個方法，且拆出去的方法是不同于該方法的詮釋和實(shí)現(xiàn)。但是要注意同一方法的邏輯層級務(wù)必要一致。
抽象層級一致也是對方法只做一件事的更高要求，抽象層級不一致的代碼一定是做了多件事。
我們讀代碼通常是自頂向下閱讀，我們想讓每個方法后面都跟著位于下一層級的方法，這樣我們可以依著抽象層級向下閱讀了。我們也需要這樣閱讀代碼，先有整體在展示細(xì)節(jié)，這種叫向下規(guī)則。這也是保持方法短小，確保只做一件事的訣竅。一旦方法中混雜不同的抽象層級，會讓人很迷惑，因?yàn)闆]辦法這個方法中判斷某個表達(dá)式是基礎(chǔ)概念還是細(xì)節(jié)，更惡劣的是，一旦細(xì)節(jié)與基礎(chǔ)概念混雜，更多的細(xì)節(jié)就會糾纏不清，舉例子我們想寫一個冰凍大象的需求
//把大象裝進(jìn)冰箱
public void frozenElephant(){
//1. 捕捉大象
//2. 運(yùn)輸大象
//3. 打開冰箱
//4. 放入大象
//5. 關(guān)閉冰箱
}這個例子的1.2兩步就不是一個層級的邏輯，是屬于更高層級的抽象。3.4.5都是將大象放入冰箱的步驟，屬于低層級的抽象。可以將代碼拆分為如下實(shí)現(xiàn)，將高抽象層級的代碼聚合提取出來，細(xì)節(jié)在分別單獨(dú)實(shí)現(xiàn)，如下
public void frozenElephant(){
//1. 捕捉大象
catchElephant();
//2. 運(yùn)輸大象
transportElephant();
//將大象放入冰箱
putElephantInRefrigerator();
}
public void catchElephant(){
}
public void transportElephant(){
}
public void putElephantInRefrigerator(){
//打開冰箱
//放入大象
//關(guān)閉冰箱
}針對錯誤碼的判斷會導(dǎo)致更深層次的嵌套結(jié)構(gòu)，返回錯誤碼就意味著要求調(diào)用者跟著處理錯誤，如下
if(deletePage()==OK){
if(registry.deleteReference(page.name)==OK){
if(configKeys.deleteKey(page.name.makeKey)==OK){
logger.log("page deleted")
}else{
logger.log("configKey not deleted")
}
}else{
logger.log("deleteReference from registry failed")
}
}else{
logger.log("delete failed")
return Error;
}一般我們還需要將try/Catch代碼塊給抽離出去，另外形成方法。防止代碼塊過多搞亂代碼結(jié)構(gòu)，分不清錯誤處理還是正常流程。同時因?yàn)榉椒ㄖ蛔鲆患拢e誤處理就是一件事，因此錯誤處理的方法不應(yīng)該在做其他事，也就是如果一個方法中有try關(guān)鍵字，那try就是方法的開頭。catch/finally代碼塊后面也不應(yīng)該再有內(nèi)容，如下
try{
deletePage(page);
registry.deleteReference(page.name);
configKeys.deleteKey(page.name.makeKey);
}catch(Exception e){
logger.log(e.getMessage());
}比如Lombok組件通過注解的方式，在編譯時自動為屬性生成構(gòu)造器、getter/setter、equals、hashcode、toString方法 舉例如下：
比如Apache Commons系列組件給我們提供了關(guān)于字符串、集合、IO操作等工具方法。這些組件是個大寶庫，提供了不少輪子
beanUtils | JavaBean進(jìn)行各種操作，克隆對象、屬性等等 |
codec | 處理常用的編碼方法的工具類包，例如DES、SHA1、MD5、Base64等. |
collections | java集合框架操作 |
configuration | java應(yīng)用程序的配置管理類庫 |
io | io工具的封裝 |
lang | Java基本對象方法的工具類包 如StringUtils、ArrayUtils等等. |
logging | 提供的日志接口 |
net | 提供了客戶端和服務(wù)器端的數(shù)據(jù)驗(yàn)證框架 |
重構(gòu)是對軟件內(nèi)部結(jié)構(gòu)的一種調(diào)整，目的是在不改變軟件可觀察行為的前提下，提高其可理解性，降低其修改成本。
在重構(gòu)之前一定要知道，一旦開始對類和方法進(jìn)行重構(gòu)，就需要事前有完備的單元測試用例來保障重構(gòu)的準(zhǔn)確性，每次重構(gòu)之后都要去執(zhí)行對應(yīng)的單元測試用例，驗(yàn)證重構(gòu)的正確性！
如果在一個以上的地點(diǎn)看到相同的代碼結(jié)構(gòu)，可以肯定的是，想辦法抽線出來合而為一，代碼會變得更好。一般包含幾個點(diǎn)的重復(fù)
遵循這樣一條原則：每當(dāng)感覺需要以注釋來說明點(diǎn)什么的時候，就把需要說明的東西寫進(jìn)一個獨(dú)立函數(shù)中，并以其用途（而非實(shí)現(xiàn)手法）命名，可以對一組甚至短短一行代碼做這件事。哪怕替換后的函數(shù)調(diào)用動作比函數(shù)自身還長，只要函數(shù)名稱能夠解釋其用途，就要毫不猶豫地那樣做，關(guān)鍵不在于函數(shù)的長度，而在于函數(shù)“做什么”和“如何做”之間的語義距離。
對數(shù)據(jù)的修改經(jīng)常導(dǎo)致出乎意料的結(jié)果和難以發(fā)現(xiàn)的bug。在一處更新數(shù)據(jù)，卻沒有意識到軟件中的另一處期望著完全不同的數(shù)據(jù)，于是出現(xiàn)難以預(yù)料的bug，往往比較難排查（需要排查數(shù)據(jù)流轉(zhuǎn)的整體鏈路），這就需要一些方法用于約束對數(shù)據(jù)的更新，降低數(shù)據(jù)可變性的風(fēng)險。
所謂模塊化，就是力求將代碼分出區(qū)域，最大化區(qū)域內(nèi)部的交互、最小化跨區(qū)域的交互。但是經(jīng)常出現(xiàn)一個函數(shù)跟另一個模塊中的函數(shù)或者數(shù)據(jù)交流格外頻繁，遠(yuǎn)勝于與所處模塊內(nèi)部的交流，這就是模塊功能不單一的典型情況。
點(diǎn)擊查看原文，獲取更多福利！
https://developer.aliyun.com/article/1117703?utm_content=g_1000366324
版權(quán)聲明：本文內(nèi)容由阿里云實(shí)名注冊用戶自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，阿里云開發(fā)者社區(qū)不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。具體規(guī)則請查看《阿里云開發(fā)者社區(qū)用戶服務(wù)協(xié)議》和《阿里云開發(fā)者社區(qū)知識產(chǎn)權(quán)保護(hù)指引》。如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容，填寫侵權(quán)投訴表單進(jìn)行舉報，一經(jīng)查實(shí)，本社區(qū)將立刻刪除涉嫌侵權(quán)內(nèi)容。
C語言中，if語句是一種常用的選擇結(jié)構(gòu)語句，用于根據(jù)條件選擇性地執(zhí)行不同的代碼塊。if語句的設(shè)計使得程序可以根據(jù)條件的真假進(jìn)行分支控制，從而實(shí)現(xiàn)靈活的程序邏輯。本文將深入介紹C語言中如何使用if語句設(shè)計選擇結(jié)構(gòu)程序，包括if語句的語法、使用方法、常見應(yīng)用場景以及注意事項(xiàng)，以幫助讀者更好地理解和運(yùn)用這一重要的編程概念。
以下是我整理的關(guān)于C語言的一些入門級資料，免費(fèi)分享給大家：https://m.hqyjai.net/emb_study_blue_short.html?xt=zxy
開發(fā)中，變量名，函數(shù)名一般要做到清晰明了，盡量做到看名字就能讓人知道你的意圖，所以變量和函數(shù)命名是挺重要，今天來看看如果較優(yōu)雅的方式給變量和函數(shù)命名。
一、變量
使用有意義和可發(fā)音的變量名
// 不好的寫法 const yyyymmdstr = moment().format("YYYY/MM/DD"); // 好的寫法 const currentDate = moment().format("YYYY/MM/DD"); 對同一類型的變量使用相同的詞匯
// 不好的寫法 getUserInfo(); getClientData(); getCustomerRecord(); // 好的寫法 getUser(); 使用可搜索的名字
我們讀的會比我們寫的多得多，所以如果命名太過隨意不僅會給后續(xù)的維護(hù)帶來困難，也會傷害了讀我們代碼的開發(fā)者。讓你的變量名可被讀取，像 buddy.js 和 ESLint 這樣的工具可以幫助識別未命名的常量。
// 不好的寫法 // 86400000 的用途是什么？ setTimeout(blastOff, 86400000); // 好的寫法 const MILLISECONDS_IN_A_DAY = 86_400_000; setTimeout(blastOff, MILLISECONDS_IN_A_DAY); 使用解釋性變量
// 不好的寫法 const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\]+[,\\s]+(.+?)\s*(\d{5})?$/; saveCityZipCode( address.match(cityZipCodeRegex)[1], address.match(cityZipCodeRegex)[2] ); // 好的寫法 const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\]+[,\\s]+(.+?)\s*(\d{5})?$/; const [_, city, zipCode] = address.match(cityZipCodeRegex) || []; saveCityZipCode(city, zipCode); 避免費(fèi)腦的猜測
顯式用于隱式
// 不好的寫法 const locations = ["Austin", "New York", "San Francisco"]; locations.forEach(l => { doStuff(); doSomeOtherStuff(); // ... // ... // ... // 等等，“l(fā)”又是什么？ dispatch(l); // 好的寫法 const locations = ["Austin", "New York", "San Francisco"]; locations.forEach(location => { doStuff(); doSomeOtherStuff(); // ... // ... // ... dispatch(location); }); 無需添加不必要的上下文
如果類名/對象名已經(jīng)說明了，就無需在變量名中重復(fù)。
// 不好的寫法 const Car = { carMake: "Honda", carModel: "Accord", carColor: "Blue" }; function paintCar(car) { car.carColor = "Red"; } // 好的寫法 const Car = { make: "Honda", model: "Accord", color: "Blue" }; function paintCar(car) { car.color = "Red"; } 使用默認(rèn)參數(shù)代替邏輯或(與)運(yùn)算
// 不好的寫法 function createMicrobrewery(name) { const breweryName = name || "Hipster Brew Co."; // ... } // 好的寫法 function createMicrobrewery(name = "Hipster Brew Co.") { // ... } 二、函數(shù)
函數(shù)參數(shù)(理想情況下為2個或更少)
限制函數(shù)參數(shù)的數(shù)量是非常重要的，因?yàn)樗箿y試函數(shù)變得更容易。如果有三個以上的參數(shù)，就會導(dǎo)致組合爆炸，必須用每個單獨(dú)的參數(shù)測試大量不同的情況。
一個或兩個參數(shù)是理想的情況，如果可能，應(yīng)避免三個參數(shù)。除此之外，還應(yīng)該合并。大多數(shù)情況下，大于三個參數(shù)可以用對象來代替。
// 不好的寫法 function createMenu(title, body, buttonText, cancellable) { // ... } createMenu("Foo", "Bar", "Baz", true); // 好的寫法 function createMenu({ title, body, buttonText, cancellable }) { // ... } createMenu({ title: "Foo", body: "Bar", buttonText: "Baz", cancellable: true }); 函數(shù)應(yīng)該只做一件事
這是目前為止軟件工程中最重要的規(guī)則。當(dāng)函數(shù)做不止一件事時，它們就更難組合、測試和推理。可以將一個函數(shù)隔離為一個操作時，就可以很容易地重構(gòu)它，代碼也會讀起來更清晰。
// 不好的寫法 function emailClients(clients) { clients.forEach(client => { const clientRecord = database.lookup(client); if (clientRecord.isActive()) { email(client); } }); } // 好的寫法 function emailActiveClients(clients) { clients.filter(isActiveClient).forEach(email); } function isActiveClient(client) { const clientRecord = database.lookup(client); return clientRecord.isActive(); } 函數(shù)名稱應(yīng)說明其作用
// 不好的寫法 function addToDate(date, month) { // ... } const date = new Date(); // 從函數(shù)名稱很難知道添加什么 addToDate(date, 1); // 好的寫法 function addMonthToDate(month, date) { // ... } const date = new Date(); addMonthToDate(1, date); 函數(shù)應(yīng)該只有一個抽象層次
當(dāng)有一個以上的抽象層次函數(shù)，意味該函數(shù)做得太多了，需要將函數(shù)拆分可以實(shí)現(xiàn)可重用性和更簡單的測試。
// 不好的寫法 function parseBetterJSAlternative(code) { const REGEXES = [ // ... ]; const statements = code.split(" "); const tokens = []; REGEXES.forEach(REGEX => { statements.forEach(statement => { // ... }); }); const ast = []; tokens.forEach(token => { // lex... }); ast.forEach(node => { // parse... }); } // 好的寫法 function parseBetterJSAlternative(code) { const tokens = tokenize(code); const syntaxTree = parse(tokens); syntaxTree.forEach(node => { // parse... }); } function tokenize(code) { const REGEXES = [ // ... ]; const statements = code.split(" "); const tokens = []; REGEXES.forEach(REGEX => { statements.forEach(statement => { tokens.push(/* ... */); }); }); return tokens; } function parse(tokens) { const syntaxTree = []; tokens.forEach(token => { syntaxTree.push(/* ... */); }); return syntaxTree; } 刪除重復(fù)的代碼
盡量避免重復(fù)的代碼，重復(fù)的代碼是不好的，它意味著如果我們需要更改某些邏輯，要改很多地方。
通常，有重復(fù)的代碼，是因?yàn)橛袃蓚€或多個稍有不同的事物，它們有很多共同點(diǎn)，但是它們之間的差異迫使我們編寫兩個或多個獨(dú)立的函數(shù)來完成許多相同的事情。 刪除重復(fù)的代碼意味著創(chuàng)建一個僅用一個函數(shù)/模塊/類就可以處理這組不同事物的抽象。
獲得正確的抽象是至關(guān)重要的，這就是為什么我們應(yīng)該遵循類部分中列出的 「SOLID原則」。糟糕的抽象可能比重復(fù)的代碼更糟糕，所以要小心!說了這么多，如果你能做一個好的抽象，那就去做吧!不要重復(fù)你自己，否則你會發(fā)現(xiàn)自己在任何時候想要改變一件事的時候都要更新多個地方。
「設(shè)計模式的六大原則有」
把這六個原則的首字母聯(lián)合起來(兩個 L 算做一個)就是 SOLID (solid，穩(wěn)定的)，其代表的含義就是這六個原則結(jié)合使用的好處：建立穩(wěn)定、靈活、健壯的設(shè)計。下面我們來分別看一下這六大設(shè)計原則。
「不好的寫法」
function showDeveloperList(developers) { developers.forEach(developer => { const expectedSalary = developer.calculateExpectedSalary(); const experience = developer.getExperience(); const githubLink = developer.getGithubLink(); const data = { expectedSalary, experience, githubLink }; render(data); }); } function showManagerList(managers) { managers.forEach(manager => { const expectedSalary = manager.calculateExpectedSalary(); const experience = manager.getExperience(); const portfolio = manager.getMBAProjects(); const data = { expectedSalary, experience, portfolio }; render(data); }); } 「好的寫法」
function showEmployeeList(employees) { employees.forEach(employee => { const expectedSalary = employee.calculateExpectedSalary(); const experience = employee.getExperience(); const data = { expectedSalary, experience }; switch (employee.type) { case "manager": data.portfolio = employee.getMBAProjects(); break; case "developer": data.githubLink = employee.getGithubLink(); break; } render(data); }); } 使用Object.assign設(shè)置默認(rèn)對象
「不好的寫法」
const menuConfig = { title: null, body: "Bar", buttonText: null, cancellable: true }; function createMenu(config) { configconfig.title = config.title || "Foo"; configconfig.body = config.body || "Bar"; configconfig.buttonText = config.buttonText || "Baz"; configconfig.cancellable = config.cancellable !== undefined ? config.cancellable : true; } createMenu(menuConfig); 「好的寫法」
const menuConfig = { title: "Order", // User did not include 'body' key buttonText: "Send", cancellable: true }; function createMenu(config) { config = Object.assign( { title: "Foo", body: "Bar", buttonText: "Baz", cancellable: true }, config ); // config now equals: {title: "Order", body: "Bar", buttonText: "Send", cancellable: true} // ... } createMenu(menuConfig); 不要使用標(biāo)志作為函數(shù)參數(shù)
標(biāo)志告訴使用者，此函數(shù)可以完成多項(xiàng)任務(wù)，函數(shù)應(yīng)該做一件事。如果函數(shù)遵循基于布爾的不同代碼路徑，請拆分它們。
// 不好的寫法 function createFile(name, temp) { if (temp) { fs.create(`./temp/${name}`); } else { fs.create(name); } } // 好的寫法 function createFile(name) { fs.create(name); } function createTempFile(name) { createFile(`./temp/${name}`); } 避免副作用(第一部分)
如果函數(shù)除了接受一個值并返回另一個值或多個值以外，不執(zhí)行任何其他操作，都會產(chǎn)生副作用。副作用可能是寫入文件，修改某些全局變量，或者不小心將你的所有資金都匯給了陌生人。
「不好的寫法」
let name = "Ryan McDermott"; function splitIntoFirstAndLastName() { namename = name.split(" "); } splitIntoFirstAndLastName(); console.log(name); // ['Ryan', 'McDermott']; 「好的寫法」
function splitIntoFirstAndLastName(name) { return name.split(" "); } const name = "Ryan McDermott"; const newName = splitIntoFirstAndLastName(name); console.log(name); // 'Ryan McDermott'; console.log(newName); // ['Ryan', 'McDermott']; 避免副作用(第二部分)
在JavaScript中，原始類型值是按值傳遞，而對象/數(shù)組按引用傳遞。對于對象和數(shù)組，如果有函數(shù)在購物車數(shù)組中進(jìn)行了更改(例如，通過添加要購買的商品)，則使用該購物車數(shù)組的任何其他函數(shù)都將受到此添加的影響。那可能很棒，但是也可能不好。來想象一個糟糕的情況：
用戶單擊“購買”按鈕，該按鈕調(diào)用一個purchase 函數(shù)，接著，該函數(shù)發(fā)出一個網(wǎng)絡(luò)請求并將cart數(shù)組發(fā)送到服務(wù)器。由于網(wǎng)絡(luò)連接不好，purchase函數(shù)必須不斷重試請求。現(xiàn)在，如果在網(wǎng)絡(luò)請求開始之前，用戶不小心點(diǎn)擊了他們實(shí)際上不需要的項(xiàng)目上的“添加到購物車”按鈕，該怎么辦?如果發(fā)生這種情況，并且網(wǎng)絡(luò)請求開始，那么購買函數(shù)將發(fā)送意外添加的商品，因?yàn)樗幸粋€對購物車數(shù)組的引用，addItemToCart函數(shù)通過添加修改了這個購物車數(shù)組。
一個很好的解決方案是addItemToCart總是克隆cart數(shù)組，編輯它，然后返回克隆。這可以確保購物車引用的其他函數(shù)不會受到任何更改的影響。
關(guān)于這種方法有兩點(diǎn)需要注意：
// 不好的寫法 const addItemToCart = (cart, item) => { cart.push({ item, date: Date.now() }); }; // 好的寫法 const addItemToCart = (cart, item) => { return [...cart, { item, date: Date.now() }]; }; 不要寫全局函數(shù)
污染全局變量在 JS 中是一種不好的做法，因?yàn)榭赡軙c另一個庫發(fā)生沖突，并且在他們的生產(chǎn)中遇到異常之前，API 的用戶將毫無用處。讓我們考慮一個示例：如果想擴(kuò)展 JS 的原生Array方法以具有可以顯示兩個數(shù)組之間差異的diff方法，該怎么辦?可以將新函數(shù)寫入Array.prototype，但它可能與另一個嘗試執(zhí)行相同操作的庫發(fā)生沖突。如果其他庫僅使用diff來查找數(shù)組的第一個元素和最后一個元素之間的區(qū)別怎么辦?這就是為什么只使用 ES6 類并簡單地擴(kuò)展Array全局會更好的原因。
// 不好的寫法 Array.prototype.diff = function diff(comparisonArray) { const hash = new Set(comparisonArray); return this.filter(elem => !hash.has(elem)); }; // 好的寫法 class SuperArray extends Array { diff(comparisonArray) { const hash = new Set(comparisonArray); return this.filter(elem => !hash.has(elem)); } } 盡量使用函數(shù)式編程而非命令式
JavaScript不像Haskell那樣是一種函數(shù)式語言，但它具有函數(shù)式的風(fēng)格。函數(shù)式語言可以更簡潔、更容易測試。如果可以的話，盡量喜歡這種編程風(fēng)格。
「不好的寫法」
const programmerOutput = [ { name: "Uncle Bobby", linesOfCode: 500 }, { name: "Suzie Q", linesOfCode: 1500 }, { name: "Jimmy Gosling", linesOfCode: 150 }, { name: "Gracie Hopper", linesOfCode: 1000 } ]; let totalOutput = 0; for (let i = 0; i < programmerOutput.length; i++) { totalOutput += programmerOutput[i].linesOfCode; } 「好的寫法」
const programmerOutput = [ { name: "Uncle Bobby", linesOfCode: 500 }, { name: "Suzie Q", linesOfCode: 1500 }, { name: "Jimmy Gosling", linesOfCode: 150 }, { name: "Gracie Hopper", linesOfCode: 1000 } ]; const totalOutput = programmerOutput.reduce( (totalLines, output) => totalLines + output.linesOfCode, 0 ); 封裝條件
// 不好的寫法 if (fsm.state === "fetching" && isEmpty(listNode)) { // ... } // 好的寫法 function shouldShowSpinner(fsm, listNode) { return fsm.state === "fetching" && isEmpty(listNode); } if (shouldShowSpinner(fsmInstance, listNodeInstance)) { // ... } 避免使用非條件
// 不好的寫法 function isDOMNodeNotPresent(node) { // ... } if (!isDOMNodeNotPresent(node)) { // ... } // 好的寫法 function isDOMNodePresent(node) { // ... } if (isDOMNodePresent(node)) { // ... } 避免使用過多條件
這似乎是一個不可能完成的任務(wù)。一聽到這個，大多數(shù)人會說，“沒有if語句，我怎么能做任何事情呢?”答案是，你可以在許多情況下使用多態(tài)性來實(shí)現(xiàn)相同的任務(wù)。
第二個問題通常是，“那很好，但是我為什么要那樣做呢?”答案是上面講過一個概念:一個函數(shù)應(yīng)該只做一件事。當(dāng)具有if語句的類和函數(shù)時，這是在告訴你的使用者該函數(shù)執(zhí)行不止一件事情。
「不好的寫法」
class Airplane { // ... getCruisingAltitude() { switch (this.type) { case "777": return this.getMaxAltitude() - this.getPassengerCount(); case "Air Force One": return this.getMaxAltitude(); case "Cessna": return this.getMaxAltitude() - this.getFuelExpenditure(); } } } 「好的寫法」
class Airplane { // ... } class Boeing777 extends Airplane { // ... getCruisingAltitude() { return this.getMaxAltitude() - this.getPassengerCount(); } } class AirForceOne extends Airplane { // ... getCruisingAltitude() { return this.getMaxAltitude(); } } class Cessna extends Airplane { // ... getCruisingAltitude() { return this.getMaxAltitude() - this.getFuelExpenditure(); } } 避免類型檢查
JavaScript 是無類型的，這意味著函數(shù)可以接受任何類型的參數(shù)。有時q我們會被這種自由所困擾，并且很想在函數(shù)中進(jìn)行類型檢查。有很多方法可以避免這樣做。首先要考慮的是一致的API。
// 不好的寫法 function travelToTexas(vehicle) { if (vehicle instanceof Bicycle) { vehicle.pedal(this.currentLocation, new Location("texas")); } else if (vehicle instanceof Car) { vehicle.drive(this.currentLocation, new Location("texas")); } } // 好的寫法 function travelToTexas(vehicle) { vehicle.move(this.currentLocation, new Location("texas")); } 不要過度優(yōu)化
現(xiàn)代瀏覽器在運(yùn)行時做了大量的優(yōu)化工作。很多時候，如果你在優(yōu)化，那么你只是在浪費(fèi)時間。有很好的資源可以查看哪里缺乏優(yōu)化，我們只需要針對需要優(yōu)化的地方就行了。
// 不好的寫法 // 在舊的瀏覽器上，每一次使用無緩存“l(fā)ist.length”的迭代都是很昂貴的 // 會為“l(fā)ist.length”重新計算。在現(xiàn)代瀏覽器中，這是經(jīng)過優(yōu)化的 for (let i = 0, len = list.length; i < len; i++) { // ... } // 好的寫法 for (let i = 0; i < list.length; i++) { // ... } 原文：https://developer.51cto.com/art/202005/616073.htm
作者：前端小智
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
