代码整洁之道

要求：可读性和可测试

• 优秀的代码不需要注释
• 去掉不必要的代码
• 一个代码不要使用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 );