Raccourci : CC/JS

Conventions de codage/JavaScript

From mediawiki.org
Jump to navigation Jump to search
This page is a translated version of the page Manual:Coding conventions/JavaScript and the translation is 84% complete.
Other languages:

Cette page décrit les conventions de codage pour JavaScript dans la base de code MediaWiki. Voir aussi les conventions générales.

Mise en forme

Nous utilisons ESLint comme notre outil de qualité de code, avec le préréglage eslint-config-wikimedia pour encoder la plupart de nos règles de style de codage et de qualité de code. Reportez-vous à Intégrations sur eslint.org pour trouver de nombreux éditeurs de texte ou IDE dotés de modules permettant de fournir un retour en direct pendant la saisie.

Configuration de Linter

Pour exclure des fichiers ou des répertoires de l'analyse (par exemple des bibliothèques tierces), vous pouvez configurer les modèles ignorés dans ESLint, via un fichier .eslintignore.[1] Notez que node_modules est exclu par défaut, donc la plupart des dépôts n'ont pas besoin de mettre en place des règles d'ignorance.

Chaque dépôt a besoin d'un fichier .eslintrc.json dans le répertoire racine du dépôt. L'exemple suivant montre un fichier de configuration ESLint :

{
	"root": true,
	"extends": [
		"wikimedia/client-es5",
		"wikimedia/jquery",
		"wikimedia/mediawiki"
	],
	"globals": {
		// Project-wide globals.
	},
	"rules": {
		// Project-wide rule variations. Keep to a minimum.
	}
}

Voir .eslintrc.json dans MediaWiki et ÉditeurVisuel pour des exemples concrets.

N'oubliez pas de définir "root": true pour éviter une "succession magique" involontaire des configurations d'eslint dans des répertoires parents non liés que vous ou le serveur CI pourriez avoir mis en place sur le disque (par exemple parmi une extension MediaWiki et MediaWiki core, ou entre votre répertoire de projet et quelque chose dans votre répertoire personnel).

The eslint-config-wikimedia preset provides several profiles that projects can choose from as they see fit, such as different language flavours, or run-time environments globals. Par exemple :

  • wikimedia/client-es5 - pour le code du navigateur et prévoit un support ES5
  • wikimedia/client-es6 - pour le code du navigateur qui utilise ES6
  • wikimedia/server - pour le code Node.js 10+ et prévoit un support ES2018
  • wikimedia/qunit - un mixin pour les tests QUnit

You should expect to use multiple .eslintrc.json files in a repo to set different environmental expectations for different subdirectories. This makes sure that you don't accidentally use window methods in server code you expect to run on the server, or reference QUnit in production code. .eslintrc.json files in subdirectories automatically inherit from the parent directory's configuration, so they only need to contain the things that are specific to that directory (example file).

Intégration continue

Projects are encouraged to enforce ESLint passing by including it their npm test script via the "test" command in package.json.

See Continuous integration/Entry points for more information about that.

If your project has a fairly heavy test pipeline, one could define an npm run lint or even npm run lint:js script in package.json to make it easy to run just those from the command-line during local development (so that one doesn't have to open each file in an editor and/or to wait for CI).

To expose other command-line features from ESLint (such as linting individual files outside a text editor, or using the --fix feature), define "eslint" as its own script in package.json without any argument. You can then invoke it from the command-line as follows:

# Entire directory, recursive
$ npm run eslint -- .
$ npm run eslint -- resources/

# Single file
$ npm run eslint -- resources/ext.foo/bar.js

# Fixer
$ npm run eslint -- --fix resources/ext.foo/

Espace blanc

Espaces

Nous utilisons les conventions suivantes :

  • Indentation avec tabulations.
  • Pas d'espace à la suite d'un autre espace.
  • Utilisez des lignes vides pour séparer un bloc de code logiquement lié à un autre.
  • Un espace des deux côtés des opérateurs binaires et des opérateurs d'affectation.
  • Les mots-clés suivis d'une "(" (parenthèse gauche) doivent être séparés par un espace. Cela permet de distinguer visuellement les mots-clés des appels de fonction.
  • Il ne doit pas y avoir d'espace entre le nom de la fonction et la parenthèse gauche d'une liste d'arguments.
  • Il doit y avoir un espace à l'intérieur des parenthèses (comme dans les instructions if, les appels de fonction et les listes d'arguments).
  • N'utilisez pas les opérateurs comme s'il s'agissait de fonctions (par exemple delete, void, typeof, new, return...).

Ces aspects et d'autres de notre guide de style sont appliqués avec ESLint.

Exemples d'espaces
Correct Incorrect
a.foo = bar + baz;

if ( foo ) {
	foo.bar = doBar();
}

function foo() {
	return bar;
}

foo = function () {
	return 'bar';
};

foo = typeof bar;

function baz( foo, bar ) {
	return 'gaz';
}

baz( 'banana', 'pear' );

foo = bar[ 0 ];
foo = bar[ baz ];
foo = [ bar, baz ];
a.foo=bar+baz;

if( foo ){
	foo.bar = doBar () ;
}

function foo () {
	return bar;
};

foo = function() {
	return('bar');
};

foo = typeof( bar );

function baz(foo, bar) {
	return 'gaz';
}

baz('banana', 'pear');

foo = bar[0];
foo = bar[baz];
foo = [bar,baz];

Longueur de ligne

Lines should wrap at no more than 80–100 characters. If a statement does not fit on a single line, split the statement over multiple lines. The continuation of a statement should be indented one extra level.

Function calls and objects should either be on a single line or split over multiple lines with one line for each segment. Avoid closing a function call or object at a different indentation than its opening.

Exemples de saut de ligne
Oui Non
// One line
if ( mw.foo.hasBar() && mw.foo.getThis() === 'that' ) {
	return { first: 'Who', second: 'What' };
} else {
	mw.foo( 'first', 'second' );
}

// Multi-line (one component per line)
if (
	// Condition head indented one level.
	mw.foo.hasBar() &&
	mw.foo.getThis() === 'that' &&
	!mw.foo.getThatFrom( 'this' )
) {
    // ↖ Closing parenthesis at same level as opening.
	return {
		first: 'Who',
		second: 'What',
		third: 'I don\'t know'
	};
} else {
	mw.foo(
		[ 'first', 'nested', 'value' ],
		'second'
	);
}
// No: Mixed one line and multi-line
if ( mw.foo.hasBar() && mw.foo.getThis() === 'that' &&
	!mw.foo.getThatFrom( 'this' ) ) {

	// No: varying number of segments per line.
	return { first: 'Who', second: 'What',
		third: 'I don\'t know' };

} else {
	mw.foo( 'first', 'second',
		'third' );

	// No: Statements looking like they are split over multiple lines but still on line.
	// Visualy looks like a call with one parameter, or with an array as first parameter.
	mw.foo(
		'first', 'second', 'third'
	);

	mw.foo(
		[ 'first', 'nested', 'value' ], 'second'
	);
}

Structure

En résumé :

// Variables that have literal and cheap initial values
var baz = 42;
var quux = 'apple';

// Local functions
function local( x ) {
	return x * quux.length;
}

// Main statements
var foo = local( baz );
var bar = baz + foo;

Fermeture

If a module bundle can't or otherwise isn't yet registered using package files, then its individual JavaScript files should have a file-level closure around its code.[2] This gives the code its own scope, and avoids leakage of variables from or to other files, including in debug mode, and in a way that is understood by static analysis. This pattern is known as an immediately-invoked function expression (or "iffy"[3]).

For package files this is not needed, as their are executed as a "module" file rather than a "script" file, which naturally have their own local scope. ESLint should also be configured accordingly (set "no-implicit-globals": "off", like in this example).

Déclarations

Variables must be declared before use, and should be the first statement in any file or function. Each assignment must be on its own line. Declarations that don't assign a value should be listed before assignments, on the first lines.

var foo, bar, baz, bang, boom,
	xyzzy, flob,
	waldo = 42,
	quux = 'apple';

When you have multiple lines for value assignments and non-assigned variables, the extra lines should be indented another level.

var $content,
	$wrapper = $( '<div>' ),
	$button = $( '<a>' )
		.attr( 'href', '#' )
		.text( 'Test' );

Functions should be declared before use. In the function body, function declarations should go after variable declarations and before any main statements.

Commentaires

Comments should be on their own line and go over the code they describe.

Within a comment, the opening syntax (e.g. slash-slash, or slash-star) should be separated from the text by a single space, and the text should start with a capital letter. If the comment is a valid sentence, then a full stop should be placed at the end of it.

Use line comments (// foo) within functions and other code blocks (including for multi-line comments).

Use block comments (/* foo */) only for documentation blocks. This helps maintain consistent formatting for inline comments (e.g. not some as blocks and some as multi-line comments, or having to convert from one to the other). It also avoids confusing documentation engines. It also makes it easy to disable parts of the code during development by simply moving the end-comment notation a few lines down, without being short-circuited by an inline block comment.

Be liberal with comments and don't fear file size because of it. All code is automatically minified by ResourceLoader before being shipped.

Commentaires sur la documentation

  • Text in free-form blocks should be sentence case (e.g. description of methods, parameters, return values etc.)
  • Start sentences with a capital letter.
  • Continue sentences belonging to an annotation on the next line, indented with one additional space.
/**
 * Get the user name.
 *
 * Elaborate in an extra paragraph after the first one-line summary in
 * the imperative mood.
 *
 * @param {string} foo Description of a parameter that spans over on the
 *  next line of the comment.
 * @param {number} bar
 * @return {string} User name
 */

Documentation générée

We are currently moving from JSDuck to JSDoc, as the former is unmaintained.

The below will be updated once JSDoc is adopted in MediaWiki core.

Use JSDuck to build documentation (see https://doc.wikimedia.org).

JSDuck is pre-installed in Fresh environments and in WMF CI. To install it in custom developer environment, usegem install jsduck to install it from RubyGems. See the upstream guide for more information.

To generate the documentation, the standard entry point npm run doc should be used, as defined in package.json.

Configure JSDuck in your project via a jsduck.json file. See JSDuck configuration, or check examples jsduck.json for MediaWiki.

Balises

We use the following annotations. They should be used in the order as they are described here, for consistency. See the JSDuck documentation for how these work.

  • @abstract
  • @private
  • @ignore
  • @static
  • @class Name (name is optional, engine will guess name from context)
  • @singleton
  • @extends ClassName
  • @mixins ClassName
  • @constructor
  • @inheritable
  • @member
  • @method name (name is optional, guessed)
  • @property name (name is optional, guessed)
  • @inheritdoc
  • @deprecated
  • @param {Type} name Optional text.
  • @return {Type} Optional text.
  • @chainable
  • @throws {Type}
  • @cfg {Type} [name="default value"] (used when a configuration object is passed to the class constructor, use one for each property and don't include those of parent constructors)

Types

Primitive types and special values: boolean, number, string, undefined, null.

Built-in classes: Object, Array, Function, Date, RegExp, Error.

Égalité

  • Use strict equality operators (=== and !==) instead of (loose) equality (== and !=). The latter does type coercion.
  • No Yoda conditionals.

Contrôles de type

  • string: typeof val === 'string'
  • number: typeof val === 'number'
  • boolean: typeof val === 'boolean'
  • Function: typeof val === 'function'
  • null: val === null
  • object: val === Object( val )
  • Plain Object: jQuery.isPlainObject( val )
  • Array: Array.isArray( val )
  • HTMLElement: obj.nodeType === Node.ELEMENT_NODE
  • undefined:
    • Local variables: variable === undefined
    • Properties: obj.prop === undefined
    • Global variables: typeof variable === 'undefined'

Chaînes

Use single quotes instead of double quotes for string literals. Remember there are no "magic quotes" in JavaScript i.e. \n and \t work everywhere.

To extract part of a string, use the slice() method for consistency. Avoid the substr(), or substring() methods which are redundant, easily mistaken, and may have unexpected side effects.[4][5][6]

Exportation

Use globals exposed by the browser (such as document, location, navigator) directly and not as properties of the window object. This improves confidence in code through static analysis and may also power other IDE features. In addition to browser globals, the only globals that are safe to use are mw, $ and OO.

Avoid creating new global variables. Avoid modifying globals not "owned" by your code. For example, built-in globals such as String or Object must not be extended with additional utility methods, and similarly functionality relating to OOjs or jQuery, should not be assigned to those globals.

To publicly expose functionality for re-use, use module.exports from Package files, and/or assign properties within the mw hierarchy, e.g. mw.echo.Foo.

Note that configuration variables exposed by MediaWiki must be accessed via mw.config . For backward compatibility with legacy user scripts and gadgets, many wg-prefixed configuration keys are still defined as global varables as well, but these are deprecated. (See T72470.)

Environnement

Modifying built-in protypes such as Object.prototype is considered harmful. This is not supported in MediaWiki code, and doing so will likely result in breakage of unrelated features.

Nommage

All variables must be named using CamelCase starting with a lowercase letter, or use all caps (with underscores for separation) if the variable represents some kind of constant value.

All functions must be named using CamelCase, generally starting with a lowercase letter unless the function is a class constructor, in which case it must start with an uppercase letter. Method functions are preferred to start with verb, e.g. getFoo() instead of "foo()".

Abréviations

Names with acronyms in them should treat the acronym as a normal word and only uppercase the first letter as-needed. This applies to two-letter abbreviations as well, such as Id. For example, getHtmlApiSource as opposed to "getHTMLAPISource".

jQuery

Distinguish DOM nodes from jQuery objects by prefixing variables with a dollar sign if they will hold a jQuery object, e.g. $foo = $( '#bar' ). This helps reduce mistakes where conditions use incorrect conditional checks, such as if ( foo ) instead of if ( $foo.length ). Where DOM methods often return null (which is falsey), jQuery methods return an empty collection object (which, like native arrays and other objects in JavaScript, are truthly).

Création d'éléments

Pour créer un élément ordinaire, utilisez la syntaxe simple ‎<tag> dans le constructeur jQuery :

$hello = $( '<div>' )
	.text( 'Hello' );

When creating elements based on the tag name from a variable (which may contain arbitrary html):

// Fetch 'span' or 'div' etc.
tag = randomTagName();
$who = $( document.createElement( tag ) );

Only use $('<a title="valid html" href="#syntax">like this</a>'); when you need to parse HTML (as opposed to creating a plain element).

Collections

Different types of collections sometimes look similar but have different behaviour and should be treated as such. This confusion is mostly caused by the fact that arrays in JavaScript look a lot like arrays in other languages, but are in fact just an extension of Object. We use the following conventions:

Avoid using a for-in loop to iterate over an array (as opposed to a plain object), because for-in will result in many unexpected behaviours, including: keys as strings, unstable iteration order, indexes may skip gaps, iteration may include other non-numerical properties.

Stockage

Keys in localStorage and/or sessionStorage should be accessed via mw.storage or mw.storage.session.

Clés

Keys should start with mw and use camel case and/or hyphens. Do not use underscores or other separators. Examples of real keys:

  • mwuser-sessionId
  • mwedit-state-templatesUsed
  • mwpreferences-prevTab

Beware that contrary to cookies via mw.cookie, there is no wiki prefix or cookie prefix added by default. If values must vary by wiki, you must manually include wgCookiePrefix as part of the key.

Valeurs

Values must be strings. Beware that attempting to store other value types will silently cast to a string (e.g. false would become "false").

Space is limited. Use short and concise values over object structures where possible. A few example:

  • For boolean state (true/false, expanded/collapsed) use "1" or "0".
  • For values that are always numbers, store them as-is and cast with Number on the way out (avoid parseInt).
  • For values that are always strings, store them as-is.
  • For lists of software-defined values, consider comma-separated or pipe-separated strings to reduce space and processing cost.
  • For lists of values that may be user-generated or are otherwise complex in nature, use JSON.

Stratégie d'éviction

Remember that Local storage does not have any eviction strategy by default. Therefore the following should be avoided:

  • Avoid using user-generated input as part of a key name.
  • Avoid keys containing identifiers for user-generated entities (e.g. user names, category names, page ids, or other user-provided or system-provided variables).
  • In general avoid approaches that involve creating a potentially large number of storage keys.

For example, if a feature needs to store state about a variable entity (e.g. current page), it might make sense to use a single key for this feature as a whole and to limit the stored information only to the last few iterations (LRU). The slight increase in retrieval cost (the whole key, instead of separate smaller ones) is considered worth it, as otherwise the number of keys would grow uncontrollably.

Even if the keys are not dependent on user-input, you may still want to use a single key for your feature because otherwise past versions of your software will have stored data that you can't clean up. By using a single key you can roundtrip it in a way that naturally doesn't persist unknown sub properties.

Use of a tracking key is also an anti-pattern and does not avoid the above issues, as this would leak due to race conditions in HTML5 web storage being shared and non-atomic between multiple open browser tabs.

When feature's use of Local storage is to be removed, be sure to implement an eviction strategy first to clean up old values. Typically mw.requestIdleCallback is used to gracefully look for the key and remove it. See T121646 for a more scalable approach.

Informations personnelles

Avoid storing personal information in Local storage as it remains when a user logs out or closes their browser. Use Session storage instead. See T179752.

Code asynchrone

Asynchronuous code should follow, and be compatible with, the Promise standard. When using $.Deferred() avoid use of non-standard jQuery-specific methods like done() or fail(), which causes consuming code to become dependent on jQuery (and thus break if the called function adopts ES6 Promise), and also have unexpected legacy behaviours.

The "done" and "fail" callbacks may execute synchronously in some cases if the Deferred was already settled. This makes code execution order unpredictable and cause subtle bugs.

For example:

function getSqrt( num ) { return $.Deferred().resolve( Math.sqrt( num ) ); }

var x = getSqrt( 49 ).done( function ( val ) {
    console.log( x.state(), val ); // Uncaught TypeError: x is undefined
} );
var y = getSqrt( 49 ).then( function ( val ) {
    console.log( y.state(), val ); // "resolved", 7
} );

console.log( "A" );
getSqrt( 49 ).done( function ( val ) {
    console.log( "C" ); // A C B, or A B C
} );
console.log( "B" );

console.log( "A" );
getSqrt( 49 ).then( function ( val ) {
    console.log( "C" ); // always A B C
} );
console.log( "B" );

Notes finales

Réutiliser les modules ResourceLoader

Don't reinvent the wheel. Much JavaScript functionality and MediaWiki-related utilities ship with MediaWiki core that are stable and you can (literally) depend on them. See ResourceLoader/Core modules before rolling your own code.

Pièges

  • Be careful to preserve compatibility with left-to-right and right-to-left languages (i.e. float: right or text-align: left), especially when styling text containers. Putting those declarations in CSS file will allow them to be automatically flipped for RTL-languages by CSSJanus in ResourceLoader.
  • Use attr() and prop() appropriately.
    Read more:
  • Consistently quote attribute selector values: [foo="bar"] instead of [foo=bar] (jqbug 8229).
  • As of jQuery 1.4 the jQuery constructor has a new feature that allows passing an object as second argument, like $( '<div>', { foo: 'bar', click: function () {}, css: { .. } } );. Don't use this. It makes code harder to follow, fails on attributes (such as 'size') that are also methods, and is unstable due to this mixing of jQuery methods with element attributes. A future jQuery method or plugin called "title" might convert an element into a heading, which means the title attribute can also no longer be set through this method. Be explicit and call .attr(), .prop(), .on() etc. directly.

Utiliser CSS pour styliser de nombreux éléments

N'appliquez pas de style à un grand nombre d'éléments à la fois car cela peut dégrader les performances. Utilisez plutôt la classe d'un parent commun (ou ajoutez-en un) et appliquez le CSS dans un fichier .css ou .less. Grâce à ResourceLoader, tout sera chargé dans la même requête HTTP, de sorte qu'il n'y a pas de dégradation des performances due à la présence d'un fichier CSS distinct. Ne mettez pas de CSS dans les attributs "style" en ligne, n'insérez pas non plus d'éléments "style" à partir de JavaScript.

Références