* [建議] 一個函數的長度控制在 50 行以內
將過多的邏輯單元混在一個大函數中，易導致難以維護。一個清晰易懂的函數應該完成單一的邏輯單元。復雜的操作應進一步抽取，通過函數的調用來體現流程。
特定算法等不可分割的邏輯允許例外。
```
function syncViewStateOnUserAction() {
if (x.checked) {
y.checked = true;
z.value = '';
}
else {
y.checked = false;
}
if (!a.value) {
warning.innerText = 'Please enter it';
submitButton.disabled = true;
}
else {
warning.innerText = '';
submitButton.disabled = false;
}
}
// 直接閱讀該函數會難以明確其主線邏輯，因此下方是一種更合理的表達方式：
function syncViewStateOnUserAction() {
syncXStateToView();
checkAAvailability();
}
function syncXStateToView() {
if (x.checked) {
y.checked = true;
z.value = '';
}
else {
y.checked = false;
}
}
function checkAAvailability() {
if (!a.value) {
displayWarningForAMissing();
}
else {
clearWarnignForA();
}
}
```
* [建議] 一個函數的參數控制在 6 個以內
除去不定長參數以外，函數具備不同邏輯意義的參數建議控制在 6 個以內，過多參數會導致維護難度增大。
某些情況下，如使用 AMD Loader 的 require 加載多個模塊時，其 callback 可能會存在較多參數，因此對函數參數的個數不做強制限制。
* [建議] 通過 options 參數傳遞非數據輸入型參數
有些函數的參數并不是作為算法的輸入，而是對算法的某些分支條件判斷之用，此類參數建議通過一個 options 參數傳遞。
```
/**
* 移除某個元素
*
* @param {Node} element 需要移除的元素
* @param {boolean} removeEventListeners 是否同時將所有注冊在元素上的事件移除
*/
function removeElement(element, removeEventListeners) {
element.parent.removeChild(element);
if (removeEventListeners) {
element.clearEventListeners();
}
}
//上面的函數可以轉換為以下方式
/**
* 移除某個元素
* * @param {Node} element 需要移除的元素
* @param {Object} options 相關的邏輯配置
* @param {boolean} options.removeEventListeners 是否同時將所有注冊在元素上的事件移除
*/
function removeElement(element, options) {
element.parent.removeChild(element);
if (options.removeEventListeners) {
element.clearEventListeners();
}
}
```
這種模式有幾個顯著的優勢：
* boolean 型的配置項具備名稱，從調用的代碼上更易理解其表達的邏輯意義。
* 當配置項有增長時，無需無休止地增加參數個數，不會出現 removeElement(element, true, false, false, 3) 這樣難以理解的調用代碼。
* 當部分配置參數可選時，多個參數的形式非常難處理重載邏輯，而使用一個 options 對象只需判斷屬性是否存在，實現得以簡化。
