Organisation de fichiers

• Tous les fichiers javascript doivent être placés dans le dossier commun '''script''' du projet
• Les fichiers de bibliothèques tierces utilisés doivent être placés dans le dossier '''script/lib'''
• Les modules personnalisés réutilisables doivent être placés dans le dossier '''script/commons'''. Si un module réutilisable implique plusieurs sous-fichiers, un dossier de module séparé doit être créé
• Les fichiers Javascript utilisés par les modules de page individuels doivent être placés dans le dossier '''script/{module_name}'''
• Les données JSON simulées par le projet doivent être placées dans le dossier '''script/json''', avec des sous-dossiers séparés créés par page
• Lors de l'utilisation d'un framework MVC en JavaScript, les fichiers de modèle utilisés doivent être placés dans le dossier '''script/templates''', avec des sous-dossiers séparés créés par page

Formatage

• Les principes généraux peuvent se référer à [PhpGuideline PHP Coding Standards]
• Utilisez toujours var pour définir des variables

var global = '';

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

• Terminez toujours une instruction de déclaration par un point-virgule
• N'utilisez pas de "," supplémentaire pour les tableaux et les objets (pour la compatibilité IE)

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

• Définissez un espace de noms de premier niveau tel que inBike, et définissez des espaces de noms privés personnalisés sous l'espace de noms de premier niveau, répartis selon les modules
• Tout le code de module doit être placé dans des fonctions anonymes auto-invoquées et exposé en attribuant des valeurs à des espaces de noms personnalisés sous l'objet window

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

• Le code de liaison d'événements doit être exécuté dans la fonction DOM ready

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

• Placez les méthodes personnalisées du module dans un objet. Le nom de la méthode doit être immédiatement suivi de ":". Laissez un espace entre ":" et "function". Laissez un espace entre "function()" et le "{" suivant

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

    }
};

• Utilisez des guillemets simples pour entourer les chaînes de caractères

var str = 'some text';

• Toutes les variables utilisées doivent être définies avant leur utilisation et initialisées immédiatement après leur définition

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

• Vérifiez s'il est pris en charge avant d'utiliser l'outil de console du navigateur

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

Nommer

• Les principes généraux peuvent se référer à [PhpGuideline PHP Coding Standards]
• Utilisez camelCase pour nommer les variables et les noms de méthodes, avec la première lettre en minuscule. Pour les noms de classes, la première lettre doit être en majuscule

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

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

• Utilisez $name pour nommer les objets jQuery. Les éléments DOM natifs commencent par "dom". Les variables privées dans un objet commencent par un underscore

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

    }
};

Commentaires

• Les principes généraux peuvent se référer à [PhpGuideline PHP Coding Standards]
• Utilisez davantage de commentaires sur une seule ligne pour indiquer la signification des blocs logiques

// 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;

• Indiquez la méthode constructeur de la classe

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

• Annotez le type et la signification des constantes d'énumération

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

• Utilisez des commentaires pour marquer la visibilité des méthodes ou des variables, ce qui facilite la vérification statique

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

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

Bonnes pratiques

• Évitez d'utiliser eval
• Évitez d'utiliser with pour les objets, et évitez d'utiliser for-in pour les tableaux
• Utilisez les fermetures avec prudence pour éviter les références circulaires
• Soyez prudent quant au contexte dans lequel this est utilisé

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

• Utilisez autant que possible les formes abrégées, telles que les opérateurs ternaires, le basculement logique, les opérations d'incrémentation, etc.

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

• N'utilisez pas function dans une portée de bloc

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

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

• Liez les écouteurs d'événements sur le nœud parent et répondez séparément en fonction de la source de l'événement
• Pour les modules de page complexes, utilisez des bibliothèques de gestion des dépendances telles que SeaJS, RequireJS, et des frameworks MVC comme Backbone, Knockout, Stapes pour organiser votre code