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 Slide

  2. Promis, j'arrête

    View Slide

  3. Inline


    News


    View Slide

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

    View Slide

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

    View Slide

  6. 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 Slide

  7. Le changement c'est maintenant

    View Slide

  8. Couverture de tests et CI

    View Slide

  9. 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 Slide

  10. 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 Slide

  11. 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 Slide

  12. 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 Slide

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

    View Slide

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

    View Slide

  15. Style guide

    View Slide

  16. 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 Slide