environ 2 minutes de lecture

Javascript

Java is to JavaScript what Car is to Carpet. (Chris Heilmann)

Scroll

Règles de style

Avant tout, nous utilisons JSLint. Il faut installer le package dans l’IDE que vous utilisez.

On utilise des double quotes, pas des single (à cause des apostrophes).

On code en ES5. Pas d’ES6 tant qu’on a besoin de le transpiler.

Globals

Evidemment, il faut déclarer le moins de globals possible. Si absolument nécessaire, il faut la déclarer en lower camel case, et la voir comme un genre de namespace.

/*global window */
window.exampleProject = {};

Singletons

On écrit les singletons avec des objets qui appelle automatiquement leur méthode invoke pour retourner uniquement les méthodes et attributs publics.

/*global exampleProject */
exampleProject.profile = {
  aPublicAttr: true,
  aPrivateAttr: 'test',
  anotherPrivateAttr: 42,

  init: function () {
    "use strict";
    // code
    this.aPrivateMethod();
    // more code
  },

  aPrivateMethod: function () {
    "use strict";
    // code
  },

  aPublicMethod: function () {
    "use strict";
    // code
  },

  invoke: function () {
    "use strict";
    return {
      aPublicAttr: this.aPublicAttr,
      init: this.init.bind(this),
      aPublicMethod: this.aPublicMethod.bind(this)
    };
  }
}.invoke();

// Used like this
exampleProject.profile.init();

Instances

On écrit les objets voués à être instanciés avec une function UpperCamelCase, puis des fonctions sur le prototype.

/*global exampleProject */

exampleProject.Button = function Button(id, name) {
    "use strict";
    this.id = id;
    this.name = name;
    this.area = undefined;
};

exampleProject.Button.prototype.aPublicMethod = function () {
    "use strict";
    // code
}

// Used like this
var button = new exampleProject.Button(1, "test");
button.aPublicMethod();

On peut aussi définir le prototype en une fois, comme ça:

exampleProject.Button.prototype = {
    constructor: exampleProject.Button,
    aPublicMethod: function () {
        "use strict";
        // code
    }
}

Attention, Code Climate n’aime pas cette syntaxe, qui devient vite trop longue.

RequestAnimationFrame

requestAnimationFrame for Smart Animating https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

Drop in replacements for setTimeout()/setInterval() that makes use of requestAnimationFrame() where possible for better performance https://gist.github.com/joelambert/1002116

Can I Use https://caniuse.com/#feat=requestanimationframe

Documentations

https://developer.mozilla.org/fr/

Brendan Eich

Le créateur de JavaScript.

https://brendaneich.com/

Douglas Crockford

Le créateur de JSON et JSLint.

http://crockford.com/

https://www.jslint.com/

JavaScript, The World’s Most Misunderstood Language

Programming Style & Your Brain

Pourquoi adopter des conventions de programmation?

The Better Parts (ES6)

The reason it takes a generation to agree that these ideas are good ideas is that we never change the minds of the people fighting against them. We just need to wait for them to die

Synthèse de la vidéo ici

The Post JavaScript Apocalypse

Un peu de futurologie JavaScript

His programming style

Douglas does not use (-> in favor of):

  • class
  • new
  • Object.create
  • this
  • null (-> undefined)
  • for (-> array.forEach)

  • for in (-> Object.keys(object).forEach)

    function factory(…) { // state variables return function generator() { return value; } }

He recommends:

  • Global variables UPPER_CASE
  • Constructor function with InitialCap
  • Solving the javascript number problem (0.1 + 0.2 !== 0.3) with DEC64
  • Callback function as a first argument, not last

Jonathan Mills

A Skeptics guide to functional style javascript

Choix divers

Générer un uid unique

https://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript/27747377#27747377 Option 3

Ressources à classer

http://effectivejs.com/

https://github.com/rwaldron/idiomatic.js/

http://jstherightway.org/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

https://addyosmani.com/resources/essentialjsdesignpatterns/book/