快捷導(dǎo)航

JS代碼簡(jiǎn)潔方式之函數(shù)方法詳解

更新時(shí)間：2020年07月28日 16:39:13 作者：陌上兮月

這篇文章主要介紹了JS代碼簡(jiǎn)潔方式之函數(shù)方法詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

函數(shù)的參數(shù)越少越好

有一個(gè)準(zhǔn)則是：如果你的函數(shù)參數(shù)超過兩個(gè)，就應(yīng)該改為對(duì)象傳入。

這樣做是合理的，因?yàn)楫?dāng)函數(shù)參數(shù)超過兩個(gè)時(shí)，參數(shù)順序開始變得難以記憶，而且容易出現(xiàn)一種很尷尬的情況：比如我只需要傳入第三個(gè)參數(shù)，因?yàn)槠渥陨眄樞虻脑颍坏貌谎a(bǔ)齊前兩個(gè)根本用不上的參數(shù)，以讓它順利排在第三位。

// bad
const createArticle = (title, author, date, content) => { }
createArticle('震驚，一男子竟偷偷干這事', 'zhangnan', '2020/06/29', '某天深夜，我喝多了點(diǎn)酒...')

// good
const createArticle = ({title, author, date, content}) => { }
createArticle({
 title: '震驚，一男子竟偷偷干這事'，
 author: 'zhangnan',
 date: '2020/06/29',
 content: '某天深夜，我喝多了點(diǎn)酒...'
})

保持函數(shù)的單一職責(zé)原則

這是軟件開發(fā)領(lǐng)域亙古不變的一個(gè)真理，讓一個(gè)函數(shù)只專注于一件事情，能夠很好的解耦各個(gè)功能之間的聯(lián)系，使得后續(xù)對(duì)某一個(gè)功能進(jìn)行更改時(shí)，不用擔(dān)心會(huì)影響其他模塊。

假設(shè)我們現(xiàn)在有一個(gè)需求：現(xiàn)在需要給班里的每一個(gè)同學(xué)發(fā)放假短信通知，如果是男生，就用電信主機(jī)號(hào)來發(fā)，如果是女生，則用聯(lián)通主機(jī)號(hào)發(fā)，同時(shí)額外發(fā)送一封愛心郵件。實(shí)現(xiàn)如下：

// bad 代碼擠成一堆,很難理清
// 男生女生的通知方式還有所不同，后期如果要改動(dòng)女生的通知方式，很難保證不會(huì)影響到男生
// 因?yàn)榇蠹叶紝懺谕粋€(gè)函數(shù)里

const notifyStudents = (studentList) => {
 studentList.forEach(student => {
  if (student.gender === 'male') {
   const sender1 = new SmsSender({ carrier: '電信' });
   sender1.init();
   sender1.sendTo(student) 
  } else {
   const sender2 = new SmsSender({ carrier: '聯(lián)通' });
   sender2.init();
   sender2.sendTo(student);
   
   const sender3 = new EmailSender({ type: 'QQ郵箱' });
   sender3.connect();
   sender3.sendTo(student)
  }
 })
}


// good 函數(shù)拆分，各司其職，清晰明了
// 雖然看起來代碼量多了一點(diǎn)點(diǎn)
// 但是分工明確，互不影響
const initSmsSender = (carrier) => {
 const sender = new SmsSender({ carrier });
 sender.init();
}

const initEmailSender = (type) => {
 const sender = new EmailSender({ type });
 sender.connect();
}

const notifyMales = (studentList) => {
 const smsSender = initSmsSender('電信');
 const maleList = studentList.filter(student => student.gender === 'male');
 
 maleList.forEach(male => smsSender.sendTo(male));
}

const notifyFemales = (studentList) => {
 const smsSender = initSmsSender('聯(lián)通');
 const emailSender = initEmailSender('QQ郵箱');
 
 const femaleList = studentList.filter(student => student.gender === 'female');
 
 femaleList.forEach(female => {
  smsSender.sendTo(female);
  emailSender.sendTo(female);
 })
}

封裝條件語句

像有一些條件語句，可能存在很多與或非邏輯，如果直接寫在函數(shù)里面，每次都需要重新理一遍，費(fèi)時(shí)費(fèi)力。把一堆條件語句封裝在一個(gè)函數(shù)里面，不僅遵循單一職責(zé)原則，也將使得閱讀更加方便。

// bad
const shouldIBuyThisPhone = (phone) => {
 const {price, year, brand} = phone;
 if (price > 5000 && year === new Date.getFullYear() && brand === 'huawei') {
  // 馬上剁手
 }
}

// good
const isHuaweiFlagShipThisYear = ({ price, year, brand }) => {
 const HIGH_PRICE = 5000;
 return price > HIGH_PRICE && year === new Date.getFullYear() && brand === 'huawei'
}

const shouldIBuyThisPhone = (phone) => {
 if (isHuaweiFlagShipThisYear(phone)) {
  // 馬上剁手
 }
}

高層函數(shù)不要依賴具體實(shí)現(xiàn)

在一些動(dòng)作函數(shù)中，常見的一種情況是傳一個(gè)flag參數(shù)，通過對(duì)標(biāo)志變量的判斷，做出不同的響應(yīng)動(dòng)作。

這樣其實(shí)是不太好的，因?yàn)檫@會(huì)使這個(gè)動(dòng)作函數(shù)內(nèi)部去維護(hù)一些判斷邏輯，如果flag參數(shù)比較多，函數(shù)內(nèi)部的區(qū)分情況也會(huì)很多。

另外這里也涉及一種思想：具體的差異實(shí)現(xiàn)應(yīng)該由使用者提供，而不是統(tǒng)一執(zhí)行者去維護(hù)。

或者稱之為依賴倒置原則：高層模塊（打?。┎粦?yīng)該依賴于實(shí)現(xiàn)細(xì)節(jié)（某個(gè)人的喜好）。

比如，我現(xiàn)在有一臺(tái)打印機(jī)🖨️，小A喜歡用單面黑白橫向打印,小B喜歡用單面彩色豎向打印，小C喜歡用雙面彩色橫向打印等等等等。作為一臺(tái)打印機(jī)，它需要去維護(hù)一個(gè)人員喜好列表嗎？如果有一千個(gè)人使用它，那它就需要維護(hù)一千條數(shù)據(jù)。

它只是一臺(tái)打印機(jī)！告訴它配置，然后打印，就完事了！打印機(jī)只專注于打印這件事本身。

// bad 需要判斷標(biāo)志變量，同時(shí)做出不同的相應(yīng)動(dòng)作
const print = (person) => {
 if (person === 'A') {
  device.print({ 
   page: 1, 
   color: 'gray', 
   orientation: 'landscape' 
   
  })
 }
 
 else if (person === 'B') {
  device.print({ 
   page: 1, 
   color: 'colorful', 
   orientation: 'vertical' 
  })
 }
 
 else if (person === 'C') {
  device.print({ 
   page: 2, 
   color: 'colorful' ,
   orientation: 'landscape'
  })
 }
 
 ......
 
}


// good
const print = (config) => {
 device.print(config)
}

寫在最后

總結(jié)：