Dateiorganisation

• Alle JavaScript-Dateien sollten im gemeinsamen '''script'''-Ordner des Projekts abgelegt werden
• Verwendete Bibliotheksdateien von Drittanbietern sollten im Ordner '''script/lib''' abgelegt werden
• Wiederverwendbare benutzerdefinierte Module sollten im Ordner '''script/commons''' abgelegt werden. Wenn ein wiederverwendbares Modul mehrere Unterdateien umfasst, muss ein separater Modulordner erstellt werden
• JavaScript-Dateien, die von einzelnen Seitenmodulen verwendet werden, sollten im Ordner '''script/{module_name}''' abgelegt werden
• Vom Projekt simulierte JSON-Daten sollten im Ordner '''script/json''' abgelegt werden, wobei separate Unterordner pro Seite erstellt werden
• Bei Verwendung eines MVC-Frameworks in JavaScript sollten die verwendeten Vorlagendateien im Ordner '''script/templates''' abgelegt werden, wobei separate Unterordner pro Seite erstellt werden

Formatierung

• Für allgemeine Prinzipien kann auf [PhpGuideline PHP-Codierungsstandards] verwiesen werden
• 始终使用 var 定义变量

var global = '';

function method() {
    var local = '';
}

• 声明语句始终以分号结尾
• 不要在数组和对象中使用多余的“,”（兼容 IE）

//wrong
var arr = [1,2,];
var person = {
    name: 'name',
    age: 20,
};
//wrong
var arr = [1,2];
var person = {
    name: 'name',
    age: 20
};

• 定义顶层命名空间，例如 inBike，并在顶层命名空间下按模块定义自定义私有命名空间
• 所有模块代码都应放在匿名自执行函数中，通过给 window 对象下的自定义命名空间赋值来暴露

if (!window.inBike) {
    window.inBike = {};
}
window.inBike.rideway = rideway;

• 事件绑定代码需要放在 DOM ready 函数中

$(function() {
     //bind function is in the init function
     window.inBike.rideway.init();
})

• 将模块方法放在一个对象中。方法名后应紧跟“:”。在“:”和“function”之间留一个空格。在“function()”和后面的“{”之间留一个空格

var module = function() {
    method: function() {

    }
};

• 使用单引号包裹

var str = 'some text';

• 所有使用的变量都需要在使用前定义，并在定义后立即初始化

var obj = null;
var num = 0;
var arr = [];
var isEmpty = true;

• 在使用浏览器控制台之前，检查是否支持

if (console) {
    console.log('this is my log');
}

Benennung

• Für allgemeine Prinzipien kann auf [PhpGuideline PHP-Codierungsstandards] verwiesen werden
• 使用 camelCase 命名变量和函数，首字母小写。类名首字母应大写

var numberList = [1,2];
var util = {
    removeNode: function(){
        ....
    }
};

function Person(name, age) {
    this.name = name;
    this.age = age;
}

• 使用 $name 命名 jQuery 对象。原生 DOM 元素以“dom”开头。对象中的私有变量以下划线开头

var $image = $('#cover');
var domImage = document.getElementById('cover');
var obj = {
    _privateVar: null,
    method: function() {

    }
};

Kommentare

• Für allgemeine Prinzipien kann auf [PhpGuideline PHP-Codierungsstandards] verwiesen werden
• Verwenden Sie mehr einzeilige Kommentare, um die Bedeutung von Logikblöcken anzugeben

// Handle the case where IE and Opera return items
// by name instead of ID
if ( elem.id !== match[2] ) {
    return rootjQuery.find( selector );
}

// Otherwise, we inject the element directly into the jQuery object
this.length = 1;
this[0] = elem;

• Geben Sie die Konstruktormethode der Klasse an

/**
 * @constructor
 */
some.long.namespace.MyClass = function() {
};

• Kennzeichnen Sie Typ und Bedeutung von Enum-Konstanten

/** @enum {string} */
some.long.namespace.Fruit = {
  APPLE: 'a',
  BANANA: 'b'
};

• Verwenden Sie Kommentare, um die Sichtbarkeit von Methoden oder Variablen zu kennzeichnen, was statische Prüfungen erleichtert

/** @protected */
AA_PublicClass.staticProtectedProp = 31;

/** @private */
AA_PublicClass.prototype.privateMethod_ = function() {};

Best Practices

• Vermeiden Sie die Verwendung von eval
• Vermeiden Sie die Verwendung von with für Objekte und von for-in für Arrays
• Verwenden Sie Closures mit Vorsicht, um zirkuläre Referenzen zu vermeiden
• Seien Sie vorsichtig mit dem Kontext, in dem this verwendet wird

var $button = $('#my-button');
$button.click(function(){
    var self = this;
    var util = {
       getVal: function() {
           return self.val();
       }
    }
});

• Verwenden Sie nach Möglichkeit Kurzschreibweisen, wie ternäre Operatoren, logische Umschaltung, Inkrementoperationen usw.

var name = ('undefined' == typeof(name)) ? '' : name;
(age < 0) && (age = 0);
count++;

• Verwenden Sie function nicht im Blockgültigkeitsbereich

// 错误
if (x) {
  function foo() {}
}

// 正确
if (x) {
  var foo = function() {}
}

• Binden Sie Event-Listener am übergeordneten Knoten und reagieren Sie je nach Ereignisquelle getrennt
• Verwenden Sie für komplexe Seitenmodule Abhängigkeitsverwaltungsbibliotheken wie SeaJS, RequireJS und MVC-Frameworks wie Backbone, Knockout, Stapes, um Ihren Code zu organisieren