Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Du JavaScript propre
Search
zenigata
June 13, 2013
Programming
0
260
Du JavaScript propre
Compilation personnelle de quelques bonnes pratiques de codage en JavaScript.
zenigata
June 13, 2013
Tweet
Share
More Decks by zenigata
See All by zenigata
Refaire le SI d'une université catholique en 7 jours
zenigata
0
43
[REx] Mon premier train SAFe
zenigata
0
420
L'agilité vue par les animaux
zenigata
0
29
L'estimation AGILE démystifiée !
zenigata
1
160
Other Decks in Programming
See All in Programming
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
CSC307 Lecture 08
javiergs
PRO
0
330
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
小さな開発会社を作った理由
polidog
0
1.9k
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
【Go言語】golangci-lintの使い方
tomo1227
0
280
Featured
See All Featured
How GitHub (no longer) Works
holman
305
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
It's Worth the Effort
3n
181
27k
A Philosophy of Restraint
colly
200
16k
Happy Clients
brianwarren
94
6.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Optimizing for Happiness
mojombo
373
69k
YesSQL, Process and Tooling at Scale
rocio
166
14k
4 Signs Your Business is Dying
shpigford
178
21k
How to Ace a Technical Interview
jacobian
274
23k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Transcript
Du JavaScript propre ce que j'ai retenu
Promis, j'arrête
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>
Point-virgule, où es-tu ? var foo = function() { }
// parse error, semicolon expected test()
Espace de nommage pollué // global scope var foo =
42; function test() { // local scope foo = 21; } test(); foo; // 21
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
Le changement c'est maintenant
Couverture de tests et CI
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); });
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 ); });
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
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() );
Package var myapp = { subpackage: { counter: (function() {
// ... })() } } // Et son utilisation : myapp.subpackage.counter.increment(); // 1
Design patterns Singleton Decorator Observer Prototype Factory MVC ...
Style guide
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