代码整洁之道

要求：可读性和可测试

• 优秀的代码不需要注释
• 去掉不必要的代码
• 一个代码不要使用2次
• 提前return
• 使用可检索的名称

关于注释

1. 函数本身就变成了注释。 这样的代码叫做自我描述

2. 如果代码不清楚，需要注释，那么也许应该重写它。

静态变量

// 用 `var` 申明为大写的全局变量
var MINUTES_IN_A_YEAR = 525600;
for (var i = 0; i < MINUTES_IN_A_YEAR; i++) {
  runCronJob();
}

短路语法比条件语句更清晰

函数参数少于2个，多了用对象

// 多于3个参数传对象
var menuConfig = {
  title: 'Foo',
  body: 'Bar',
  buttonText: 'Baz',
  cancellable: true
}
function createMenu(menuConfig) {
  ...
}

用 Object.assign 设置默认对象

var 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 等于: {title: "Foo", body: "Bar", buttonText: "Baz", cancellable: true}
  // ...
}
createMenu(menuConfig);

一个函数只做一件事

function emailClients(clients) {
  clients.forEach(client => {
    emailClientIfNeeded(client);
  });
}
function emailClientIfNeeded(client) {
  if (isClientActive(client)) {
    email(client);
  }
}
function isClientActive(client) {
  let clientRecord = database.lookup(client);
  return clientRecord.isActive();
}

jquery时代

模块模式

提供私有变量和函数，暴露出一个有限的API，其中包含返回对象的属性和方法

// The module pattern
var feature = (function() {
    // Private variables and functions
    var privateThing = "secret";
    var publicThing = "not secret";
    var changePrivateThing = function() {
        privateThing = "super secret";
    };
    var sayPrivateThing = function() {
        console.log( privateThing );
        changePrivateThing();
    };
    // Public API
    return {
        publicThing: publicThing,
        sayPrivateThing: sayPrivateThing
    };
})();
feature.publicThing; // "not secret"
// Logs "secret" and changes the value of privateThing
feature.sayPrivateThing();

使用对象字面量来封装代码

// bad
// 传统的jquery style 
$( document ).ready(function() {
    $( "#myFeature li" ).append( "" ).click(function() {
        var item = $( this );
        var div = item.find( "div" ); 
        div.load( "foo.php?item=" + item.attr( "id" ), function() {
            div.show();
            item.siblings().find( "div" ).hide();
        });
    });
});
// good
// Using an object literal for a jQuery feature
var myFeature = {
    init: function( settings ) {
        myFeature.config = {
            items: $( "#myFeature li" ),
            container: $( "
" ),
            urlBase: "/foo.php?item="
        };
        // Allow overriding the default config
        $.extend( myFeature.config, settings );
        myFeature.setup();
    },
    setup: function() {
        myFeature.config.items
            .each( myFeature.createContainer )
            .click( myFeature.showItem );
    },
    createContainer: function() {
        var item = $( this );
        var container = myFeature.config.container
            .clone()
            .appendTo( item );
        item.data( "container", container );
    }
$( document ).ready( myFeature.init );

更新: 2020-03-13 18:00:21
原文: https://www.yuque.com/u3641/dxlfpu/eynm8x