JavaScript 函數參數的最佳實踐 | CodeUtopia

常常會有人問一些像“我應該使用對象來傳遞函數參數嗎”這類問題。我確定你知道這種模式，因為這在許多庫中很常見：

$.post({ a: 'lot', of: 'properties', live: 'in', here: 'yep' })`

但是我想說，這實際上不是一個好主意。

讓我們看看再 JavaScript 中定義函數參數列表最佳的實踐。

清晰是目標

把對象當作參數傳遞給函數的問題是你要傳入的值指向不清。

像jQuery這樣的庫，這不是一個大問題——就是看看文檔然后就知道你要怎么做了。但是在自定義代碼中，你會在工作中碰到？看看文檔……啊！等等！哪來的文檔！Yeah。

盡可能多的文檔當然好，自定義代碼庫永遠不會有這種你需要的文檔。如果你需要弄清一些方法需要的參數，你需要深入了解源代碼。

這個問題可以用一個例子來解釋。這里有一個用于控制其他函數之間間隔的函數。

function throttle(o) {
  o.threshhold || (o.threshhold = 250);
  var last,
      deferTimer;
  return function () {
    var context = o.scope || this;

    var now = +new Date,
        args = arguments;
    if (last && now < last + threshhold) {
      // hold on to it
      clearTimeout(deferTimer);
      deferTimer = setTimeout(function () {
        last = now;
        o.fn.apply(context, args);
      }, o.threshhold);
    } else {
      last = now;
      o.fn.apply(context, args);
    }
  };
}

快！你往參數對象中放入了什么值？

沒有瀏覽整個函數的話，你是找不到關于參數的惱人線索的，甚至之后，你可能會出錯。

這里是原始的注釋：

function throttle(fn, threshhold, scope)`

快！函數取了什么參數？？

如果你拆解了這個炸彈，然后你需要回答那個問題或者爆炸，并且你只有幾秒鐘的時間思考……我肯定具有獨立的參數會比較好。

好啦，那么第一個最佳嘗試是：給你的函數使用單獨命名的參數

此外，單獨的參數如果在一個函數式編程風格中同樣很有幫助。在FP中一個常見的事是調用函數，如果你的函數使用對象作為參數，那么會非常苦逼。

對于可選項來說對象非常好

單獨的參數是一個很好的開始，那么我們將會在函數有可選參數的時候遇到問題。

對于只有一個可選參數的函數來說，解決方案很簡單：

function stuff(requiredA, requiredB, optional)

最佳實踐：可選項放在最后

然而，如果你有多于一個的可選項，問題……如果我們只傳 一 個可選參數如何？

function foo(required, optionalA, optionalB) { /* something */ }

foo('hello', undefined, 1337);

啊！需要填充類似于undefined的值，這真的是越來越復雜了——同樣需要調用他們，并且需要在函數中處理這些參數

在多可選參數的情況下，我們可以使用對象。這并沒有真正地解決問題，但是這意味著我們不需要處理額外的值。

foo('hello', { optionalB: 1337 });

最佳實踐：如果有超過一個可選參數時，使用對象

ES6的好處

最后，如果你使用ES6或者TypeScript，我們可以使用一些新的語法。

對于有可選參數的函數，我們并不清楚這個參數是否可選。有了ES6，我們能夠提供一個默認值讓這個變得明顯：

function something(a, b = 'default value') {
  //if b is not passed, its value becomes 'default value'
}

最佳實踐：給可選參數提供默認值

我們可以使用解構參數列表中對象和它的默認值。

function foo(required, { optionalA, optionalB } = { }) {
  //available variables:
  //required, optionalA, optionalB
}

foo('hi', { optionalA: 1, optionalB: 1337 });

這給了你兩全其美的辦法。你可以方便地使用對象作為參數，但是對象的屬性能夠從函數的注釋中看到。

最佳實踐：使用ES6解構重要的地方

總結

對于上述建議的補充，在函數聲明前使用注釋是另一個有用的習慣。這對于讀者來說非常有用，能夠迅速了解大概，不僅僅是函數的參數，還有他們的類型和其他注意點。

總結：

• 使用單獨的命名參數

• 把可選參數放在最后

• 對于多個可選參數適用對象

• 默認值可以用來表明可選參數

• 使用解構來說明對象參數

這是另一個你可以用ES6默認參數做的有趣事情。通常情況下，如果你不傳遞一個必要的參數，什么事都不會發生。但是有了默認值，我們可以讓代碼自動拋出一個缺少必要參數的錯誤！David Walsh有一個 對此的極佳總結 。

 

來自：http://www.zcfy.cc/article/best-practices-for-javascript-function-parameters-codeutopia-2053.html