Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Du JavaScript propre

Du JavaScript propre

Compilation personnelle de quelques bonnes pratiques de codage en JavaScript.

zenigata

June 13, 2013
Tweet

More Decks by zenigata

Other Decks in Programming

Transcript

  1. Du JavaScript propre
    ce que j'ai retenu

    View full-size slide

  2. Promis, j'arrête

    View full-size slide

  3. Point-virgule, où es-tu ?
    var foo = function() {
    } // parse error, semicolon expected
    test()

    View full-size slide

  4. Espace de nommage pollué
    // global scope
    var foo = 42;
    function test() {
    // local scope
    foo = 21;
    }
    test();
    foo; // 21

    View full-size slide

  5. Eval c'est le mal
    var foo = 1;
    function test() {
    var foo = 2;
    var bar = eval;
    bar('foo = 3');
    return foo;
    }
    test(); // 2
    foo; // 3

    View full-size slide

  6. Le changement c'est maintenant

    View full-size slide

  7. Couverture de tests et CI

    View full-size slide

  8. QUnit
    test("prettydate.format", function() {
    function date(then, expected) {
    equal(prettyDate.format("2008/01/28 22:25:00", then),
    expected);
    }
    date("2008/01/28 22:24:30", "just now");
    date("2008/01/28 22:23:30", "1 minute ago");
    date("2008/01/28 21:23:30", "1 hour ago");
    date("2008/01/27 22:23:30", "Yesterday");
    date("2008/01/26 22:23:30", "2 days ago");
    date("2007/01/26 22:23:30", undefined);
    });

    View full-size slide

  9. Mocha
    test('display received results', function () {
    var sr = new SearchResults(ul);
    sr.setResults(data);
    assert.equal(ul.find('.no-results').length, 0);
    assert.equal(ul.find('li.result').length, data.length);
    assert.equal(
    ul.find('li.result').first().attr('data-name'),
    data[0].name
    );
    });

    View full-size slide

  10. Module
    var counter = (function() {
    var privateValue = 0;
    var publicMethod = function() {
    privateValue++;
    return privateValue;
    };
    return {
    increment: publicMethod
    };
    })();
    // On passe à l'utilisation du compteur :
    counter.increment(); // 1
    counter.privateValue; // undefined
    counter.privateValue = 0;
    counter.increment(); // 2

    View full-size slide

  11. Classe
    // A car "class"
    function Car( model ) {
    this.model = model;
    this.color = "silver";
    this.year = "2012";
    this.getInfo = function () {
    return this.model + " " + this.year;
    };
    }
    var myCar = new Car("ford");
    myCar.year = "2010";
    console.log( myCar.getInfo() );

    View full-size slide

  12. Package
    var myapp = {
    subpackage: {
    counter: (function() {
    // ...
    })()
    }
    }
    // Et son utilisation :
    myapp.subpackage.counter.increment(); // 1

    View full-size slide

  13. Design patterns
    Singleton
    Decorator
    Observer
    Prototype
    Factory
    MVC
    ...

    View full-size slide

  14. Webographie
    http://linsolas.github.io/blog/2013/04/03/devoxx-france-2013-du-javascript-propre-challenge-accepted/
    http://coding.smashingmagazine.com/2012/06/27/introduction-to-javascript-unit-testing/
    http://alistapart.com/article/writing-testable-javascript
    http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/
    http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
    http://contribute.jquery.org/style-guide/js/
    https://github.com/styleguide/javascript
    http://addyosmani.com/blog/javascript-style-guides-and-beautifiers/
    http://javascript.crockford.com/code.html
    http://addyosmani.com/resources/essentialjsdesignpatterns/book/
    http://bonsaiden.github.io/JavaScript-Garden/
    http://ejohn.org/apps/learn/
    http://www.eriwen.com/tools/perfect-front-end-build/
    http://500px.com/photo/15306253
    http://www.danescobar.com/albums/people/BRAWNY-20GIRLS_web.jpg

    View full-size slide