From 49929dd3246794fafd6516130448f8bb9661839d Mon Sep 17 00:00:00 2001 From: Martin Andreas Woerz Date: Wed, 21 Jan 2015 02:54:17 +0100 Subject: [PATCH 1/8] Fixing a typo. --- .idea/.name | 1 + .idea/encodings.xml | 5 + .idea/idiomatic.js.iml | 9 ++ .idea/misc.xml | 5 + .idea/modules.xml | 9 ++ .idea/scopes/scope_settings.xml | 5 + .idea/vcs.xml | 7 + .idea/workspace.xml | 249 ++++++++++++++++++++++++++++++++ translations/de_DE/readme.md | 2 +- 9 files changed, 291 insertions(+), 1 deletion(-) create mode 100644 .idea/.name create mode 100644 .idea/encodings.xml create mode 100644 .idea/idiomatic.js.iml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/scopes/scope_settings.xml create mode 100644 .idea/vcs.xml create mode 100644 .idea/workspace.xml diff --git a/.idea/.name b/.idea/.name new file mode 100644 index 00000000..fe4f5387 --- /dev/null +++ b/.idea/.name @@ -0,0 +1 @@ +idiomatic.js \ No newline at end of file diff --git a/.idea/encodings.xml b/.idea/encodings.xml new file mode 100644 index 00000000..e206d70d --- /dev/null +++ b/.idea/encodings.xml @@ -0,0 +1,5 @@ + + + + + diff --git a/.idea/idiomatic.js.iml b/.idea/idiomatic.js.iml new file mode 100644 index 00000000..6b8184f8 --- /dev/null +++ b/.idea/idiomatic.js.iml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 00000000..1162f438 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,5 @@ + + + + + diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 00000000..ebf7f0e7 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/.idea/scopes/scope_settings.xml b/.idea/scopes/scope_settings.xml new file mode 100644 index 00000000..922003b8 --- /dev/null +++ b/.idea/scopes/scope_settings.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 00000000..c80f2198 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,7 @@ + + + + + + + diff --git a/.idea/workspace.xml b/.idea/workspace.xml new file mode 100644 index 00000000..12d65c69 --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,249 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1421805106517 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/translations/de_DE/readme.md b/translations/de_DE/readme.md index 29f681df..f27e92a0 100644 --- a/translations/de_DE/readme.md +++ b/translations/de_DE/readme.md @@ -482,7 +482,7 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc // Du kannst diese Probleme umgehen, indem du die Typen mit unären - order + - Operationen erzwingst: - foo = +document.getElementById("foo-input".value; + foo = +document.getElementById("foo-input").value; // ^ unärer + - Operator konvertiert den rechten Operanden in eine Zahl (Number) // typeof foo; // "number" From c2c8972b869f76a13e3512ff7f5534ffd194e70d Mon Sep 17 00:00:00 2001 From: Martin Andreas Woerz Date: Wed, 21 Jan 2015 02:56:30 +0100 Subject: [PATCH 2/8] Fixing a typo. --- .gitignore | 1 + .idea/.name | 1 - .idea/encodings.xml | 5 - .idea/idiomatic.js.iml | 9 -- .idea/misc.xml | 5 - .idea/modules.xml | 9 -- .idea/scopes/scope_settings.xml | 5 - .idea/vcs.xml | 7 - .idea/workspace.xml | 249 -------------------------------- 9 files changed, 1 insertion(+), 290 deletions(-) delete mode 100644 .idea/.name delete mode 100644 .idea/encodings.xml delete mode 100644 .idea/idiomatic.js.iml delete mode 100644 .idea/misc.xml delete mode 100644 .idea/modules.xml delete mode 100644 .idea/scopes/scope_settings.xml delete mode 100644 .idea/vcs.xml delete mode 100644 .idea/workspace.xml diff --git a/.gitignore b/.gitignore index 8ff5fb0c..9f6f5173 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ .DS_Store *.swp +.idea/ dist kits/makefile-kit/dist kits/jakefile-kit/dist diff --git a/.idea/.name b/.idea/.name deleted file mode 100644 index fe4f5387..00000000 --- a/.idea/.name +++ /dev/null @@ -1 +0,0 @@ -idiomatic.js \ No newline at end of file diff --git a/.idea/encodings.xml b/.idea/encodings.xml deleted file mode 100644 index e206d70d..00000000 --- a/.idea/encodings.xml +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/.idea/idiomatic.js.iml b/.idea/idiomatic.js.iml deleted file mode 100644 index 6b8184f8..00000000 --- a/.idea/idiomatic.js.iml +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/.idea/misc.xml b/.idea/misc.xml deleted file mode 100644 index 1162f438..00000000 --- a/.idea/misc.xml +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/.idea/modules.xml b/.idea/modules.xml deleted file mode 100644 index ebf7f0e7..00000000 --- a/.idea/modules.xml +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/.idea/scopes/scope_settings.xml b/.idea/scopes/scope_settings.xml deleted file mode 100644 index 922003b8..00000000 --- a/.idea/scopes/scope_settings.xml +++ /dev/null @@ -1,5 +0,0 @@ - - - - \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml deleted file mode 100644 index c80f2198..00000000 --- a/.idea/vcs.xml +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/.idea/workspace.xml b/.idea/workspace.xml deleted file mode 100644 index 12d65c69..00000000 --- a/.idea/workspace.xml +++ /dev/null @@ -1,249 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1421805106517 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - From afcc7b0ac45c3163242856721e7ec29edb328b0a Mon Sep 17 00:00:00 2001 From: Martin Andreas Woerz Date: Wed, 21 Jan 2015 03:08:14 +0100 Subject: [PATCH 3/8] Fixing a typo in the German readme.md. --- contributors.md | 1 + readme.md | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/contributors.md b/contributors.md index 471cbd6d..e3aaab97 100644 --- a/contributors.md +++ b/contributors.md @@ -27,3 +27,4 @@ * Aleksandr Filatov [@greybax](http://twitter.com/greybax), [github](https://github.com/greybax) * Duc Nguyen [@ducntq](https://twitter.com/ducntq), [github](https://github.com/ducntq) * James Young [@jamsyoung](http://twitter.com/jamsyoung), [github](https://github.com/jamsyoung) +* Martin Andreas Woerz [@ieservices] (https://twitter.com/ieservicesWorld), [github](https://github.com/ieservices) diff --git a/readme.md b/readme.md index 2d154c6c..1983960b 100644 --- a/readme.md +++ b/readme.md @@ -32,7 +32,7 @@ * Aleksandr Filatov [@greybax](http://twitter.com/greybax), [github](https://github.com/greybax) * Duc Nguyen [@ducntq](https://twitter.com/ducntq), [github](https://github.com/ducntq) * James Young [@jamsyoung](http://twitter.com/jamsyoung), [github](https://github.com/jamsyoung) - +* Martin Andreas Woerz [@ieservices] (https://twitter.com/ieservicesWorld), [github](https://github.com/ieservices) ## All code in any code-base should look like a single person typed it, no matter how many people contributed. From 9c1938dbb01ea45bb5cb67527b864b81540680d7 Mon Sep 17 00:00:00 2001 From: Martin Andreas Woerz Date: Wed, 21 Jan 2015 03:10:45 +0100 Subject: [PATCH 4/8] Fixing a typo in the German readme.md. --- contributors.md | 2 +- readme.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/contributors.md b/contributors.md index e3aaab97..f0db2f03 100644 --- a/contributors.md +++ b/contributors.md @@ -27,4 +27,4 @@ * Aleksandr Filatov [@greybax](http://twitter.com/greybax), [github](https://github.com/greybax) * Duc Nguyen [@ducntq](https://twitter.com/ducntq), [github](https://github.com/ducntq) * James Young [@jamsyoung](http://twitter.com/jamsyoung), [github](https://github.com/jamsyoung) -* Martin Andreas Woerz [@ieservices] (https://twitter.com/ieservicesWorld), [github](https://github.com/ieservices) +* Martin Andreas Woerz [@ieservices] (https://twitter.com/ieservicesWorld), [github](https://github.com/ieservices), [web] (http://ieservices.de) diff --git a/readme.md b/readme.md index 1983960b..7b105796 100644 --- a/readme.md +++ b/readme.md @@ -32,7 +32,7 @@ * Aleksandr Filatov [@greybax](http://twitter.com/greybax), [github](https://github.com/greybax) * Duc Nguyen [@ducntq](https://twitter.com/ducntq), [github](https://github.com/ducntq) * James Young [@jamsyoung](http://twitter.com/jamsyoung), [github](https://github.com/jamsyoung) -* Martin Andreas Woerz [@ieservices] (https://twitter.com/ieservicesWorld), [github](https://github.com/ieservices) +* Martin Andreas Woerz [@ieservices] (https://twitter.com/ieservicesWorld), [github](https://github.com/ieservices), [web] (http://ieservices.de) ## All code in any code-base should look like a single person typed it, no matter how many people contributed. From ee22b253e7f0cb70f5370ba9563b0b72ace55fd8 Mon Sep 17 00:00:00 2001 From: Martin Andreas Woerz Date: Wed, 21 Jan 2015 03:42:18 +0100 Subject: [PATCH 5/8] Complement and update the German translation --- readme.md | 2 + translations/de_DE/readme.md | 429 ++++++++++++++++++++++++++++++----- 2 files changed, 370 insertions(+), 61 deletions(-) diff --git a/readme.md b/readme.md index 7b105796..3f792bdc 100644 --- a/readme.md +++ b/readme.md @@ -83,6 +83,8 @@ * [jscs](https://www.npmjs.org/package/jscs) * [Editorconfig](http://editorconfig.org/) +[Usage of Code Quality Tools by Anton Kovalyov](http://anton.kovalyov.net/slides/gothamjs/) + ## Get Smart ### [Annotated ECMAScript 5.1](http://es5.github.com/) diff --git a/translations/de_DE/readme.md b/translations/de_DE/readme.md index f27e92a0..1752f2c9 100644 --- a/translations/de_DE/readme.md +++ b/translations/de_DE/readme.md @@ -1,5 +1,6 @@ # Grundsätze für das schreiben von konsequentem und idiomatischem JavaScript + ## Dies ist ein lebendiges Dokument und neue Ideen, die den Code in unserem Umfeld verbessern, sind immer willkommen. Tragt dazu bei: "fork", "clone", "branch", "commit", "push", "pull request". * Rick Waldron [@rwaldron](http://twitter.com/rwaldron), [github](https://github.com/rwldrn) @@ -9,7 +10,7 @@ * Raynos [github](https://github.com/Raynos) * Matias Arriola [@MatiasArriola](https://twitter.com/MatiasArriola), [github](https://github.com/MatiasArriola/) * John Fischer [@jfroffice](https://twitter.com/jfroffice), [github](https://github.com/jfroffice/) -* Idan Gazit [@idangazit](http://twitter.com/idangazit), [github](https://github.com/idangazit) +* Idan Gazit [@idangazit](http://twitter.com/idangazit), [github](https://github.com/idan) * Leo Balter [@leobalter](http://twitter.com/leobalter), [github](https://github.com/leobalter) * Breno Oliveira [@garu_rj](http://twitter.com/garu_rj), [github](https://github.com/garu) * Leo Beto Souza [@leobetosouza](http://twitter.com/leobetosouza), [github](https://github.com/leobetosouza) @@ -23,8 +24,15 @@ * Sofish Lin [@sofish](http://twitter.com/sofish), [github](https://github.com/sofish) * Дејан Димић [@dejan_dimic](http://twitter.com/dejan_dimic), [github](https://github.com/rubystream) * Miloš Gavrilović [@gavrisimo](http://twitter.com/gavrisimo), [github](https://github.com/gavrisimo) +* Firede [@firede](https://twitter.com/firede) [github](https://github.com/firede) +* monkadd [github](https://github.com/monkadd) +* Stephan Lindauer [@stephanlindauer](http://twitter.com/stephanlindauer), [github](https://github.com/stephanlindauer) +* Thomas P [@dragon5689](https://twitter.com/dragon5689) [github](https://github.com/dragon5689) +* Yotam Ofek [@yotamofek](https://twitter.com/yotamofek) [github](https://github.com/yotamofek) +* Aleksandr Filatov [@greybax](http://twitter.com/greybax), [github](https://github.com/greybax) * Duc Nguyen [@ducntq](https://twitter.com/ducntq), [github](https://github.com/ducntq) * James Young [@jamsyoung](http://twitter.com/jamsyoung), [github](https://github.com/jamsyoung) +* Martin Andreas Woerz [@ieservices] (https://twitter.com/ieservicesWorld), [github](https://github.com/ieservices), [web] (http://ieservices.de) ## Code sollte grundsätzlich so aussehen, als wäre er von einer einzigen Person geschrieben worden, völlig egal wie viele letztlich daran gearbeitet haben. @@ -33,24 +41,30 @@ ### Ich möchte anderen Leuten nicht meine Vorlieben aufzwängen; wenn es bereits einen geläufigen Style gibt, sollte dieser respektiert werden. -> "Das es eine schlechte Idee ist, nur für sich selbst Code zu schreiben, ist etwas was man als guter Betreuer eines erfolgreichen Projektes begreifen muss™. Wenn tausende Leute deinen Code benutzen, dann schreibe deinen Code möglichst klar und übersichtlich, nicht einfach nur nach deinen persönlichen Vorlieben." - Idan Gazit +> "Das es eine schlechte Idee ist, nur für sich selbst Code zu schreiben, ist etwas was man als guter Betreuer eines erfolgreichen Projektes begreifen muss™. Wenn tausende Leute deinen Code benutzen, dann schreibe deinen Code möglichst klar und übersichtlich, nicht einfach nur nach deinen persönlichen Vorlieben." +>_Idan_ _Gazit_ + +> ### "Arguments over style are pointless. Es sollte ein Style Guide geben und es ist ratsam diesem zu folgen" +>_Rebecca_ _Murphey_ +  ## Übersetzungen * [ORIGINAL](https://github.com/rwldrn/idiomatic.js/) -* [German](https://github.com/rwldrn/idiomatic.js/tree/master/translations/de_DE) -* [French](https://github.com/rwldrn/idiomatic.js/tree/master/translations/fr_FR) -* [Spanish](https://github.com/rwldrn/idiomatic.js/tree/master/translations/es_ES) -* [Portuguese - Brazil](https://github.com/rwldrn/idiomatic.js/tree/master/translations/pt_BR) -* [Korean](https://github.com/rwldrn/idiomatic.js/tree/master/translations/ko_KR) -* [Japanese](https://github.com/rwldrn/idiomatic.js/tree/master/translations/ja_JP) -* [Italian](https://github.com/rwldrn/idiomatic.js/tree/master/translations/it_IT) -* [Russian](https://github.com/rwldrn/idiomatic.js/tree/master/translations/ru_RU) -* [Romanian](https://github.com/rwldrn/idiomatic.js/tree/master/translations/ro_RO) -* [简体中文](https://github.com/rwldrn/idiomatic.js/tree/master/translations/zh_CN) -* [Serbian - cyrilic alphabet](https://github.com/rwldrn/idiomatic.js/tree/master/translations/ср_СР) -* [Serbian - latin aplphabet](https://github.com/rwldrn/idiomatic.js/tree/master/translations/sr_SR) +* [Deutsch](https://github.com/rwldrn/idiomatic.js/tree/master/translations/de_DE) +* [Französisch](https://github.com/rwldrn/idiomatic.js/tree/master/translations/fr_FR) +* [Spanisch](https://github.com/rwldrn/idiomatic.js/tree/master/translations/es_ES) +* [Portugisich - Brazil](https://github.com/rwldrn/idiomatic.js/tree/master/translations/pt_BR) +* [Koreanisch](https://github.com/rwldrn/idiomatic.js/tree/master/translations/ko_KR) +* [Japanisch](https://github.com/rwldrn/idiomatic.js/tree/master/translations/ja_JP) +* [Italienisch](https://github.com/rwldrn/idiomatic.js/tree/master/translations/it_IT) +* [Russisch](https://github.com/rwldrn/idiomatic.js/tree/master/translations/ru_RU) +* [Rumänisch](https://github.com/rwldrn/idiomatic.js/tree/master/translations/ro_RO) +* [Chinesisch](https://github.com/rwldrn/idiomatic.js/tree/master/translations/zh_CN) +* [Serbisch - Kyrillisches Alphabet](https://github.com/rwldrn/idiomatic.js/tree/master/translations/ср_СР) +* [Serbisch - Lateinisches Aplphabet](https://github.com/rwldrn/idiomatic.js/tree/master/translations/sr_SR) + ## Wichtiger, nicht-idiomatischer Kram: @@ -64,14 +78,17 @@ * [JavaScript Lint (JSL)](http://javascriptlint.com/) * [jshint](http://jshint.com/) * [jslint](http://jslint.org/) + * [eslint](http://eslint.org/) + * [jscs](https://www.npmjs.org/package/jscs) * [Editorconfig](http://editorconfig.org/) -[Leveraging Code Quality Tools by Anton Kovalyov](http://anton.kovalyov.net/slides/gothamjs/) +[Nutzung von "Code Quality Tools" von Anton Kovalyov](http://anton.kovalyov.net/slides/gothamjs/) -### Schlau werden +### Wissen adaptieren -[http://es5.github.com/](http://es5.github.com/) +### [http://es5.github.com/](http://es5.github.com/) +### [EcmaScript Language Specification, 5.1 Edition](http://ecma-international.org/ecma-262/5.1/) Bei den folgenden Ressourcen sollte berücksichtigt werden das sie 1) unvollständig und 2) *PFLICHTLEKTÜREN* sind. Ich stimme dem geschriebenen Style der unten stehenden Autoren nicht immer zu, aber eins ist sicher: Sie sind konsequent. Außerdem sind dies echte Autoriäten in dieser Sprache. @@ -83,10 +100,16 @@ Bei den folgenden Ressourcen sollte berücksichtigt werden das sie 1) unvollstä * [Douglas Crockford's Wrrrld Wide Web](http://www.crockford.com) * [JS Assessment](https://github.com/rmurphey/js-assessment) + + + ### Build- und Deployment-Prozess Jedes Projekt sollte Komponenten verwenden, um den Code zu linten, testen oder komprimieren, um so im Produktivbereich eingesetzt zu werden. Ben Alan hat für diese Aufgabe [grunt](https://github.com/cowboy/grunt) entworfen und damit offiziell das "kits/" Verzeichnis aus diesem Repository ersetzt. + + + ### Hilfsmittel zum Testen Projekte _müssen_ irgendeine Art von Unit-, Reference, Implementation- oder Functional-Testing enthalten. Demonstrationen von Anwendungsfällen reichen als Test nicht aus. Die unten aufgeführte Liste beinhaltet eine Menge nützlicher Test-Frameworks. @@ -98,6 +121,7 @@ Projekte _müssen_ irgendeine Art von Unit-, Reference, Implementation- oder Fun * [Hiro](http://hirojs.com/) * [JsTestDriver](https://code.google.com/p/js-test-driver/) * [Buster.js](http://busterjs.org/) + * [Sinon.js](http://sinonjs.org/) ## Inhaltsverzeichnis @@ -124,6 +148,7 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc + ## Idiomatisches Style Manifest @@ -136,6 +161,8 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc - Löschen von Whitespaces am Ende der Zeile - Löschen von leeren "Whitespace Zeilen" - Commits und Diffs sind einfacher zu lesen + - Nutze [Editorconfig](http://editorconfig.org/) wenn es möglich ist. Es unterstützt die meisten IDEs und folgt den meisten Whitespace-Einstellungen. + 2. Schöne Syntax @@ -196,6 +223,7 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc // statements } + if ( true ) { // statements } else { @@ -224,7 +252,7 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc // Nur einmal `var` pro Scope (Funktion) zu verwenden, verbessert die Lesbarkeit // und hält deine Deklarationsliste frei von Verwirrungen - // Schlecht + // Mangelhaft var foo = ""; var bar = ""; var qux; @@ -241,12 +269,13 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc quux; // 2.B.1.3 - // var Statements sollten immer an den Anfang ihrers respektiven Scopes (Funktion) + // var Anweisungen sollten immer am Anfang ihreres respektiven Scopes (Funktion) stehen // Das gleiche gilt für const und let aus ECMAScript 6 - // Schlecht + // Mangelhaft function foo() { - // irgendwas + + // einige Anweisungen hier var bar = "", qux; @@ -259,6 +288,27 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc // alle Statements nach der var-Deklaration } + + // 2.B.1.4 + // const und let Anweisungen des ECMAScript 6 - sollten ebenso am Anfang des Scopes stehen (block). + + // Mangelhaft + function foo() { + let foo, + bar; + if (condition) { + bar = ""; + // Anweisungen + } + } + // Gut + function foo() { + let foo; + if (condition) { + let bar = ""; + // Anweisungen + } + } ``` ```javascript @@ -269,7 +319,7 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc } - // Benutzung + // Anwendung foo( arg1, argN ); @@ -279,9 +329,10 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc return zahl * zahl; } - // Benutzung + // Anwendung quadrat( 10 ); + // Really contrived continuation passing style function quadrat( zahl, callback ) { callback( zahl * zahl); } @@ -316,13 +367,15 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc this.options = options; } - // Benutzung + // Anwendung var fooBar = new FooBar({ a: "alpha" }); fooBar.options: // { a: "alpha" } ``` + + C. Ausnahmen, Leichte Abweichungen ```javascript @@ -453,7 +506,10 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc ``` - ```js + + + + ```javascript // 3.B.1.1 @@ -464,7 +520,9 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc // "number" ... - // Später im Code musst du `foo` mit einem neuen Wert aus dem input-Element überschreiben + // Später im Code solltest Du `foo` mit einem neu erhaltenen + // Wert aus dem input-Element überschreiben + foo = document.getElementById("foo-input").value; // Wenn du jetzt mit `typeof foo` testen möchtest, wird das ergebnis `string` sein @@ -581,10 +639,18 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc !!~array.indexOf("d"); // false + + // Beachte, dass das obenstehende als "unnötig clever" betrachtet werden sollte + // Bevorzuge allerdings the offensichtlichen Ansatz eines Vergleiches eines Rückgabewertes + // indexOf, like: + + if ( array.indexOf( "a" ) >= 0 ) { + // ... + } ``` ```javascript - // 3.B.2.3 + // 3.B.2.4 var num = 2.5; @@ -622,13 +688,20 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc // Gibt 4294967294 zurück + + + + ``` + + 4. Bedingte Auswertungen ```javascript //4.1.1 - // When du nur prüfen willst, ob ein Array eine Länge hat, ... + // When du nur prüfen willst, + // ob ein Array eine Länge hat, ... if ( array.length > 0 ) ... // prüfe es so: @@ -637,6 +710,7 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc // 4.1.2 // Wenn du nur prüfen willst, ob ein Array leer ist... + // anstelle von: if ( array.length === 0 ) ... // mach es so: @@ -645,14 +719,15 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc // 4.1.3 // Wenn du prüfen willst ob ein String nich leer ist + // anstelle von: if ( string !== "" ) ... // ... mach es so: if ( string ) ... - // 4.1.4 // Wenn du prüfen willst ob ein String leer ist... + // anstelle von: if ( string === "" ) ... // ... mach es so: @@ -660,7 +735,17 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc // 4.1.5 - // Wenn du prüfen willst, ob eine Referenz false ist... + // Wenn du prüfen willst, ob eine Referenz true ist... + // anstelle von: + if ( foo === true ) ... + + // ...evaluate like you mean it, take advantage of built in capabilities: + if ( foo ) ... + + + // 4.1.6 + // When evaluating that a reference is false, + // instead of this: if ( foo === false ) ... // ... nutze die Negierung um eine eine true-Auswertung zu erzwingen @@ -671,16 +756,55 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc if ( foo === false ) ... // 4.1.7 - // Wenn du eine Reference prüfen möchtest, die möglicherweise null oder undefined aber NICHT false... + // Wenn du eine Reference prüfen möchtest, die möglicherweise null oder undefined aber NICHT + // false... if ( foo === null || foo === undefined ) ... // ... nutze den Vorteil der Typerzwingung if ( foo == null ) ... - // Denk dran, '==' wird 'null' auf 'null' UND 'undefined' matchen, aber nicht 'false', "" oder 0 + // Denk dran, '==' wird 'null' auf 'null' UND 'undefined' matchen, + // aber nicht 'false', "" oder 0 null == undefined ``` + ALWAYS evaluate for the best, most accurate result - the above is a guideline, not a dogma. + + ```javascript + + // 4.2.1 + // Type coercion and evaluation notes + + // Prefer `===` over `==` (unless the case requires loose type evaluation) + + // === does not coerce type, which means that: + + "1" === 1; + // false + + // == does coerce type, which means that: + + "1" == 1; + // true + + + // 4.2.2 + // Booleans, Truthies & Falsies + + // Booleans: + true, false + + // Truthy: + "foo", 1 + + // Falsy: + "", 0, null, undefined, NaN, void 0 + + ``` + + ``` + + 5. Praktischer Style @@ -729,7 +853,7 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc ```javascript // 5.2.1 - // Ein angewandter Konstruktor + // Ein praktischer Konstruktor (function( global ) { @@ -848,10 +972,163 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc methodNamesLikeThis; SYMBOLIC_CONSTANTS_LIKE_THIS; + ``` + + B. Faces of `this` + + Beyond the generally well known use cases of `call` and `apply`, always prefer `.bind( this )` or a functional equivalent, for creating `BoundFunction` definitions for later invocation. Only resort to aliasing when no preferable option is available. + + ```javascript + + // 6.B.1 + function Device( opts ) { + + this.value = null; + + // open an async stream, + // this will be called continuously + stream.read( opts.path, function( data ) { + + // Update this instance's current value + // with the most recent value from the + // data stream + this.value = data; + + }.bind(this) ); + + // Throttle the frequency of events emitted from + // this Device instance + setInterval(function() { + + // Emit a throttled event + this.emit("event"); + + }.bind(this), opts.freq || 100 ); + } + + // Just pretend we've inherited EventEmitter ;) + ``` + + When unavailable, functional equivalents to `.bind` exist in many modern JavaScript libraries. + + + ```javascript + // 6.B.2 + + // eg. lodash/underscore, _.bind() + function Device( opts ) { + + this.value = null; + + stream.read( opts.path, _.bind(function( data ) { + + this.value = data; + + }, this) ); + + setInterval(_.bind(function() { + + this.emit("event"); + + }, this), opts.freq || 100 ); + } + + // eg. jQuery.proxy + function Device( opts ) { + + this.value = null; + + stream.read( opts.path, jQuery.proxy(function( data ) { + + this.value = data; + + }, this) ); + + setInterval( jQuery.proxy(function() { + + this.emit("event"); + + }, this), opts.freq || 100 ); + } + + // eg. dojo.hitch + function Device( opts ) { + + this.value = null; + + stream.read( opts.path, dojo.hitch( this, function( data ) { + + this.value = data; + + }) ); + + setInterval( dojo.hitch( this, function() { + + this.emit("event"); + + }), opts.freq || 100 ); + } ``` + As a last resort, create an alias to `this` using `self` as an Identifier. This is extremely bug prone and should be avoided whenever possible. + + ```javascript + + // 6.B.3 + + function Device( opts ) { + var self = this; + + this.value = null; + + stream.read( opts.path, function( data ) { + + self.value = data; + + }); + + setInterval(function() { + + self.emit("event"); + + }, opts.freq || 100 ); + } + + ``` + + + C. Use `thisArg` + + Several prototype methods of ES 5.1 built-ins come with a special `thisArg` signature, which should be used whenever possible + + ```javascript + + // 6.C.1 + + var obj; + + obj = { f: "foo", b: "bar", q: "qux" }; + + Object.keys( obj ).forEach(function( key ) { + + // |this| now refers to `obj` + + console.log( this[ key ] ); + + }, obj ); // <-- the last arg is `thisArg` + + // Prints... + + // "foo" + // "bar" + // "qux" + + ``` + + `thisArg` can be used with `Array.prototype.every`, `Array.prototype.forEach`, `Array.prototype.some`, `Array.prototype.map`, `Array.prototype.filter` + 7. Sonstiges Diese Sektion stellt Ideen und Konzepte dar, die nicht dogmatisch betrachtet werden sollten. Sie sollen fragliche Praktiken fördern die immer wieder in der JavaScript Programmierung auftauchen. @@ -883,54 +1160,82 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc // 7.A.1.2 // Besser sollte man aber ein Objektliteral oder Modul verwenden: - var switchObj = { + + var cases, delegator; + + // Example returns for illustration only. + cases = { alpha: function() { // statements // a return + return [ "Alpha", arguments.length ]; }, beta: function() { // statements // a return + return [ "Beta", arguments.length ]; }, _default: function() { // statements // a return + return [ "Default", arguments.length ]; } }; - var switchModule = (function () { - return { - alpha: function() { - // statements - // a return - }, - beta: function() { - // statements - // a return - }, - _default: function() { - // statements - // a return - } - }; - })(); + delegator = function() { + var args, key, delegate; + // Transform arguments list into an array + args = [].slice.call( arguments ); + + // shift the case key from the arguments + key = args.shift(); + + // Assign the default case handler + delegate = cases._default; + + // Derive the method to delegate operation to + if ( cases.hasOwnProperty( key ) ) { + delegate = cases[ key ]; + } + + // The scope arg could be set to something specific, + // in this case, |null| will suffice + return delegate.apply( null, args ); + }; // 7.A.1.3 // Wenn `foo` eine Eigenschaft von `switchObj` oder `switchModule` ist, führe diesen Code hier aus.. - ( Object.hasOwnProperty.call( switchObj, foo ) && switchObj[ foo ] || switchObj._default )( args ); + delegator( "alpha", 1, 2, 3, 4, 5 ); + // [ "Alpha", 5 ] + + // Of course, the `case` key argument could easily be based + // on some other arbitrary condition. + + var caseKey, someUserInput; - ( Object.hasOwnProperty.call( switchObj, foo ) && switchModule[ foo ] || switchModule._default )( args ); + // Possibly some kind of form input? + someUserInput = 9; - // Wenn du auf die Werte von `foo` vertraust und weißt was drin ist, - // kannst du die ODER-Prüfung weglassen und den Code einfach nur ausführen: + if ( someUserInput > 10 ) { + caseKey = "alpha"; + } else { + caseKey = "beta"; + } - switchObj[ foo ]( args ); + caseKey = someUserInput > 10 ? "alpha" : "beta"; - switchModule[ foo ]( args ); + // And then... + + delegator( caseKey, someUserInput ); + // [ "Beta", 1 ] + + // And of course... + + delegator(); + // [ "Default", 0 ] - // Dieses Muster sorgt außerdem für Wiederverwendbarkeit von Code ``` @@ -939,7 +1244,7 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc ```javascript // 7.B.1.1 - // Schlecht: + // Mangelhaft: function returnLate( foo ) { var ret; @@ -963,6 +1268,7 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc ``` + 8. Native & Host Objekte Das grundsätzliche Prinzip ist hier: @@ -980,9 +1286,10 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc 9. Kommentare - * Mehrzeilige Kommentare sind gut - * Kommentare am Zeilenende sind untersagt! - * JSDoc Style Kommentare sind gut, aber erfordern mehr Zeit. + #### Single line above the code that is subject + #### Mehrzeilige Kommentare sind gut + #### Kommentare am Zeilenende sind untersagt! + #### JSDoc Style Kommentare sind gut, aber erfordern mehr Zeit. 10. Einsprachiger Code From 813e1498f7cf3dda7581236a14345a63f35d291b Mon Sep 17 00:00:00 2001 From: Martin Andreas Woerz Date: Wed, 21 Jan 2015 03:48:07 +0100 Subject: [PATCH 6/8] Fixing a typo in the German readme.md. --- translations/de_DE/readme.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/translations/de_DE/readme.md b/translations/de_DE/readme.md index 1752f2c9..5579bbc5 100644 --- a/translations/de_DE/readme.md +++ b/translations/de_DE/readme.md @@ -188,15 +188,15 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc // Benutze Whitespaces um die Lesbarkeit zu verbessern if ( Bedingung ) { - // statements + // Anweisungen } while ( Bedingung ) { - // statements + // Anweisungen } for ( var i = 0; i < 100; i++ ) { - // statements + // Anweisungen } // Noch besser: @@ -205,7 +205,7 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc length = 100; for ( i = 0; i < length; i++ ) { - // statements + // Anweisungen } // Oder... @@ -214,20 +214,20 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc length = 100; for ( ; i < length; i++ ) { - // statements + // Anweisungen } var prop; for ( prop in object ) { - // statements + // Anweisungen } if ( true ) { - // statements + // Anweisungen } else { - // statements + // Anweisungen } ``` @@ -416,21 +416,21 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc // 2.D.1.1 if (Bedingung) { - // statements + // Anweisungen } while (Bedingung) { - // statements + // Anweisungen } for (var i = 0; i < 100; i++) { - // statements + // Anweisungen } if (true) { - // statements + // Anweisungen } else { - // statements + // Anweisungen } ``` @@ -1166,17 +1166,17 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc // Example returns for illustration only. cases = { alpha: function() { - // statements + // Anweisungen // a return return [ "Alpha", arguments.length ]; }, beta: function() { - // statements + // Anweisungen // a return return [ "Beta", arguments.length ]; }, _default: function() { - // statements + // Anweisungen // a return return [ "Default", arguments.length ]; } From 74837f8b3b56a6847ad73b356f4a0861c46db179 Mon Sep 17 00:00:00 2001 From: Martin Andreas Woerz Date: Wed, 21 Jan 2015 03:51:13 +0100 Subject: [PATCH 7/8] Fixing a typo. --- translations/de_DE/readme.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/translations/de_DE/readme.md b/translations/de_DE/readme.md index 5579bbc5..091e0ed2 100644 --- a/translations/de_DE/readme.md +++ b/translations/de_DE/readme.md @@ -802,8 +802,6 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc ``` - ``` - From 031641d88e022b34a30f6730915469a0e47fd0b5 Mon Sep 17 00:00:00 2001 From: Martin Andreas Woerz Date: Wed, 21 Jan 2015 03:53:16 +0100 Subject: [PATCH 8/8] Fixing a typo in the German readme.md. --- translations/de_DE/readme.md | 62 +++++++++++++++++++----------------- 1 file changed, 32 insertions(+), 30 deletions(-) diff --git a/translations/de_DE/readme.md b/translations/de_DE/readme.md index 091e0ed2..95d84c89 100644 --- a/translations/de_DE/readme.md +++ b/translations/de_DE/readme.md @@ -1070,62 +1070,62 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc ``` - As a last resort, create an alias to `this` using `self` as an Identifier. This is extremely bug prone and should be avoided whenever possible. + As a last resort, create an alias to `this` using `self` as an Identifier. This is extremely bug prone and should be avoided whenever possible. - ```javascript + ```javascript - // 6.B.3 + // 6.B.3 - function Device( opts ) { - var self = this; + function Device( opts ) { + var self = this; - this.value = null; + this.value = null; - stream.read( opts.path, function( data ) { + stream.read( opts.path, function( data ) { - self.value = data; + self.value = data; - }); + }); - setInterval(function() { + setInterval(function() { - self.emit("event"); + self.emit("event"); - }, opts.freq || 100 ); - } + }, opts.freq || 100 ); + } - ``` + ``` - C. Use `thisArg` + C. Use `thisArg` - Several prototype methods of ES 5.1 built-ins come with a special `thisArg` signature, which should be used whenever possible + Several prototype methods of ES 5.1 built-ins come with a special `thisArg` signature, which should be used whenever possible - ```javascript + ```javascript - // 6.C.1 + // 6.C.1 - var obj; + var obj; - obj = { f: "foo", b: "bar", q: "qux" }; + obj = { f: "foo", b: "bar", q: "qux" }; - Object.keys( obj ).forEach(function( key ) { + Object.keys( obj ).forEach(function( key ) { - // |this| now refers to `obj` + // |this| now refers to `obj` - console.log( this[ key ] ); + console.log( this[ key ] ); - }, obj ); // <-- the last arg is `thisArg` + }, obj ); // <-- the last arg is `thisArg` - // Prints... + // Prints... - // "foo" - // "bar" - // "qux" + // "foo" + // "bar" + // "qux" - ``` + ``` - `thisArg` can be used with `Array.prototype.every`, `Array.prototype.forEach`, `Array.prototype.some`, `Array.prototype.map`, `Array.prototype.filter` + `thisArg` can be used with `Array.prototype.every`, `Array.prototype.forEach`, `Array.prototype.some`, `Array.prototype.map`, `Array.prototype.filter` 7. Sonstiges @@ -1222,6 +1222,8 @@ Die folgenden Bereiche zeigen einen vertretbaren Style Guide für moderne JavaSc caseKey = "beta"; } + // oder... + caseKey = someUserInput > 10 ? "alpha" : "beta"; // And then...