Du JavaScript propre

Compilation personnelle de quelques bonnes pratiques de codage en JavaScript.

Transcript

1. Du JavaScript propre ce que j'ai retenu
2. Promis, j'arrête
3. Inline <div style="width: 800px; margin: 1em auto; font: bold 1em/1.2 Verdana, Arial, Helvetica, sans-serif"> <div style="float: left; width: 400px; padding: 1em 2em; font- size: 0.9em"> <span id="get-shit" onclick="callSomeFunction()">News</span> </div> </div>
4. Point-virgule, où es-tu ? var foo = function() { } // parse error, semicolon expected test()
5. Espace de nommage pollué // global scope var foo = 42; function test() { // local scope foo = 21; } test(); foo; // 21
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
7. Le changement c'est maintenant
8. Couverture de tests et CI
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); });
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 ); });
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
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() );
13. Package var myapp = { subpackage: { counter: (function() { // ... })() } } // Et son utilisation : myapp.subpackage.counter.increment(); // 1
14. Design patterns Singleton Decorator Observer Prototype Factory MVC ...
15. Style guide
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