Skip to content

Latest commit

 

History

History

id_ID

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 

Principles of Writing Consistent, Idiomatic JavaScript

This is a living document and new ideas for improving the code around us are always welcome. Contribute: fork, clone, branch, commit, push, pull request.

Semua kode dalam kode-base akan terlihat seperti satu orang mengetik itu, tidak peduli berapa banyak orang memberikan kontribusi.

Daftar berikut menguraikan praktik yang digunakan dalam semua kode milik penulis asli; kontribusi untuk proyek-proyek yang saya buat harus mengikuti panduan ini.

Saya tidak berniat untuk memaksakan preferensi gaya saya pada kode orang lain atau proyek; jika gaya umum sudah ada, itu harus dihormati.

"Arguments over style are pointless. There should be a style guide, and you should follow it"

Rebecca Murphey

 

"Part of being a good steward to a successful project is realizing that writing code for yourself is a Bad Idea™. If thousands of people are using your code, then write your code for maximum clarity, not your personal preference of how to get clever within the spec."

Idan Gazit

Translations

Penting, Non-idiomatic Stuff:

Code Quality Tools, Resources dan Referensi

Ayo Pintar

berikut harus dipertimbangkan 1) tidak lengkap, dan 2) * DIBUTUHKAN MEMBACA *. Saya tidak selalu setuju dengan gaya yang ditulis oleh penulis di bawah ini, tapi satu hal yang pasti: Mereka konsisten. Selanjutnya, ini adalah otoritas pada bahasa.

Build dan Deployment Proses

Proyek harus selalu berusaha untuk memasukkan beberapa cara generik dimana sumber dapat di lint, diuji dan dikompresi dalam persiapan untuk penggunaan produksi. Untuk tugas ini, grunt oleh Ben Alman terbaik dan telah resmi menggantikan "kit /" direktori dari repo ini.

Test Fasilitas

Proyek must mencakup beberapa bentuk unit, referensi, implementasi atau uji fungsional. Demo kasus penggunaan tidak memenuhi syarat sebagai "test". Berikut ini adalah daftar test frameworks, yang mendukung lebih dari yang lain.

Daftar Isi


Kata Pengantar

Bagian berikut menguraikan panduan gaya reasonable untuk pengembangan JavaScript modern dan tidak dimaksudkan untuk menjadi preskriptif. Yang paling penting dibawa pulang adalah hukum ** konsistensi kode gaya **. Apa pun yang Anda pilih sebagai gaya untuk proyek Anda harus dipertimbangkan hukum. Link ke dokumen ini sebagai pernyataan komitmen proyek Anda untuk kode gaya konsistensi, pembacaan dan rawatan.

Manifesto Gaya Idiomatic

  1. Spasi
  • Jangan pernah mencampur spasi dan tab.
  • Ketika awal proyek, sebelum Anda menulis kode apapun, memilih antara indentasi lunak (spasi) atau tab nyata, pertimbangkan hukum ini.
    • Untuk dibaca, saya selalu merekomendasikan pengaturan ukuran indent editor untuk dua karakter — ini berarti dua ruang atau dua ruang mewakili tab nyata.
  • Jika editor mendukungnya, selalu bekerja dengan pengaturan "show invisibles" diaktifkan. Manfaat dari latihan ini adalah:
    • Konsistensi
    • Menghilangkan akhir baris spasi
    • Menghilangkan kosong baris spasi
    • Commits dan diffs yang mudah dibaca
  • Gunakan Editorconfig bila memungkinkan. Mendukung sebagian IDE dan menangani pengaturan penting spasi.
  1. Keindahan Syntax

    A. Parens, Braces, Linebreaks

    // if/else/for/while/try selalu memiliki ruang, kurung, dan renggang beberapa baris
    // ini mendorong kemudahan membaca
    
    // 2.A.1.1
    // Contoh dari syntax yang sukar dibaca
    
    if(condition) doSomething();
    
    while(condition) iterating++;
    
    for(var i=0;i<100;i++) someIterativeFn();
    
    
    // 2.A.1.1
    // Gunakan spasi untuk mempermudah pembacaan
    
    if ( condition ) {
      // statements
    }
    
    while ( condition ) {
      // statements
    }
    
    for ( var i = 0; i < 100; i++ ) {
      // statements
    }
    
    // Bahkan lebih baik:
    
    var i,
      length = 100;
    
    for ( i = 0; i < length; i++ ) {
      // statements
    }
    
    // Atau...
    
    var i = 0,
      length = 100;
    
    for ( ; i < length; i++ ) {
      // statements
    }
    
    var prop;
    
    for ( prop in object ) {
      // statements
    }
    
    
    if ( true ) {
      // statements
    } else {
      // statements
    }

    B. Assignments, Declarations, Functions ( Named, Expression, Constructor )

    // 2.B.1.1
    // Variables
    var foo = "bar",
      num = 1,
      undef;
    
    // Literal notations:
    var array = [],
      object = {};
    
    
    // 2.B.1.2
    // Menggunakan hanya satu `var` per lingkup (fungsi) atau satu` var` untuk setiap variabel,
    // Mempermudah pembacaan dan membuat daftar deklarasi Anda bebas dari kekacauan.
    // Menggunakan satu `var` per variabel Anda dapat mengambil kontrol yang lebih dari versi Anda
    // Dan membuatnya lebih mudah untuk menyusun ulang baris.
    // Satu `var` per lingkup membuatnya lebih mudah untuk mendeteksi variabel terdeklarasikan
    // Yang mungkin menjadi akan menjadi globals.
    // Pilih baik untuk proyek Anda dan jangan pernah mencampur mereka.
    
    // Buruk
    var foo = "",
      bar = "";
    var qux;
    
    // Baik
    var foo = "";
    var bar = "";
    var qux;
    
    // atau..
    var foo = "",
      bar = "",
      qux;
    
    // atau..
    var // Komentar disini
    foo = "",
    bar = "",
    quux;
    
    // 2.B.1.3
    // var statements harus selalu di awal lingkup masing-masing (fungsi).
    
    
    // Buruk
    function foo() {
    
      // beberapa statement disini
    
      var bar = "",
        qux;
    }
    
    // Baik
    function foo() {
      var bar = "",
        qux;
    
      // semua statement setelah variabel dideklarasikan.
    }
    
    // 2.B.1.4
    // const dan let, dari ECMAScript 6, juga harus berada di bagian atas ruang lingkup mereka (blok).
    
    // Buruk
    function foo() {
      let foo,
        bar;
      if ( condition ) {
        bar = "";
        // statements
      }
    }
    // Baik
    function foo() {
      let foo;
      if ( condition ) {
        let bar = "";
        // statements
      }
    }
    // 2.B.2.1
    // Deklarasi nama fungsi
    function foo( arg1, argN ) {
    
    }
    
    // Penggunaan
    foo( arg1, argN );
    
    
    // 2.B.2.2
    // Deklarasi nama fungsi
    function square( number ) {
      return number * number;
    }
    
    // Penggunaan
    square( 10 );
    
    // Benar-benar dibuat dengam gaya passing berkelanjutan
    function square( number, callback ) {
      callback( number * number );
    }
    
    square( 10, function( square ) {
      // callback statements
    });
    
    
    // 2.B.2.3
    // Ekspresi fungsi
    var square = function( number ) {
      // Mengembalikan suatu nilai yang valuable dan relevan
      return number * number;
    };
    
    // Ekspresi fungsi dengan Identifier
    // Bentuk yang disukai ini memiliki nilai tambah yang
    // Mampu menyebut dirinya dan memiliki identitas di stack traces:
    var factorial = function factorial( number ) {
      if ( number < 2 ) {
        return 1;
      }
    
      return number * factorial( number - 1 );
    };
    
    
    // 2.B.2.4
    // Deklarasi Constructor
    function FooBar( options ) {
    
      this.options = options;
    }
    
    // Penggunaan
    var fooBar = new FooBar({ a: "alpha" });
    
    fooBar.options;
    // { a: "alpha" }

    C. Exceptions, Slight Deviations

    // 2.C.1.1
    // Fungsi demham callbacks
    foo(function() {
      // Catatan: tidak ada ruang ekstra antara parent pertama
      // Dari pelaksanaan pemanggilan fungsi dan kata "function"
    });
    
    // Fungsi menerima sebuah array, tidak ada ruang
    foo([ "alpha", "beta" ]);
    
    // 2.C.1.2
    // Fungsi menerima sebuah objek, tidak ada ruang
    foo({
      a: "alpha",
      b: "beta"
    });
    
    // Satu argumen string literal, tidak ada ruang
    foo("bar");
    
    // Ekspresi parents, tidak ada ruang
    if ( !("foo" in obj) ) {
      obj = (obj.bar || defaults).baz;
    }

    D. Konsistensi Selalu Menang

    Di bagian 2.A-2.C, aturan spasi yang ditetapkan sebagai rekomendasi dengan sederhana, tujuan yang lebih tinggi: konsistensi. Sangat penting untuk dicatat bahwa format preferensi, seperti "inner whitespace" harus dipertimbangkan opsional, tetapi hanya satu gaya harus ada di seluruh sumber proyek Anda.

    // 2.D.1.1
    
    if (condition) {
      // statements
    }
    
    while (condition) {
      // statements
    }
    
    for (var i = 0; i < 100; i++) {
      // statements
    }
    
    if (true) {
      // statements
    } else {
      // statements
    }

    E. Tanda Kutip

    Apakah Anda lebih suka tunggal atau ganda seharusnya tidak masalah, tidak ada perbedaan dalam cara JavaScript mem-parsing mereka. Apa BENAR-BENAR HARUS harus ditegakkan adalah konsistensi. Jangan pernah mencampur kutipan dalam proyek yang sama. Pilih satu gaya dan tetap dengan itu.

    F. Akhir Baris dan Garis Kosong

    Spasi dapat merusak diffs dan membuat changesets mungkin untuk dibaca. Pertimbangkan menggabungkan hook pre-commit yang menghilangkan end-of-line spasi dan ruang kosong di baris kosong secara otomatis.

  2. Pemeriksaan type(Courtesy jQuery Core Style Guidelines)

    A. Actual Types

    String:

     typeof variable === "string"
    

    Number:

     typeof variable === "number"
    

    Boolean:

     typeof variable === "boolean"
    

    Object:

     typeof variable === "object"
    

    Array:

     Array.isArray( arrayLikeObject )
     (wherever possible)
    

    Node:

     elem.nodeType === 1
    

    null:

     variable === null
    

    null or undefined:

     variable == null
    

    undefined:

    Global Variables:

     typeof variable === "undefined"
    

    Local Variables:

     variable === undefined
    

    Properties:

     object.prop === undefined
     object.hasOwnProperty( prop )
     "prop" in object
    

    B. Coerced Types

    Mempertimbangkan implikasi dari berikut ...

    Mengingat HTML ini:

    <input type="text" id="foo-input" value="1">
    // 3.B.1.1
    
    // `Foo` telah dinyatakan dengan nilai `0` dan jenisnya adalah `number`
    var foo = 0;
    
    // typeof foo;
    // "number"
    ...
    
    // Di suatu tempat dalam kode anda kemudian, Anda perlu memperbarui `foo`
    // Dengan nilai baru yang berasal dari unsur masukan
    
    foo = document.getElementById("foo-input").value;
    
    // Jika Anda menguji `typeof foo` sekarang, hasilnya akan `string`
    // Ini berarti bahwa jika Anda memiliki logika yang diuji `foo` seperti:
    
    if ( foo === 1 ) {
    
      importantTask();
    
    }
    
    // `importantTask()` tidak akan pernah dievaluasi, meskipun `foo` memiliki nilai "1"
    
    
    // 3.B.1.2
    
    // Anda dapat mendahului masalah dengan menggunakan smart coercion dengan unary + atau - operators:
    
    foo = +document.getElementById("foo-input").value;
    //    ^ unary + operator akan mengkonversi sisi operan haknya untuk nomor
    
    // typeof foo;
    // "number"
    
    if ( foo === 1 ) {
    
      importantTask();
    
    }
    
    // `importantTask()` akan terpanggil

    Berikut adalah beberapa kasus yang umum bersama dengan coercions:

    // 3.B.2.1
    
    var number = 1,
      string = "1",
      bool = false;
    
    number;
    // 1
    
    number + "";
    // "1"
    
    string;
    // "1"
    
    +string;
    // 1
    
    +string++;
    // 1
    
    string;
    // 2
    
    bool;
    // false
    
    +bool;
    // 0
    
    bool + "";
    // "false"
    // 3.B.2.2
    
    var number = 1,
      string = "1",
      bool = true;
    
    string === number;
    // false
    
    string === number + "";
    // true
    
    +string === number;
    // true
    
    bool === number;
    // false
    
    +bool === number;
    // true
    
    bool === string;
    // false
    
    bool === !!string;
    // true
    // 3.B.2.3
    
    var array = [ "a", "b", "c" ];
    
    !!~array.indexOf("a");
    // true
    
    !!~array.indexOf("b");
    // true
    
    !!~array.indexOf("c");
    // true
    
    !!~array.indexOf("d");
    // false
    
    // Perhatikan: bahwa di atas harus dipertimbangkan "unnecessarily clever"
    // Memilih pendekatan yang jelas dari membandingkan nilai kembali dari
    // IndexOf, seperti:
    
    if ( array.indexOf( "a" ) >= 0 ) {
      // ...
    }
    // 3.B.2.4
    
    
    var num = 2.5;
    
    parseInt( num, 10 );
    
    // sama seperti...
    
    ~~num;
    
    num >> 0;
    
    num >>> 0;
    
    // All result in 2
    
    
    // Namun diingat, bahwa angka negatif akan diperlakukan berbeda...
    
    var neg = -2.5;
    
    parseInt( neg, 10 );
    
    // sama seperti...
    
    ~~neg;
    
    neg >> 0;
    
    // Semua hasil di -2
    // Namun ...
    
    neg >>> 0;
    
    // Akan menghasilkan 4294967294
    
    
    
  3. Evaluasi Kondisional

    // 4.1.1
    // Ketika hanya mengevaluasi bahwa array memiliki panjang,
    // maka seperti dibawah ini:
    if ( array.length > 0 ) ...
    
    // ...mengevaluasi truthiness, seperti ini:
    if ( array.length ) ...
    
    
    // 4.1.2
    // Ketika hanya mengevaluasi bahwa array itu kosong,
    // maka seperti dibawah ini:
    if ( array.length === 0 ) ...
    
    // ...mengevaluasi truthiness, seperti ini:
    if ( !array.length ) ...
    
    
    // 4.1.3
    // Ketika hanya mengevaluasi bahwa string tidak kosong,
    // maka seperti dibawah ini:
    if ( string !== "" ) ...
    
    // ...mengevaluasi truthiness, seperti ini:
    if ( string ) ...
    
    
    // 4.1.4
    // Ketika hanya mengevaluasi bahwa string itu kosong,
    // maka seperti dibawah ini:
    if ( string === "" ) ...
    
    // ...mengevaluasi falsy-ness, seperti ini:
    if ( !string ) ...
    
    
    // 4.1.5
    // Ketika hanya mengevaluasi bahwa referensi benar,
    // maka seperti dibawah ini:
    if ( foo === true ) ...
    
    // ...mengevaluasi seperti yang Anda maksud itu, mengambil keuntungan dari dibangun pada kemampuan:
    if ( foo ) ...
    
    
    // 4.1.6
    // Ketika mengevaluasi bahwa referensi adalah salah,
    // maka seperti dibawah ini:
    if ( foo === false ) ...
    
    // ...menggunakan negasi untuk memaksa evaluasi yang benar
    if ( !foo ) ...
    
    // ...Hati-hati, ini juga akan cocok: 0, "", null, undefined, NaN
    // Jika Anda _HARUS_ test untuk false boolean, maka gunakan
    if ( foo === false ) ...
    
    
    // 4.1.7
    // Ketika hanya mengevaluasi ref yang mungkin nol atau undefined, tapi tidak false, "" atau 0,
    // maka seperti dibawah ini:
    if ( foo === null || foo === undefined ) ...
    
    // ...mengambil keuntungan dari == type coercion, seperti ini:
    if ( foo == null ) ...
    
    // Ingat, menggunakan == akan cocok dengan `null` untuk KEDUA` null` dan `undefined`
    // tetapi tidak `false`," "atau 0
    null == undefined

    SELALU mengevaluasi untuk yang terbaik, hasil yang paling akurat - di atas merupakan pedoman, bukan dogma.

    // 4.2.1
    // Type coercion dan catatan evaluasi
    
    // Prefer `===` over `==` (kecuali kasus memerlukan evaluasi jenis longgar)
    
    // === menyamakan type, yang berarti bahwa:
    
    "1" === 1;
    // false
    
    // == tidak menyamakan type, yang berarti bahwa::
    
    "1" == 1;
    // true
    
    
    // 4.2.2
    // Booleans, Truthies & Falsies
    
    // Booleans:
    true, false
    
    // Truthy:
    "foo", 1
    
    // Falsy:
    "", 0, null, undefined, NaN, void 0
  4. Practical Style

    // 5.1.1
    // Sebuah Modul Praktis
    
    (function( global ) {
      var Module = (function() {
    
        var data = "secret";
    
        return {
          // Ini adalah beberapa properti boolean
          bool: true,
          // Beberapa nilai string
          string: "a string",
          // Properti Array
          array: [ 1, 2, 3, 4 ],
          // Properti objek
          object: {
            lang: "en-Us"
          },
          getData: function() {
            // mendapatkan nilai saat ini dari `data`
            return data;
          },
          setData: function( value ) {
            // menetapkan nilai `data` dan mengembalikannya
            return ( data = value );
          }
        };
      })();
    
      // Hal-hal lain yang mungkin terjadi di sini
    
      // mengekspos modul ke obyek global
      global.Module = Module;
    
    })( this );
    // 5.2.1
    // Sebuah Constructor Praktis
    
    (function( global ) {
    
      function Ctor( foo ) {
    
        this.foo = foo;
    
        return this;
      }
    
      Ctor.prototype.getFoo = function() {
        return this.foo;
      };
    
      Ctor.prototype.setFoo = function( val ) {
        return ( this.foo = val );
      };
    
    
      // Untuk memanggil konstruktor tanpa `new`, Anda mungkin melakukan hal ini:
      var ctor = function( foo ) {
        return new Ctor( foo );
      };
    
    
      // mengekspos konstruktor untuk obyek global
      global.ctor = ctor;
    
    })( this );
  5. Naming

    A. Anda bukan manusia kode compiler/kompresor, jadi jangan mencoba untuk menjadi salah satu.

    Kode berikut adalah contoh mengerikan penamaan:

    // 6.A.1.1
    // Contoh kode dengan nama yang buruk
    
    function q(s) {
      return document.querySelectorAll(s);
    }
    var i,a=[],els=q("#foo");
    for(i=0;i<els.length;i++){a.push(els[i]);}

    Tanpa ragu, Anda sudah menulis kode seperti ini - mudah-mudahan yang berakhir hari ini.

    Berikut bagian logika yang sama, tetapi dengan ramah, penamaan yang lebih bijaksana(dan struktur yang mudah dibaca):

    // 6.A.2.1
    // Contoh kode dengan nama ditingkatkan
    
    function query( selector ) {
      return document.querySelectorAll( selector );
    }
    
    var idx = 0,
      elements = [],
      matches = query("#foo"),
      length = matches.length;
    
    for ( ; idx < length; idx++ ) {
      elements.push( matches[ idx ] );
    }

    Beberapa pointer penamaan tambahan:

    // 6.A.3.1
    // Penamaan string
    
    `dogs` adalah string
    
    
    // 6.A.3.2
    // Penamaan array
    
    `dogs` adalah array dari` string dog`
    
    
    // 6.A.3.3
    // Penamaan fungsi, objek, contoh, dll
    
    CamelCase; Fungsi dan var deklarasi
    
    
    // 6.A.3.4
    // Penamaan konstruktor, prototipe, dll
    
    PascalCase; fungsi konstruktor
    
    
    // 6.A.3.5
    // Penamaan ekspresi reguler
    
    rDesc = //;
    
    
    // 6.A.3.6
    // Dari Google Closure Library Style Guide
    
    functionNamesLikeThis;
    variableNamesLikeThis;
    ConstructorNamesLikeThis;
    EnumNamesLikeThis;
    methodNamesLikeThis;
    SYMBOLIC_CONSTANTS_LIKE_THIS;

    B. Faces of this

    Di luar kasus penggunaan umum dikenal dengan call dan apply, lebih disarankan .bind (this) atau setara fungsional, untuk menciptakan definisi BoundFunction untuk invocation nanti. Hanya resor untuk aliasing ketika tidak ada pilihan yang lebih tersedia.

    // 6.B.1
    function Device( opts ) {
    
      this.value = null;
    
      // Membuka aliran async,
      // Ini akan disebut terus
      stream.read( opts.path, function( data ) {
    
        // Perbarui nilai ini misalnya saat
        // Dengan nilai terbaru dari
        // aliran data
        this.value = data;
    
      }.bind(this) );
    
      // Throttle frekuensi dari event yang dipancarkan dari
      // Contoh Device ini
      setInterval(function() {
    
        // Memancarkan sebuah event throttled
        this.emit("event");
    
      }.bind(this), opts.freq || 100 );
    }
    
    // Hanya berpura-pura kita telah mewarisi EventEmitter;)

    Ketika tidak tersedia, setara fungsional untuk .bind ada di banyak perpustakaan JavaScript modern.

    // 6.B.2
    
    // contoh: lodash/underscore, _.bind()
    function Device( opts ) {
    
      this.value = null;
    
      stream.read( opts.path, _.bind(function( data ) {
    
        this.value = data;
    
      }, this) );
    
      setInterval(_.bind(function() {
    
        this.emit("event");
    
      }, this), opts.freq || 100 );
    }
    
    // contoh: jQuery.proxy
    function Device( opts ) {
    
      this.value = null;
    
      stream.read( opts.path, jQuery.proxy(function( data ) {
    
        this.value = data;
    
      }, this) );
    
      setInterval( jQuery.proxy(function() {
    
        this.emit("event");
    
      }, this), opts.freq || 100 );
    }
    
    // contoh: dojo.hitch
    function Device( opts ) {
    
      this.value = null;
    
      stream.read( opts.path, dojo.hitch( this, function( data ) {
    
        this.value = data;
    
      }) );
    
      setInterval( dojo.hitch( this, function() {
    
        this.emit("event");
    
      }), opts.freq || 100 );
    }

    Sebagai usaha terakhir, membuat alias untuk this menggunakan self sebagai Identifier. Hal ini sangat rawan bug dan harus dihindari sebisa mungkin.

    // 6.B.3
    
    function Device( opts ) {
      var self = this;
    
      this.value = null;
    
      stream.read( opts.path, function( data ) {
    
        self.value = data;
    
      });
    
      setInterval(function() {
    
        self.emit("event");
    
      }, opts.freq || 100 );
    }

    C. Menggunakan thisArg

    Beberapa metode prototipe built-in ES 5.1 datang dengan signature khusus thisArg, yang harus digunakan bila memungkinkan

    // 6.C.1
    
    var obj;
    
    obj = { f: "foo", b: "bar", q: "qux" };
    
    Object.keys( obj ).forEach(function( key ) {
    
      // |this| sekarang mengacu pada `obj`
    
      console.log( this[ key ] );
    
    }, obj ); // <-- arg terakhir adalah `thisArg`
    
    // Cetak...
    
    // "foo"
    // "bar"
    // "qux"

    thisArg dapat digunakan dengan Array.prototype.every, Array.prototype.forEach, Array.prototype.some, Array.prototype.map, Array.prototype.filter

  6. Misc

    Bagian ini akan berfungsi untuk menggambarkan ide-ide dan konsep-konsep yang tidak boleh dianggap dogma, melainkan ada untuk mendorong praktik mempertanyakan dalam upaya untuk menemukan cara yang lebih baik untuk melakukan tugas-tugas pemrograman umum JavaScript.

    A. Menggunakan switch harus dihindari, cara modern tracing akan blacklist fungsi dengan switch statements

    Tampaknya ada peningkatan drastis untuk pelaksanaan switch dalam rilis terbaru dari Firefox dan Chrome. http://jsperf.com/switch-vs-object-literal-vs-module

    Perbaikan penting dapat dilihat di sini juga: #13

    // 7.A.1.1
    // Contoh switch statement
    
    switch( foo ) {
      case "alpha":
        alpha();
        break;
      case "beta":
        beta();
        break;
      default:
        // sesuatu untuk default
        break;
    }
    
    // 7.A.1.2
    // Pendekatan alternatif yang mendukung composability dan usabilitas adalah untuk
    // menggunakan objek untuk menyimpan "cases" dan fungsi untuk mendelegasikan:
    
    var cases, delegator;
    
    // Contoh return hanya untuk ilustrasi.
    cases = {
      alpha: function() {
        // statements
        // sebuah return
        return [ "Alpha", arguments.length ];
      },
      beta: function() {
        // statements
        // sebuah return
        return [ "Beta", arguments.length ];
      },
      _default: function() {
        // statements
        // sebuah return
        return [ "Default", arguments.length ];
      }
    };
    
    delegator = function() {
      var args, key, delegate;
    
      // Transform daftar argumen ke dalam array
      args = [].slice.call( arguments );
    
      // menggeser key cases dari argumen
      key = args.shift();
    
      // Menetapkan default case handler
      delegate = cases._default;
    
      // Mengambil metode untuk mendelegasikan operasi
      if ( cases.hasOwnProperty( key ) ) {
        delegate = cases[ key ];
      }
    
      // Ruang lingkup arg bisa diatur untuk sesuatu yang spesifik,
      // dalam hal ini, | null | akan cukup
      return delegate.apply( null, args );
    };
    
    // 7.A.1.3
    // Menempatkan API dalam 7.A.1.2 untuk bekerja:
    
    delegator( "alpha", 1, 2, 3, 4, 5 );
    // [ "Alpha", 5 ]
    
    // Tentu saja, `case` argumen key bisa dengan mudah didasarkan
    // pada beberapa kondisi yang sewenang-wenang lainnya.
    
    var caseKey, someUserInput;
    
    // Mungkin semacam masukan form?
    someUserInput = 9;
    
    if ( someUserInput > 10 ) {
      caseKey = "alpha";
    } else {
      caseKey = "beta";
    }
    
    // atau...
    
    caseKey = someUserInput > 10 ? "alpha" : "beta";
    
    // Dan Kemudian...
    
    delegator( caseKey, someUserInput );
    // [ "Beta", 1 ]
    
    // Dan Tentu saja...
    
    delegator();
    // [ "Default", 0 ]
    

    B. Awal kembali mempromosikan pembacaan kode dengan perbedaan kinerja diabaikan

    // 7.B.1.1
    // Buruk:
    function returnLate( foo ) {
      var ret;
    
      if ( foo ) {
        ret = "foo";
      } else {
        ret = "quux";
      }
      return ret;
    }
    
    // Baik:
    
    function returnEarly( foo ) {
    
      if ( foo ) {
        return "foo";
      }
      return "quux";
    }
  7. Native dan Host Objects

    Prinsip dasar:

    Jangan melakukan omong kosong bodoh dan semuanya akan ok.

    Untuk memperkuat konsep ini, silahkan menonton presentasi berikut:

    “Semuanya yang Diizinkan: Memperluas Built-in” by Andrew Dupont (JSConf2011, Portland, Oregon)

    https://www.youtube.com/watch?v=xL3xCO7CLNM

  8. Komentar

    Satu baris dibawah kode itu adalah subjek

    Multiline itu baik

    Akhir dari line komentar terlarang!

    Gaya JSDoc baik, tetapi membutuhkan waktu investasi yang signifikan

  9. One Language Code

    Program harus ditulis dalam satu bahasa, apa pun bahasa yang mungkin, seperti yang ditentukan oleh pengelola atau pengelola.

Lampiran

Koma Pertama.

Setiap proyek yang mengutip dokumen ini sebagai panduan dasar gaya yang tidak akan menerima format koma kode pertama, kecuali secara eksplisit ditentukan lain oleh penulis proyek ini.


Creative Commons License
Principles of Writing Consistent, Idiomatic JavaScript by Rick Waldron and Contributors is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at github.com/rwldrn/idiomatic.js.